@nextcloud/vue 8.0.0-beta.6 → 8.0.0-beta.8

package/dist/Components/NcAppSettingsSection.mjs

@@ -1,15 +1,41 @@
-import "../assets/index52.css";
-import { n as e } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const n = { name: "NcAppSettingsSection", props: { name: { type: String, required: !0 }, id: { type: String, required: !0, validator(t) {
-  return /^[a-z0-9\-_]+$/.test(t);
-} } }, computed: { htmlId() {
-  return "settings-section_" + this.id;
-} } };
-var i = function() {
-  var t = this, s = t._self._c;
-  return s("div", { staticClass: "app-settings-section", attrs: { id: t.htmlId } }, [s("h3", { staticClass: "app-settings-section__name" }, [t._v(" " + t._s(t.name) + " ")]), t._t("default")], 2);
-}, r = [], a = e(n, i, r, !1, null, "a8066fd5", null, null);
-const l = a.exports;
+import "../assets/index-1151d229.css";
+import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const i = {
+  name: "NcAppSettingsSection",
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    id: {
+      type: String,
+      required: !0,
+      validator(e) {
+        return /^[a-z0-9\-_]+$/.test(e);
+      }
+    }
+  },
+  computed: {
+    // generate an id for each settingssection based on the name without whitespaces
+    htmlId() {
+      return "settings-section_" + this.id;
+    }
+  }
+};
+var r = function() {
+  var t = this, n = t._self._c;
+  return n("div", { staticClass: "app-settings-section", attrs: { id: t.htmlId } }, [n("h3", { staticClass: "app-settings-section__name" }, [t._v(" " + t._s(t.name) + " ")]), t._t("default")], 2);
+}, _ = [], a = /* @__PURE__ */ s(
+  i,
+  r,
+  _,
+  !1,
+  null,
+  "a8066fd5",
+  null,
+  null
+);
+const p = a.exports;
 export {
-  l as default
+  p as default
 };

package/dist/Components/NcAppSettingsSection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsSection.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"NcAppSettingsSection.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<template>\n\t<div :id=\"htmlId\" class=\"app-settings-section\">\n\t\t<h3 class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(id) {\n\t\t\t\t// Only alphanumeric, dash and underscore\n\t\t\t\treturn /^[a-z0-9\\-_]+$/.test(id)\n\t\t\t},\n\t\t},\n\t},\n\tcomputed: {\n\t\t// generate an id for each settingssection based on the name without whitespaces\n\t\thtmlId() {\n\t\t\treturn 'settings-section_' + this.id\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 20px;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["_sfc_main","id"],"mappings":";;AAgCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAC,GAAA;AAEA,eAAA,iBAAA,KAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA,IAEA,SAAA;AACA,aAAA,sBAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/Components/NcAppSidebar.cjs

@@ -1 +1,443 @@
-var w=require("../assets/index21.css");const r=require("./NcVNodes.cjs"),n=require("./NcCheckboxRadioSwitch.cjs"),s=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs"),o=require("./NcActions.cjs"),l=require("./NcLoadingIcon.cjs"),c=require("./NcButton.cjs"),d=require("./NcEmptyContent.cjs"),u=require("../Directives/Focus.cjs"),p=require("../Directives/Linkify.cjs");require("../Directives/Tooltip.cjs");const i=require("../chunks/l10n-46d0c1c0.cjs"),b=require("vue-material-design-icons/ArrowRight.vue"),h=require("vue-material-design-icons/Close.vue"),m=require("vue-material-design-icons/Star.vue"),f=require("vue-material-design-icons/StarOutline.vue"),y=require("@vueuse/components"),v=require("floating-vue");const g={name:"NcAppSidebarTabs",components:{NcCheckboxRadioSwitch:n,NcVNodes:r},provide(){return{registerTab:this.registerTab,unregisterTab:this.unregisterTab,getActiveTab:()=>this.activeTab}},props:{active:{type:String,default:""}},emits:["update:active"],data(){return{tabs:[],activeTab:""}},computed:{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:{setActive(e){this.activeTab=e,this.$emit("update:active",this.activeTab)},focusPreviousTab(){this.currentTabIndex>0&&this.setActive(this.tabs[this.currentTabIndex-1].id),this.focusActiveTab()},focusNextTab(){this.currentTabIndex<this.tabs.length-1&&this.setActive(this.tabs[this.currentTabIndex+1].id),this.focusActiveTab()},focusFirstTab(){this.setActive(this.tabs[0].id),this.focusActiveTab()},focusLastTab(){this.setActive(this.tabs[this.tabs.length-1].id),this.focusActiveTab()},focusActiveTab(){this.$el.querySelector(`[data-id="${this.activeTab}"]`).focus()},focusActiveTabContent(){this.$el.querySelector("#tab-"+this.activeTab).focus()},updateActive(){this.activeTab=this.active&&this.tabs.some(e=>e.id===this.active)?this.active:this.tabs.length>0?this.tabs[0].id:""},registerTab(e){this.tabs.push(e),this.tabs.sort((a,t)=>a.order===t.order?OC.Util.naturalSortCompare(a.name,t.name):a.order-t.order),this.updateActive()},unregisterTab(e){const a=this.tabs.findIndex(t=>t.id===e);a!==-1&&this.tabs.splice(a,1),this.activeTab===e&&this.updateActive()}}};var _=function(){var e=this,a=e._self._c;return a("div",{staticClass:"app-sidebar-tabs"},[e.hasMultipleTabs?a("div",{staticClass:"app-sidebar-tabs__nav",attrs:{role:"tablist"},on:{keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])||"button"in t&&t.button!==0||t.ctrlKey||t.shiftKey||t.altKey||t.metaKey?null:(t.preventDefault(),t.stopPropagation(),e.focusPreviousTab.apply(null,arguments))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"right",39,t.key,["Right","ArrowRight"])||"button"in t&&t.button!==2||t.ctrlKey||t.shiftKey||t.altKey||t.metaKey?null:(t.preventDefault(),t.stopPropagation(),e.focusNextTab.apply(null,arguments))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"tab",9,t.key,"Tab")||t.ctrlKey||t.shiftKey||t.altKey||t.metaKey?null:(t.preventDefault(),t.stopPropagation(),e.focusActiveTabContent.apply(null,arguments))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"home",void 0,t.key,void 0)||t.ctrlKey||t.shiftKey||t.altKey||t.metaKey?null:(t.preventDefault(),t.stopPropagation(),e.focusFirstTab.apply(null,arguments))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"end",void 0,t.key,void 0)||t.ctrlKey||t.shiftKey||t.altKey||t.metaKey?null:(t.preventDefault(),t.stopPropagation(),e.focusLastTab.apply(null,arguments))},function(t){return!t.type.indexOf("key")&&t.keyCode!==33||t.ctrlKey||t.shiftKey||t.altKey||t.metaKey?null:(t.preventDefault(),t.stopPropagation(),e.focusFirstTab.apply(null,arguments))},function(t){return!t.type.indexOf("key")&&t.keyCode!==34||t.ctrlKey||t.shiftKey||t.altKey||t.metaKey?null:(t.preventDefault(),t.stopPropagation(),e.focusLastTab.apply(null,arguments))}]}},e._l(e.tabs,function(t){return a("NcCheckboxRadioSwitch",{key:t.id,staticClass:"app-sidebar-tabs__tab",class:{active:t.id===e.activeTab},attrs:{"aria-controls":`tab-${t.id}`,"aria-selected":e.activeTab===t.id,"button-variant":!0,checked:e.activeTab===t.id,"data-id":t.id,tabindex:e.activeTab===t.id?0:-1,"button-variant-grouped":"horizontal",role:"tab",type:"button"},on:{"update:checked":function(K){return e.setActive(t.id)}},scopedSlots:e._u([{key:"icon",fn:function(){return[a("NcVNodes",{attrs:{vnodes:t.renderIcon()}},[a("span",{staticClass:"app-sidebar-tabs__tab-icon",class:t.icon})])]},proxy:!0}],null,!0)},[a("span",{staticClass:"app-sidebar-tabs__tab-caption"},[e._v(" "+e._s(t.name)+" ")])])}),1):e._e(),a("div",{staticClass:"app-sidebar-tabs__content",class:{"app-sidebar-tabs__content--multiple":e.hasMultipleTabs}},[e._t("default")],2)])},k=[],T=s.normalizeComponent(g,_,k,!1,null,"b4df3f5e",null,null);const C=T.exports;const S={name:"NcAppSidebar",components:{NcActions:o,NcAppSidebarTabs:C,ArrowRight:b,NcButton:c,NcLoadingIcon:l,NcEmptyContent:d,Close:h,Star:m,StarOutline:f},directives:{focus:u.directive,linkify:p.directive,ClickOutside:y.vOnClickOutside,Tooltip:v.VTooltip},props:{active:{type:String,default:""},name:{type:String,default:"",required:!0},nameEditable:{type:Boolean,default:!1},namePlaceholder:{type:String,default:""},subname:{type:String,default:""},subtitle:{type:String,default:""},background:{type:String,default:""},starred:{type:Boolean,default:null},starLoading:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},compact:{type:Boolean,default:!1},empty:{type:Boolean,default:!1},forceMenu:{type:Boolean,default:!1},linkifyName:{type:Boolean,default:!1},title:{type:String,default:""}},emits:["close","closing","closed","opening","opened","figure-click","update:starred","update:nameEditable","update:name","update:active","submit-name","dismiss-editing"],data(){return{changeNameTranslated:i.t("Change name"),closeTranslated:i.t("Close sidebar"),favoriteTranslated:i.t("Favorite"),isStarred:this.starred}},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}},beforeDestroy(){this.$emit("closed")},methods:{onBeforeEnter(e){this.$emit("opening",e)},onAfterEnter(e){this.$emit("opened",e)},onBeforeLeave(e){this.$emit("closing",e)},onAfterLeave(e){this.$emit("closed",e)},closeSidebar(e){this.$emit("close",e)},onFigureClick(e){this.$emit("figure-click",e)},toggleStarred(){this.isStarred=!this.isStarred,this.$emit("update:starred",this.isStarred)},editName(){this.$emit("update:nameEditable",!0),this.nameEditable&&this.$nextTick(()=>this.$refs.nameInput.focus())},onNameInput(e){this.$emit("update:name",e.target.value)},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)}}};var N=function(){var e=this,a=e._self._c;return a("transition",{attrs:{appear:"",name:"slide-right"},on:{"before-enter":e.onBeforeEnter,"after-enter":e.onAfterEnter,"before-leave":e.onBeforeLeave,"after-leave":e.onAfterLeave}},[a("aside",{staticClass:"app-sidebar",attrs:{id:"app-sidebar-vue"}},[a("header",{staticClass:"app-sidebar-header",class:{"app-sidebar-header--with-figure":e.hasFigure,"app-sidebar-header--compact":e.compact}},[a("div",{staticClass:"app-sidebar-header__info"},[e.hasFigure&&!e.empty?a("div",{staticClass:"app-sidebar-header__figure",class:{"app-sidebar-header__figure--with-action":e.hasFigureClickListener},style:{backgroundImage:`url(${e.background})`},attrs:{tabindex:"0"},on:{click:e.onFigureClick,keydown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.onFigureClick.apply(null,arguments)}}},[e._t("header")],2):e._e(),e.empty?e._e():a("div",{staticClass:"app-sidebar-header__desc",class:{"app-sidebar-header__desc--with-tertiary-action":e.canStar||e.$slots["tertiary-actions"],"app-sidebar-header__desc--editable":e.nameEditable&&!e.subname,"app-sidebar-header__desc--with-subname--editable":e.nameEditable&&e.subname,"app-sidebar-header__desc--without-actions":!e.$slots["secondary-actions"]}},[e.canStar||e.$slots["tertiary-actions"]?a("div",{staticClass:"app-sidebar-header__tertiary-actions"},[e._t("tertiary-actions",function(){return[e.canStar?a("NcButton",{staticClass:"app-sidebar-header__star",attrs:{"aria-label":e.favoriteTranslated,pressed:e.isStarred,type:"secondary"},on:{click:function(t){return t.preventDefault(),e.toggleStarred.apply(null,arguments)}},scopedSlots:e._u([{key:"icon",fn:function(){return[e.starLoading?a("NcLoadingIcon"):e.isStarred?a("Star",{attrs:{size:20}}):a("StarOutline",{attrs:{size:20}})]},proxy:!0}],null,!1,2575459756)}):e._e()]})],2):e._e(),a("div",{staticClass:"app-sidebar-header__name-container"},[a("div",{staticClass:"app-sidebar-header__mainname-container"},[a("h2",{directives:[{name:"show",rawName:"v-show",value:!e.nameEditable,expression:"!nameEditable"},{name:"linkify",rawName:"v-linkify",value:{text:e.name,linkify:e.linkifyName},expression:"{text: name, linkify: linkifyName}"}],staticClass:"app-sidebar-header__mainname",attrs:{"aria-label":e.title,title:e.title,tabindex:e.nameEditable?0:void 0},on:{click:function(t){return t.target!==t.currentTarget?null:e.editName.apply(null,arguments)}}},[e._v(" "+e._s(e.name)+" ")]),e.nameEditable?[a("form",{directives:[{name:"click-outside",rawName:"v-click-outside",value:()=>e.onSubmitName(),expression:"() => onSubmitName()"}],staticClass:"app-sidebar-header__mainname-form",on:{submit:function(t){return t.preventDefault(),e.onSubmitName.apply(null,arguments)}}},[a("input",{directives:[{name:"focus",rawName:"v-focus"}],ref:"nameInput",staticClass:"app-sidebar-header__mainname-input",attrs:{type:"text",placeholder:e.namePlaceholder},domProps:{value:e.name},on:{keydown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.onDismissEditing.apply(null,arguments))},input:e.onNameInput}}),a("NcButton",{attrs:{type:"tertiary-no-background","aria-label":e.changeNameTranslated,"native-type":"submit"},scopedSlots:e._u([{key:"icon",fn:function(){return[a("ArrowRight",{attrs:{size:20}})]},proxy:!0}],null,!1,1252225425)})],1)]:e._e(),e.$slots["secondary-actions"]?a("NcActions",{staticClass:"app-sidebar-header__menu",attrs:{"force-menu":e.forceMenu}},[e._t("secondary-actions")],2):e._e()],2),e.subname.trim()!==""?a("p",{staticClass:"app-sidebar-header__subname",attrs:{"aria-label":e.subtitle,title:e.subtitle}},[e._v(" "+e._s(e.subname)+" ")]):e._e()])])]),a("NcButton",{staticClass:"app-sidebar__close",attrs:{title:e.closeTranslated,"aria-label":e.closeTranslated,type:"tertiary"},on:{click:function(t){return t.preventDefault(),e.closeSidebar.apply(null,arguments)}},scopedSlots:e._u([{key:"icon",fn:function(){return[a("Close",{attrs:{size:20}})]},proxy:!0}])}),e.$slots.description&&!e.empty?a("div",{staticClass:"app-sidebar-header__description"},[e._t("description")],2):e._e()],1),a("NcAppSidebarTabs",{directives:[{name:"show",rawName:"v-show",value:!e.loading,expression:"!loading"}],ref:"tabs",attrs:{active:e.active},on:{"update:active":e.onUpdateActive}},[e._t("default")],2),e.loading?a("NcEmptyContent",{scopedSlots:e._u([{key:"icon",fn:function(){return[a("NcLoadingIcon",{attrs:{size:64}})]},proxy:!0}],null,!1,826850984)}):e._e()],1)])},x=[],A=s.normalizeComponent(S,N,x,!1,null,"90858b97",null,null);const $=A.exports;module.exports=$;
+var D = require("../assets/index-fbdeb5ab.css");
+const o = require("./NcVNodes.cjs"), l = require("./NcCheckboxRadioSwitch.cjs"), n = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), u = require("./NcActions.cjs"), c = require("./NcLoadingIcon.cjs"), d = require("./NcButton.cjs"), p = require("./NcEmptyContent.cjs"), f = require("../Directives/Focus.cjs"), b = require("../Directives/Linkify.cjs");
+require("../Directives/Tooltip.cjs");
+const r = require("../chunks/l10n-903083c4.cjs"), m = require("vue-material-design-icons/ArrowRight.vue"), h = require("vue-material-design-icons/Close.vue"), _ = require("vue-material-design-icons/Star.vue"), y = require("vue-material-design-icons/StarOutline.vue"), g = require("@vueuse/components"), k = require("floating-vue"), s = (i) => i && i.__esModule ? i : { default: i }, v = /* @__PURE__ */ s(m), C = /* @__PURE__ */ s(h), T = /* @__PURE__ */ s(_), S = /* @__PURE__ */ s(y);
+const N = {
+  name: "NcAppSidebarTabs",
+  components: {
+    NcCheckboxRadioSwitch: l,
+    NcVNodes: o
+  },
+  provide() {
+    return {
+      registerTab: this.registerTab,
+      unregisterTab: this.unregisterTab,
+      // Getter as an alternative to Vue 2.7 computed(() => this.activeTab)
+      getActiveTab: () => this.activeTab
+    };
+  },
+  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 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;
+    },
+    currentTabIndex() {
+      return this.tabs.findIndex((i) => i.id === this.activeTab);
+    }
+  },
+  watch: {
+    active(i) {
+      i !== this.activeTab && this.updateActive();
+    }
+  },
+  methods: {
+    /**
+     * Set the current active tab
+     *
+     * @param {string} id the id of the tab
+     */
+    setActive(i) {
+      this.activeTab = i, 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(`[data-id="${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((i) => i.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(i) {
+      this.tabs.push(i), this.tabs.sort((e, a) => e.order === a.order ? OC.Util.naturalSortCompare(e.name, a.name) : e.order - a.order), this.updateActive();
+    },
+    /**
+     * Unregister child tab from the tabs
+     *
+     * @param {string} id tab's id
+     */
+    unregisterTab(i) {
+      const e = this.tabs.findIndex((a) => a.id === i);
+      e !== -1 && this.tabs.splice(e, 1), this.activeTab === i && this.updateActive();
+    }
+  }
+};
+var x = function() {
+  var e = this, a = e._self._c;
+  return a("div", { staticClass: "app-sidebar-tabs" }, [e.hasMultipleTabs ? a("div", { staticClass: "app-sidebar-tabs__nav", attrs: { role: "tablist" }, on: { keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "left", 37, t.key, ["Left", "ArrowLeft"]) || "button" in t && t.button !== 0 || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusPreviousTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "right", 39, t.key, ["Right", "ArrowRight"]) || "button" in t && t.button !== 2 || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusNextTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "tab", 9, t.key, "Tab") || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusActiveTabContent.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "home", void 0, t.key, void 0) || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusFirstTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "end", void 0, t.key, void 0) || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusLastTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && t.keyCode !== 33 || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusFirstTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && t.keyCode !== 34 || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusLastTab.apply(null, arguments));
+  }] } }, e._l(e.tabs, function(t) {
+    return a("NcCheckboxRadioSwitch", { key: t.id, staticClass: "app-sidebar-tabs__tab", class: { active: t.id === e.activeTab }, attrs: { "aria-controls": `tab-${t.id}`, "aria-selected": e.activeTab === t.id, "button-variant": !0, checked: e.activeTab === t.id, "data-id": t.id, tabindex: e.activeTab === t.id ? 0 : -1, "button-variant-grouped": "horizontal", role: "tab", type: "button" }, on: { "update:checked": function(O) {
+      return e.setActive(t.id);
+    } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [a("NcVNodes", { attrs: { vnodes: t.renderIcon() } }, [a("span", { staticClass: "app-sidebar-tabs__tab-icon", class: t.icon })])];
+    }, proxy: !0 }], null, !0) }, [a("span", { staticClass: "app-sidebar-tabs__tab-caption" }, [e._v(" " + e._s(t.name) + " ")])]);
+  }), 1) : e._e(), a("div", { staticClass: "app-sidebar-tabs__content", class: { "app-sidebar-tabs__content--multiple": e.hasMultipleTabs } }, [e._t("default")], 2)]);
+}, A = [], w = /* @__PURE__ */ n.normalizeComponent(
+  N,
+  x,
+  A,
+  !1,
+  null,
+  "b4df3f5e",
+  null,
+  null
+);
+const K = w.exports;
+const E = {
+  name: "NcAppSidebar",
+  components: {
+    NcActions: u,
+    NcAppSidebarTabs: K,
+    ArrowRight: v.default,
+    NcButton: d,
+    NcLoadingIcon: c,
+    NcEmptyContent: p,
+    Close: C.default,
+    Star: T.default,
+    StarOutline: S.default
+  },
+  directives: {
+    focus: f.directive,
+    linkify: b.directive,
+    ClickOutside: g.vOnClickOutside,
+    Tooltip: k.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",
+    "update:starred",
+    "update:nameEditable",
+    "update:name",
+    "update:active",
+    "submit-name",
+    "dismiss-editing"
+  ],
+  data() {
+    return {
+      changeNameTranslated: r.t("Change name"),
+      closeTranslated: r.t("Close sidebar"),
+      favoriteTranslated: r.t("Favorite"),
+      isStarred: this.starred
+    };
+  },
+  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;
+    }
+  },
+  beforeDestroy() {
+    this.$emit("closed");
+  },
+  methods: {
+    onBeforeEnter(i) {
+      this.$emit("opening", i);
+    },
+    onAfterEnter(i) {
+      this.$emit("opened", i);
+    },
+    onBeforeLeave(i) {
+      this.$emit("closing", i);
+    },
+    onAfterLeave(i) {
+      this.$emit("closed", i);
+    },
+    /**
+     * Used to tell parent component the user asked to close the sidebar
+     *
+     * @param {Event} e close icon click event
+     */
+    closeSidebar(i) {
+      this.$emit("close", i);
+    },
+    /**
+     * Emit figure click event to parent component
+     *
+     * @param {Event} e click event
+     */
+    onFigureClick(i) {
+      this.$emit("figure-click", i);
+    },
+    /**
+     * 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", !0), this.nameEditable && this.$nextTick(
+        () => this.$refs.nameInput.focus()
+      );
+    },
+    /**
+     * Emit name change event to parent component
+     *
+     * @param {Event} event input event
+     */
+    onNameInput(i) {
+      this.$emit("update:name", i.target.value);
+    },
+    /**
+     * Emit when the name form edit confirm button is pressed in order
+     * to change the name.
+     *
+     * @param {Event} event submit event
+     */
+    onSubmitName(i) {
+      this.$emit("update:nameEditable", !1), this.$emit("submit-name", i);
+    },
+    onDismissEditing() {
+      this.$emit("update:nameEditable", !1), this.$emit("dismiss-editing");
+    },
+    onUpdateActive(i) {
+      this.$emit("update:active", i);
+    }
+  }
+};
+var q = function() {
+  var e = this, a = e._self._c;
+  return a("transition", { attrs: { appear: "", name: "slide-right" }, on: { "before-enter": e.onBeforeEnter, "after-enter": e.onAfterEnter, "before-leave": e.onBeforeLeave, "after-leave": e.onAfterLeave } }, [a("aside", { staticClass: "app-sidebar", attrs: { id: "app-sidebar-vue" } }, [a("header", { staticClass: "app-sidebar-header", class: {
+    "app-sidebar-header--with-figure": e.hasFigure,
+    "app-sidebar-header--compact": e.compact
+  } }, [a("div", { staticClass: "app-sidebar-header__info" }, [e.hasFigure && !e.empty ? a("div", { staticClass: "app-sidebar-header__figure", class: {
+    "app-sidebar-header__figure--with-action": e.hasFigureClickListener
+  }, style: {
+    backgroundImage: `url(${e.background})`
+  }, attrs: { tabindex: "0" }, on: { click: e.onFigureClick, keydown: function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") ? null : e.onFigureClick.apply(null, arguments);
+  } } }, [e._t("header")], 2) : e._e(), e.empty ? e._e() : a("div", { staticClass: "app-sidebar-header__desc", class: {
+    "app-sidebar-header__desc--with-tertiary-action": e.canStar || e.$slots["tertiary-actions"],
+    "app-sidebar-header__desc--editable": e.nameEditable && !e.subname,
+    "app-sidebar-header__desc--with-subname--editable": e.nameEditable && e.subname,
+    "app-sidebar-header__desc--without-actions": !e.$slots["secondary-actions"]
+  } }, [e.canStar || e.$slots["tertiary-actions"] ? a("div", { staticClass: "app-sidebar-header__tertiary-actions" }, [e._t("tertiary-actions", function() {
+    return [e.canStar ? a("NcButton", { staticClass: "app-sidebar-header__star", attrs: { "aria-label": e.favoriteTranslated, pressed: e.isStarred, type: "secondary" }, on: { click: function(t) {
+      return t.preventDefault(), e.toggleStarred.apply(null, arguments);
+    } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [e.starLoading ? a("NcLoadingIcon") : e.isStarred ? a("Star", { attrs: { size: 20 } }) : a("StarOutline", { attrs: { size: 20 } })];
+    }, proxy: !0 }], null, !1, 2575459756) }) : e._e()];
+  })], 2) : e._e(), a("div", { staticClass: "app-sidebar-header__name-container" }, [a("div", { staticClass: "app-sidebar-header__mainname-container" }, [a("h2", { directives: [{ name: "show", rawName: "v-show", value: !e.nameEditable, expression: "!nameEditable" }, { name: "linkify", rawName: "v-linkify", value: { text: e.name, linkify: e.linkifyName }, expression: "{text: name, linkify: linkifyName}" }], staticClass: "app-sidebar-header__mainname", attrs: { "aria-label": e.title, title: e.title, tabindex: e.nameEditable ? 0 : void 0 }, on: { click: function(t) {
+    return t.target !== t.currentTarget ? null : e.editName.apply(null, arguments);
+  } } }, [e._v(" " + e._s(e.name) + " ")]), e.nameEditable ? [a("form", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: () => e.onSubmitName(), expression: "() => onSubmitName()" }], staticClass: "app-sidebar-header__mainname-form", on: { submit: function(t) {
+    return t.preventDefault(), e.onSubmitName.apply(null, arguments);
+  } } }, [a("input", { directives: [{ name: "focus", rawName: "v-focus" }], ref: "nameInput", staticClass: "app-sidebar-header__mainname-input", attrs: { type: "text", placeholder: e.namePlaceholder }, domProps: { value: e.name }, on: { keydown: function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : (t.stopPropagation(), e.onDismissEditing.apply(null, arguments));
+  }, input: e.onNameInput } }), a("NcButton", { attrs: { type: "tertiary-no-background", "aria-label": e.changeNameTranslated, "native-type": "submit" }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [a("ArrowRight", { attrs: { size: 20 } })];
+  }, proxy: !0 }], null, !1, 1252225425) })], 1)] : e._e(), e.$slots["secondary-actions"] ? a("NcActions", { staticClass: "app-sidebar-header__menu", attrs: { "force-menu": e.forceMenu } }, [e._t("secondary-actions")], 2) : e._e()], 2), e.subname.trim() !== "" ? a("p", { staticClass: "app-sidebar-header__subname", attrs: { "aria-label": e.subtitle, title: e.subtitle } }, [e._v(" " + e._s(e.subname) + " ")]) : e._e()])])]), a("NcButton", { staticClass: "app-sidebar__close", attrs: { title: e.closeTranslated, "aria-label": e.closeTranslated, type: "tertiary" }, on: { click: function(t) {
+    return t.preventDefault(), e.closeSidebar.apply(null, arguments);
+  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [a("Close", { attrs: { size: 20 } })];
+  }, proxy: !0 }]) }), e.$slots.description && !e.empty ? a("div", { staticClass: "app-sidebar-header__description" }, [e._t("description")], 2) : e._e()], 1), a("NcAppSidebarTabs", { directives: [{ name: "show", rawName: "v-show", value: !e.loading, expression: "!loading" }], ref: "tabs", attrs: { active: e.active }, on: { "update:active": e.onUpdateActive } }, [e._t("default")], 2), e.loading ? a("NcEmptyContent", { scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [a("NcLoadingIcon", { attrs: { size: 64 } })];
+  }, proxy: !0 }], null, !1, 826850984) }) : e._e()], 1)]);
+}, I = [], L = /* @__PURE__ */ n.normalizeComponent(
+  E,
+  q,
+  I,
+  !1,
+  null,
+  "90858b97",
+  null,
+  null
+);
+const B = L.exports;
+module.exports = B;

package/dist/Components/NcAppSidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSidebar.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcAppSidebar.cjs","sources":["../../src/components/NcAppSidebar/NcAppSidebarTabs.vue","../../src/components/NcAppSidebar/NcAppSidebar.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  - @copyright Copyright (c) 2020 Simon Belbeoch <simon.belbeoch@gmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<!-- Follows the tab aria guidelines\n\thttps://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->\n<template>\n\t<div class=\"app-sidebar-tabs\">\n\t\t<!-- tabs navigation -->\n\t\t<!-- 33 and 34 code is for page up and page down -->\n\t\t<div v-if=\"hasMultipleTabs\"\n\t\t\trole=\"tablist\"\n\t\t\tclass=\"app-sidebar-tabs__nav\"\n\t\t\t@keydown.left.exact.prevent.stop=\"focusPreviousTab\"\n\t\t\t@keydown.right.exact.prevent.stop=\"focusNextTab\"\n\t\t\t@keydown.tab.exact.prevent.stop=\"focusActiveTabContent\"\n\t\t\t@keydown.home.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.end.exact.prevent.stop=\"focusLastTab\"\n\t\t\t@keydown.33.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.34.exact.prevent.stop=\"focusLastTab\">\n\t\t\t<NcCheckboxRadioSwitch v-for=\"tab in tabs\"\n\t\t\t\t:key=\"tab.id\"\n\t\t\t\t:aria-controls=\"`tab-${tab.id}`\"\n\t\t\t\t:aria-selected=\"activeTab === tab.id\"\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked=\"activeTab === tab.id\"\n\t\t\t\t:data-id=\"tab.id\"\n\t\t\t\t:tabindex=\"activeTab === tab.id ? 0 : -1\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\"\n\t\t\t\tclass=\"app-sidebar-tabs__tab\"\n\t\t\t\t:class=\"{ active: tab.id === activeTab }\"\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t@update:checked=\"setActive(tab.id)\">\n\t\t\t\t<span class=\"app-sidebar-tabs__tab-caption\">\n\t\t\t\t\t{{ tab.name }}\n\t\t\t\t</span>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcVNodes :vnodes=\"tab.renderIcon()\">\n\t\t\t\t\t\t<span class=\"app-sidebar-tabs__tab-icon\" :class=\"tab.icon\" />\n\t\t\t\t\t</NcVNodes>\n\t\t\t\t</template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\n\t\t<!-- tabs content -->\n\t\t<div :class=\"{'app-sidebar-tabs__content--multiple': hasMultipleTabs}\"\n\t\t\tclass=\"app-sidebar-tabs__content\">\n\t\t\t<!-- @slot Tabs content - NcAppSidebarTab components or any content if there is no tabs -->\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport NcVNodes from '../NcVNodes/index.js'\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'\n\nexport default {\n\tname: 'NcAppSidebarTabs',\n\n\tcomponents: {\n\t\tNcCheckboxRadioSwitch,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterTab: this.registerTab,\n\t\t\tunregisterTab: this.unregisterTab,\n\t\t\t// Getter as an alternative to Vue 2.7 computed(() => this.activeTab)\n\t\t\tgetActiveTab: () => this.activeTab,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Id of the tab to activate\n\t\t */\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['update:active'],\n\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.\n\t\t\t */\n\t\t\ttabs: [],\n\t\t\t/**\n\t\t\t * Local active (open) tab's ID. It allows to use component without active.sync\n\t\t\t */\n\t\t\tactiveTab: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Has multiple tabs. If only one tab - its content is shown without navigation\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\thasMultipleTabs() {\n\t\t\treturn this.tabs.length > 1\n\t\t},\n\n\t\tcurrentTabIndex() {\n\t\t\treturn this.tabs.findIndex((tab) => tab.id === this.activeTab)\n\t\t},\n\t},\n\n\twatch: {\n\t\tactive(active) {\n\t\t\t// Prevent running it twice\n\t\t\tif (active !== this.activeTab) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\n\t\t/**\n\t\t * Set the current active tab\n\t\t *\n\t\t * @param {string} id the id of the tab\n\t\t */\n\t\tsetActive(id) {\n\t\t\tthis.activeTab = id\n\t\t\t/**\n\t\t\t * @property {string} active - active tab's id\n\t\t\t */\n\t\t\tthis.$emit('update:active', this.activeTab)\n\t\t},\n\n\t\t/**\n\t\t * Focus the previous tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusPreviousTab() {\n\t\t\tif (this.currentTabIndex > 0) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex - 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the next tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusNextTab() {\n\t\t\tif (this.currentTabIndex < this.tabs.length - 1) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex + 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the first tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusFirstTab() {\n\t\t\tthis.setActive(this.tabs[0].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the last tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusLastTab() {\n\t\t\tthis.setActive(this.tabs[this.tabs.length - 1].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the current active tab\n\t\t */\n\t\tfocusActiveTab() {\n\t\t\tthis.$el.querySelector(`[data-id=\"${this.activeTab}\"]`).focus()\n\t\t},\n\n\t\t/**\n\t\t * Focus the content on tab\n\t\t * see aria accessibility guidelines\n\t\t */\n\t\tfocusActiveTabContent() {\n\t\t\tthis.$el.querySelector('#tab-' + this.activeTab).focus()\n\t\t},\n\n\t\t/**\n\t\t * Update the current active tab\n\t\t */\n\t\tupdateActive() {\n\t\t\tthis.activeTab = this.active\n\t\t\t&& this.tabs.some(tab => tab.id === this.active)\n\t\t\t\t? this.active\n\t\t\t\t: this.tabs.length > 0\n\t\t\t\t\t? this.tabs[0].id\n\t\t\t\t\t: ''\n\t\t},\n\n\t\t/**\n\t\t * Register child tab in the tabs\n\t\t *\n\t\t * @param {object} tab child tab passed to slot\n\t\t */\n\t\tregisterTab(tab) {\n\t\t\tthis.tabs.push(tab)\n\t\t\tthis.tabs.sort((a, b) => {\n\t\t\t\tif (a.order === b.order) {\n\t\t\t\t\treturn OC.Util.naturalSortCompare(a.name, b.name)\n\t\t\t\t}\n\t\t\t\treturn a.order - b.order\n\t\t\t})\n\t\t\tthis.updateActive()\n\t\t},\n\n\t\t/**\n\t\t * Unregister child tab from the tabs\n\t\t *\n\t\t * @param {string} id tab's id\n\t\t */\n\t\tunregisterTab(id) {\n\t\t\tconst tabIndex = this.tabs.findIndex((tab) => tab.id === id)\n\t\t\tif (tabIndex !== -1) {\n\t\t\t\tthis.tabs.splice(tabIndex, 1)\n\t\t\t}\n\t\t\tif (this.activeTab === id) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.app-sidebar-tabs {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 0;\n\tflex: 1 1 100%;\n\n\t&__nav {\n\t\tdisplay: flex;\n\t\tjustify-content: stretch;\n\t\tmargin-top: 10px;\n\t\tpadding: 0 4px;\n\t}\n\n\t&__tab {\n\t\tflex: 1 1;\n\t\t&.active {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t&-caption {\n\t\t\tflex: 0 1 100%;\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbackground-size: 20px;\n\t\t}\n\n\t\t// Override max-width to use all available space\n\t\t:deep(.checkbox-radio-switch__label) {\n\t\t\tmax-width: unset;\n\t\t}\n\t}\n\n\t&__content {\n\t\tposition: relative;\n\t\t// take full available height\n\t\tmin-height: 0;\n\t\theight: 100%;\n\t\t// force the use of the tab component if more than one tab\n\t\t// you can just put raw content if you don't use tabs\n\t\t&--multiple > :not(section) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n:deep(.checkbox-radio-switch--button-variant.checkbox-radio-switch) {\n\tborder: unset;\n}\n</style>\n","<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n### General description\n\nThis component provides a way to include the standardised sidebar.\nThe standard properties like name, subname, starred, etc. allow to automatically\ninclude a standard-header like it's used by the files app.\n\n### Standard usage\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:starred=\"starred\"\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\n\timport Magnify from 'vue-material-design-icons/Magnify'\n\timport Cog from 'vue-material-design-icons/Cog'\n\timport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t\tCog,\n\t\t\tShareVariant,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tstarred: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### One tab\n\nSingle tab is rendered without navigation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Cog from 'vue-material-design-icons/Cog'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n}\n</script>\n```\n\n### Dynamic tabs\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[0]\">Show search tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[1]\">Show settings tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[2]\">Show sharing tab</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[0]\" name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[1]\" name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[2]\" name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowTabs: [true, true, false],\n\t\t}\n\t},\n}\n</script>\n```\n\n### Custom order\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\" :order=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\" :order=\"2\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\" :order=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n}\n</script>\n```\n\n### Activating tab programmatically\n\n```vue\n<template>\n\t<div>\n\t\t<NcSelect v-model=\"active\" :options=\"['search-tab', 'settings-tab', 'share-tab']\" />\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t:active.sync=\"active\">\n\t\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tactive: 'search-tab',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Editable name\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name.sync=\"name\"\n\t\t:name-editable=\"true\"\n\t\tname-placeholder=\"Filename\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<!-- Insert your slots and tabs here -->\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Editable name after click with custom tertiary action\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name=\"name\"\n\t\t:name-editable.sync=\"nameEditable\"\n\t\t:name-placeholder=\"namePlaceholder\"\n\t\t:subname=\"subname\"\n\t\t@update:name=\"nameUpdate\">\n\t\t<template #tertiary-actions>\n\t\t\t<form>\n\t\t\t\t<input type=\"checkbox\" @click=\"toggledCheckbox\"/>\n\t\t\t</form>\n\t\t</template>\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t\tnamePlaceholder: 'Filename',\n\t\t\t\tsubname: 'last edited 3 weeks ago',\n\t\t\t\tnameEditable: false\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tnameUpdate(e) {\n\t\t\t\tthis.name = e\n\t\t\t},\n\t\t\ttoggledCheckbox() {\n\t\t\t\talert('toggle')\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Empty sidebar for e.g. empty content component.\n\n```vue\n\t<template>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:empty=\"true\">\n\t\t\t<NcEmptyContent name=\"Content not found.\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport Magnify from 'vue-material-design-icons/Magnify'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<transition appear\n\t\tname=\"slide-right\"\n\t\t@before-enter=\"onBeforeEnter\"\n\t\t@after-enter=\"onAfterEnter\"\n\t\t@before-leave=\"onBeforeLeave\"\n\t\t@after-leave=\"onAfterLeave\">\n\t\t<aside id=\"app-sidebar-vue\" class=\"app-sidebar\">\n\t\t\t<header :class=\"{\n\t\t\t\t\t'app-sidebar-header--with-figure': hasFigure,\n\t\t\t\t\t'app-sidebar-header--compact': compact,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-sidebar-header\">\n\t\t\t\t<!-- container for figure and description, allows easy switching to compact mode -->\n\t\t\t\t<div class=\"app-sidebar-header__info\">\n\t\t\t\t\t<!-- sidebar header illustration/figure -->\n\t\t\t\t\t<div v-if=\"hasFigure && !empty\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'app-sidebar-header__figure--with-action': hasFigureClickListener\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\tclass=\"app-sidebar-header__figure\"\n\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\tbackgroundImage: `url(${background})`\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"onFigureClick\"\n\t\t\t\t\t\t@keydown.enter=\"onFigureClick\">\n\t\t\t\t\t\t<slot class=\"app-sidebar-header__background\" name=\"header\" />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- sidebar details -->\n\t\t\t\t\t<div v-if=\"!empty\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],\n\t\t\t\t\t\t\t'app-sidebar-header__desc--editable': nameEditable && !subname,\n\t\t\t\t\t\t\t'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,\n\t\t\t\t\t\t\t'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\tclass=\"app-sidebar-header__desc\">\n\t\t\t\t\t\t<!-- favourite icon -->\n\t\t\t\t\t\t<div v-if=\"canStar || $slots['tertiary-actions']\" class=\"app-sidebar-header__tertiary-actions\">\n\t\t\t\t\t\t\t<slot name=\"tertiary-actions\">\n\t\t\t\t\t\t\t\t<NcButton v-if=\"canStar\"\n\t\t\t\t\t\t\t\t\t:aria-label=\"favoriteTranslated\"\n\t\t\t\t\t\t\t\t\t:pressed=\"isStarred\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__star\"\n\t\t\t\t\t\t\t\t\ttype=\"secondary\"\n\t\t\t\t\t\t\t\t\t@click.prevent=\"toggleStarred\">\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"starLoading\" />\n\t\t\t\t\t\t\t\t\t\t<Star v-else-if=\"isStarred\" :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t<StarOutline v-else :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- name -->\n\t\t\t\t\t\t<div class=\"app-sidebar-header__name-container\">\n\t\t\t\t\t\t\t<div class=\"app-sidebar-header__mainname-container\">\n\t\t\t\t\t\t\t\t<!-- main name -->\n\t\t\t\t\t\t\t\t<h2 v-show=\"!nameEditable\"\n\t\t\t\t\t\t\t\t\tv-linkify=\"{text: name, linkify: linkifyName}\"\n\t\t\t\t\t\t\t\t\t:aria-label=\"title\"\n\t\t\t\t\t\t\t\t\t:title=\"title\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname\"\n\t\t\t\t\t\t\t\t\t:tabindex=\"nameEditable ? 0 : undefined\"\n\t\t\t\t\t\t\t\t\t@click.self=\"editName\">\n\t\t\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t<template v-if=\"nameEditable\">\n\t\t\t\t\t\t\t\t\t<form v-click-outside=\"() => onSubmitName()\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-form\"\n\t\t\t\t\t\t\t\t\t\t@submit.prevent=\"onSubmitName\">\n\t\t\t\t\t\t\t\t\t\t<input ref=\"nameInput\"\n\t\t\t\t\t\t\t\t\t\t\tv-focus\n\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-input\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t:placeholder=\"namePlaceholder\"\n\t\t\t\t\t\t\t\t\t\t\t:value=\"name\"\n\t\t\t\t\t\t\t\t\t\t\t@keydown.esc.stop=\"onDismissEditing\"\n\t\t\t\t\t\t\t\t\t\t\t@input=\"onNameInput\">\n\t\t\t\t\t\t\t\t\t\t<NcButton type=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t\t\t\t:aria-label=\"changeNameTranslated\"\n\t\t\t\t\t\t\t\t\t\t\tnative-type=\"submit\">\n\t\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t<!-- header main menu -->\n\t\t\t\t\t\t\t\t<NcActions v-if=\"$slots['secondary-actions']\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__menu\"\n\t\t\t\t\t\t\t\t\t:force-menu=\"forceMenu\">\n\t\t\t\t\t\t\t\t\t<slot name=\"secondary-actions\" />\n\t\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- secondary name -->\n\t\t\t\t\t\t\t<p v-if=\"subname.trim() !== ''\"\n\t\t\t\t\t\t\t\t:aria-label=\"subtitle\"\n\t\t\t\t\t\t\t\t:title=\"subtitle\"\n\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__subname\">\n\t\t\t\t\t\t\t\t{{ subname }}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<NcButton :title=\"closeTranslated\"\n\t\t\t\t\t:aria-label=\"closeTranslated\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\tclass=\"app-sidebar__close\"\n\t\t\t\t\t@click.prevent=\"closeSidebar\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<div v-if=\"$slots['description'] && !empty\" class=\"app-sidebar-header__description\">\n\t\t\t\t\t<slot name=\"description\" />\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<NcAppSidebarTabs v-show=\"!loading\"\n\t\t\t\tref=\"tabs\"\n\t\t\t\t:active=\"active\"\n\t\t\t\t@update:active=\"onUpdateActive\">\n\t\t\t\t<slot />\n\t\t\t</NcAppSidebarTabs>\n\n\t\t\t<NcEmptyContent v-if=\"loading\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon :size=\"64\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</aside>\n\t</transition>\n</template>\n\n<script>\nimport NcAppSidebarTabs from './NcAppSidebarTabs.vue'\nimport NcActions from '../NcActions/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcButton from '../NcButton/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\nimport Focus from '../../directives/Focus/index.js'\nimport Linkify from '../../directives/Linkify/index.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport Star from 'vue-material-design-icons/Star.vue'\nimport StarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\n\nexport default {\n\tname: 'NcAppSidebar',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcAppSidebarTabs,\n\t\tArrowRight,\n\t\tNcButton,\n\t\tNcLoadingIcon,\n\t\tNcEmptyContent,\n\t\tClose,\n\t\tStar,\n\t\tStarOutline,\n\t},\n\n\tdirectives: {\n\t\tfocus: Focus,\n\t\tlinkify: Linkify,\n\t\tClickOutside,\n\t\tTooltip,\n\t},\n\n\tprops: {\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Allow to edit the sidebar name.\n\t\t */\n\t\tnameEditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tnamePlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Title to display for the subname.\n\t\t */\n\t\tsubtitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Url to the top header background image\n\t\t * Applied with css\n\t\t */\n\t\tbackground: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Enable the favourite icon if not null\n\t\t * See fired events\n\t\t */\n\t\tstarred: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Show loading spinner instead of the star icon\n\t\t */\n\t\tstarLoading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Show loading spinner instead of tabs\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Display the sidebar in compact mode\n\t\t */\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only display close button and default slot content.\n\t\t * Don't display other header content and primary and secondary actions.\n\t\t * Useful when showing the EmptyContent component as content.\n\t\t */\n\t\tempty: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Linkify the name\n\t\t */\n\t\tlinkifyName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Title to display for the name.\n\t\t * Can be set to the same text in case it's too long.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closing',\n\t\t'closed',\n\t\t'opening',\n\t\t'opened',\n\t\t'figure-click',\n\t\t'update:starred',\n\t\t'update:nameEditable',\n\t\t'update:name',\n\t\t'update:active',\n\t\t'submit-name',\n\t\t'dismiss-editing',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tchangeNameTranslated: t('Change name'),\n\t\t\tcloseTranslated: t('Close sidebar'),\n\t\t\tfavoriteTranslated: t('Favorite'),\n\t\t\tisStarred: this.starred,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcanStar() {\n\t\t\treturn this.isStarred !== null\n\t\t},\n\t\thasFigure() {\n\t\t\treturn this.$slots.header || this.background\n\t\t},\n\t\thasFigureClickListener() {\n\t\t\treturn this.$listeners['figure-click']\n\t\t},\n\t},\n\n\twatch: {\n\t\tstarred() {\n\t\t\tthis.isStarred = this.starred\n\t\t},\n\t},\n\n\tbeforeDestroy() {\n\t\t// Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received.\n\t\tthis.$emit('closed')\n\t},\n\n\tmethods: {\n\t\tonBeforeEnter(element) {\n\t\t\t/**\n\t\t\t * The sidebar is opening and the transition is in progress\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('opening', element)\n\t\t},\n\t\tonAfterEnter(element) {\n\t\t\t/**\n\t\t\t * The sidebar is opened and the transition is complete\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('opened', element)\n\t\t},\n\t\tonBeforeLeave(element) {\n\t\t\t/**\n\t\t\t * The sidebar is closing and the transition is in progress\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('closing', element)\n\t\t},\n\t\tonAfterLeave(element) {\n\t\t\t/**\n\t\t\t * The sidebar is closed and the transition is complete\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('closed', element)\n\t\t},\n\n\t\t/**\n\t\t * Used to tell parent component the user asked to close the sidebar\n\t\t *\n\t\t * @param {Event} e close icon click event\n\t\t */\n\t\tcloseSidebar(e) {\n\t\t\t/**\n\t\t\t * The user clicked to closed the sidebar\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('close', e)\n\t\t},\n\n\t\t/**\n\t\t * Emit figure click event to parent component\n\t\t *\n\t\t * @param {Event} e click event\n\t\t */\n\t\tonFigureClick(e) {\n\t\t\t/**\n\t\t\t * The figure/background header has been clicked\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('figure-click', e)\n\t\t},\n\n\t\t/**\n\t\t * Toggle the favourite state\n\t\t * and emit to the parent component\n\t\t */\n\t\ttoggleStarred() {\n\t\t\tthis.isStarred = !this.isStarred\n\t\t\t/**\n\t\t\t * Emitted when the starred value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:starred', this.isStarred)\n\t\t},\n\n\t\teditName() {\n\t\t\t/**\n\t\t\t * Emitted when the nameEditable value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:nameEditable', true)\n\t\t\t// Focus the name input\n\t\t\tif (this.nameEditable) {\n\t\t\t\tthis.$nextTick(\n\t\t\t\t\t() => this.$refs.nameInput.focus(),\n\t\t\t\t)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Emit name change event to parent component\n\t\t *\n\t\t * @param {Event} event input event\n\t\t */\n\t\tonNameInput(event) {\n\t\t\t/**\n\t\t\t * Emitted when the name value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:name', event.target.value)\n\t\t},\n\n\t\t/**\n\t\t * Emit when the name form edit confirm button is pressed in order\n\t\t * to change the name.\n\t\t *\n\t\t * @param {Event} event submit event\n\t\t */\n\t\tonSubmitName(event) {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/**\n\t\t\t * Emitted when the name edit input has been submitted\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('submit-name', event)\n\t\t},\n\t\tonDismissEditing() {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/**\n\t\t\t * Emitted when the name edit has been cancelled\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('dismiss-editing')\n\t\t},\n\t\tonUpdateActive(activeTab) {\n\t\t\t/**\n\t\t\t * The active tab changed\n\t\t\t *\n\t\t\t * @type {string}\n\t\t\t */\n\t\t\tthis.$emit('update:active', activeTab)\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n$sidebar-min-width: 300px;\n$sidebar-max-width: 500px;\n\n$desc-vertical-padding: 18px;\n$desc-vertical-padding-compact: 10px;\n$desc-input-padding: 7px;\n\n// name and subname\n$desc-name-height: 30px;\n$desc-subname-height: 22px;\n$desc-height: $desc-name-height + $desc-subname-height;\n\n$top-buttons-spacing: 6px;\n\n/*\n\tSidebar: to be used within #content\n\tapp-content will be shrinked properly\n*/\n.app-sidebar {\n\tz-index: 1500;\n\ttop: 0;\n\tright: 0;\n\tdisplay: flex;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tflex-direction: column;\n\tflex-shrink: 0;\n\twidth: 27vw;\n\tmin-width: $sidebar-min-width;\n\tmax-width: $sidebar-max-width;\n\theight: 100%;\n\tborder-left: 1px solid var(--color-border);\n\tbackground: var(--color-main-background);\n\n\t.app-sidebar-header {\n\t\t> .app-sidebar__close {\n\t\t\tposition: absolute;\n\t\t\tz-index: 100;\n\t\t\ttop: $top-buttons-spacing;\n\t\t\tright: $top-buttons-spacing;\n\t\t\twidth: $clickable-area;\n\t\t\theight: $clickable-area;\n\t\t\topacity: $opacity_normal;\n\t\t\tborder-radius: math.div($clickable-area, 2);\n\t\t\t&:hover,\n\t\t\t&:active,\n\t\t\t&:focus {\n\t\t\t\topacity: $opacity_full;\n\t\t\t\tbackground-color: $action-background-hover;\n\t\t\t}\n\t\t}\n\n\t\t// Compact mode only affects a sidebar with a figure\n\t\t&--compact.app-sidebar-header--with-figure {\n\t\t\t.app-sidebar-header__info {\n\t\t\t\tflex-direction: row;\n\n\t\t\t\t.app-sidebar-header__figure {\n\t\t\t\t\tz-index: 2;\n\t\t\t\t\twidth: $desc-height + $desc-vertical-padding;\n\t\t\t\t\theight: $desc-height + $desc-vertical-padding;\n\t\t\t\t\tmargin: math.div($desc-vertical-padding, 2);\n\t\t\t\t\tborder-radius: 3px;\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t}\n\t\t\t\t.app-sidebar-header__desc {\n\t\t\t\t\tpadding-left: 0;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tmin-width: 0;\n\t\t\t\t\tpadding-right: 2 * $clickable-area + $top-buttons-spacing;\n\t\t\t\t\tpadding-top: $desc-vertical-padding-compact;\n\n\t\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\t\tpadding-right: #{$clickable-area + $top-buttons-spacing};\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\t\t\tz-index: 3; // above star\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: math.div($desc-vertical-padding, 2);\n\t\t\t\t\t\tleft: -1 * $clickable-area;\n\t\t\t\t\t\tgap: 0; // override gap\n\t\t\t\t\t}\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\t\t\tright: $clickable-area + $top-buttons-spacing; // left of the close button\n\t\t\t\t\t\tbackground-color: transparent;\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar without figure\n\t\t&:not(.app-sidebar-header--with-figure) {\n\t\t\t// align the menu with the close button\n\t\t\t.app-sidebar-header__menu {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\tright: $top-buttons-spacing + $clickable-area;\n\t\t\t}\n\t\t\t// increase the padding to not overlap the menu\n\t\t\t.app-sidebar-header__desc {\n\t\t\t\tpadding-right: #{$clickable-area * 2 + $top-buttons-spacing};\n\n\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\tpadding-right: #{$clickable-area + $top-buttons-spacing};\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// the container with the figure and the description\n\t\t.app-sidebar-header__info {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t// header background\n\t\t&__figure {\n\t\t\twidth: 100%;\n\t\t\theight: 250px;\n\t\t\tmax-height: 250px;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: contain;\n\t\t\t&--with-action {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\n\t\t// description\n\t\t&__desc {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding: #{$desc-vertical-padding} #{$top-buttons-spacing} #{$desc-vertical-padding} #{math.div($desc-vertical-padding, 2)};\n\t\t\tgap: 0 4px;\n\n\t\t\t// custom overrides\n\t\t\t&--with-tertiary-action {\n\t\t\t\tpadding-left: 6px;\n\t\t\t}\n\n\t\t\t&--editable .app-sidebar-header__mainname-form,\n\t\t\t&--with-subname--editable .app-sidebar-header__mainname-form {\n\t\t\t\tmargin-top: -2px;\n\t\t\t\tmargin-bottom: -2px;\n\t\t\t}\n\n\t\t\t&--with-subname--editable .app-sidebar-header__subname {\n\t\t\t\tmargin-top: -2px;\n\t\t\t}\n\n\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: $clickable-area;\n\t\t\t\twidth: $clickable-area;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex: 0 0 auto;\n\n\t\t\t\t.app-sidebar-header__star {\n\t\t\t\t\t// Override default Button component styles\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t&:not([aria-pressed='true']):hover {\n\t\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// names\n\t\t\t.app-sidebar-header__name-container {\n\t\t\t\tflex: 1 1 auto;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\t\t\t\tmin-width: 0;\n\n\t\t\t\t.app-sidebar-header__mainname-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tmin-height: $clickable-area;\n\n\t\t\t\t\t// main name\n\t\t\t\t\t.app-sidebar-header__mainname {\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tmin-height: 30px;\n\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\tline-height: $desc-name-height;\n\n\t\t\t\t\t\t// Needs 'deep' as the link is generated by the linkify directive\n\t\t\t\t\t\t&:deep(.linkified) {\n\t\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__mainname-form {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\talign-items: center;\n\n\t\t\t\t\t\tinput.app-sidebar-header__mainname-input {\n\t\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tpadding: $desc-input-padding;\n\t\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// main menu\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\theight: $clickable-area;\n\t\t\t\t\t\twidth: $clickable-area;\n\t\t\t\t\t\tborder-radius: math.div($clickable-area, 2);\n\t\t\t\t\t\tbackground-color: $action-background-hover;\n\t\t\t\t\t\tmargin-left: 5px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// shared between main and subname\n\t\t\t\t.app-sidebar-header__mainname,\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t}\n\n\t\t\t\t// subname\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\topacity: $opacity_normal;\n\t\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar description slot\n\t\t&__description {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmargin: 0 10px;\n\t\t}\n\t}\n}\n\n// Make the sidebar full-width on small screens\n@media only screen and (max-width: 768px) {\n\t.app-sidebar {\n\t\twidth: 100vw;\n\t\tmax-width: 100vw;\n\t}\n}\n\n.slide-right-leave-active,\n.slide-right-enter-active {\n\ttransition-duration: var(--animation-quick);\n\ttransition-property: max-width, min-width;\n}\n\n.slide-right-enter-to,\n.slide-right-leave {\n\tmin-width: $sidebar-min-width;\n\tmax-width: $sidebar-max-width;\n}\n\n.slide-right-enter,\n.slide-right-leave-to {\n\tmin-width: 0 !important;\n\tmax-width: 0 !important;\n}\n</style>\n\n<style lang=\"scss\">\n// ! slots specific designs, cannot be scoped\n// if any button inside the description slot, increase visual padding\n.app-sidebar-header__description {\n\tbutton, .button,\n\tinput[type='button'],\n\tinput[type='submit'],\n\tinput[type='reset'] {\n\t\tpadding: 6px 22px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$1","Components_NcCheckboxRadioSwitch","Components_NcVNodes","tab","active","id","a","b","tabIndex","_sfc_main","Components_NcActions","NcAppSidebarTabs","ArrowRight__default","Components_NcButton","Components_NcLoadingIcon","Components_NcEmptyContent","Close__default","Star__default","StarOutline__default","Directives_Focus","Directives_Linkify","components","floatingVue","l10n","element","e","event","activeTab"],"mappings":"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"}