@nextcloud/vue/dist/Components/NcAppSidebar.cjs

Nextcloud vue components

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=$;