UNPKG

@nextcloud/vue

Version:
1 lines 2.79 kB
{"version":3,"file":"NcAppSettingsSection.cjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<section :id=\"htmlId\" :aria-labelledby=\"`${htmlId}--label`\" class=\"app-settings-section\">\n\t\t<h3 :id=\"`${htmlId}--label`\" class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t\t<!-- @slot Optonal icon to for the secion in the navigation -->\n\t\t<slot v-if=\"false\" name=\"icon\" />\n\t</section>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\tinject: ['registerSection', 'unregisterSection'],\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\t// Reactive changes for section navigation\n\twatch: {\n\t\tid(newId, oldId) {\n\t\t\tthis.unregisterSection(oldId)\n\t\t\tthis.registerSection(newId, this.name, this.$slots?.icon)\n\t\t},\n\t\tname(newName) {\n\t\t\tthis.unregisterSection(this.id)\n\t\t\tthis.registerSection(this.id, newName, this.$slots?.icon)\n\t\t},\n\t},\n\tmounted() {\n\t\t// register section for navigation\n\t\tthis.registerSection(this.id, this.name, this.$slots?.icon)\n\t},\n\tbeforeDestroy() {\n\t\tthis.unregisterSection(this.id)\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: 1.6em;\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":[],"mappings":";;AAiBA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA,CAAA,mBAAA,mBAAA;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,UAAA,IAAA;AAEA,eAAA,iBAAA,KAAA,EAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA,IAEA,SAAA;AACA,aAAA,sBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA,EAEA,OAAA;AAAA,IACA,GAAA,OAAA,OAAA;;AACA,WAAA,kBAAA,KAAA;AACA,WAAA,gBAAA,OAAA,KAAA,OAAA,UAAA,WAAA,mBAAA,IAAA;AAAA,IACA;AAAA,IACA,KAAA,SAAA;;AACA,WAAA,kBAAA,KAAA,EAAA;AACA,WAAA,gBAAA,KAAA,IAAA,UAAA,UAAA,WAAA,mBAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;;AAEA,SAAA,gBAAA,KAAA,IAAA,KAAA,OAAA,UAAA,WAAA,mBAAA,IAAA;AAAA,EACA;AAAA,EACA,gBAAA;AACA,SAAA,kBAAA,KAAA,EAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}