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

Nextcloud vue components

var f=require("../assets/index44.css");const r=require("./NcModal.cjs"),c=require("../Mixins/isMobile.cjs"),d=require("../chunks/l10n-46d0c1c0.cjs"),p=require("debounce"),h=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const u={name:"NcAppSettingsDialog",components:{NcModal:r},mixins:[c],props:{open:{type:Boolean,required:!0},showNavigation:{type:Boolean,default:!1},container:{type:String,default:"body"},name:{type:String,default:""},additionalTrapElements:{type:Array,default:()=>[]}},emits:["update:open"],data(){return{selectedSection:"",linkClicked:!1,addedScrollListener:!1,scroller:null}},computed:{hasNavigation(){return!(this.isMobile||!this.showNavigation)},settingsNavigationAriaLabel(){return d.t("Settings navigation")}},mounted(){this.selectedSection=this.$slots.default[0].componentOptions.propsData.id},updated(){this.$refs.settingsScroller&&(this.scroller=this.$refs.settingsScroller,this.addedScrollListener||(this.scroller.addEventListener("scroll",this.handleScroll),this.addedScrollListener=!0))},methods:{getSettingsNavigation(t){const n=t.filter(e=>e.componentOptions).map(e=>{var s,a;return{id:(s=e.componentOptions.propsData)==null?void 0:s.id,name:(a=e.componentOptions.propsData)==null?void 0:a.name}}),l=t.map(e=>e.name),i=t.map(e=>e.id);return n.forEach((e,s)=>{const a=[...l],o=[...i];if(a.splice(s,1),o.splice(s,1),a.includes(e.name))throw new Error(`Duplicate section name found: ${e}. Settings navigation sections must have unique section names.`);if(o.includes(e.id))throw new Error(`Duplicate section id found: ${e}. Settings navigation sections must have unique section ids.`)}),n},handleSettingsNavigationClick(t){this.linkClicked=!0,document.getElementById("settings-section_"+t).scrollIntoView({behavior:"smooth",inline:"nearest"}),this.selectedSection=t,setTimeout(()=>{this.linkClicked=!1},1e3)},handleCloseModal(){this.$emit("update:open",!1),this.scroller.removeEventListener("scroll",this.handleScroll),this.addedScrollListener=!1,this.scroller.scrollTop=0},handleScroll(){this.linkClicked||this.unfocusNavigationItem()},unfocusNavigationItem:p(function(){this.selectedSection="",document.activeElement.className.includes("navigation-list__link")&&document.activeElement.blur()},300),handleLinkKeydown(t,n){t.code==="Enter"&&this.handleSettingsNavigationClick(n)}},render(t){const n=()=>this.hasNavigation?[t("div",{attrs:{class:"app-settings__navigation",role:"tablist","aria-label":this.settingsNavigationAriaLabel}},[t("ul",{attrs:{class:"navigation-list",role:"tablist"}},this.getSettingsNavigation(this.$slots.default).map(i=>l(i)))])]:[],l=i=>t("li",{},[t("a",{class:{"navigation-list__link":!0,"navigation-list__link--active":i.id===this.selectedSection},attrs:{role:"tab","aria-selected":i.id===this.selectedSection,tabindex:"0"},on:{click:()=>this.handleSettingsNavigationClick(i.id),keydown:()=>this.handleLinkKeydown(event,i.id)}},i.name)]);if(this.open)return t("NcModal",{class:["app-settings-modal"],attrs:{container:this.container,size:"large",additionalTrapElements:this.additionalTrapElements},on:{close:()=>{this.handleCloseModal()}}},[t("div",{attrs:{class:"app-settings"}},[t("h2",{attrs:{class:"app-settings__name"}},this.name),t("div",{attrs:{class:"app-settings__wrapper"}},[...n(),t("div",{attrs:{class:"app-settings__content"},ref:"settingsScroller"},this.$slots.default)])])])}},g=null,m=null;var v=h.normalizeComponent(u,g,m,!1,null,"0ff961d8",null,null);const S=v.exports;module.exports=S;