tethys.backend/resources/js/Components/NcSettingsSection.vue

<template>
	<!-- <div class="settings-section" :class="{'settings-section--limit-width': forceLimitWidth}"> -->
		<div class="settings-section"  v-bind:class="containerMaxW">
		 <h2 class="settings-section__name">
			{{ name }}
			<a v-if="hasDocUrl"
				:href="docUrl"
				class="settings-section__info"
				:title="docNameTranslated"
				:aria-label="docNameTranslated"
				target="_blank"
				rel="noreferrer nofollow">
				<HelpCircle :size="20" />
			</a>
		</h2>
		<p v-if="hasDescription"
			class="settings-section__desc">
			{{ description }}
		</p>
		<slot />
	</div>
</template>

<script lang="ts">
// import { t } from '../../l10n.js'
// import { translate as t } from '@nextcloud/l10n'
import { translate as t } from '@/utils/tethyscloud-l10n';

import HelpCircle from './Icons/HelpCircle.vue';
import { containerMaxW } from '@/config';

export default {
	name: 'NcSettingsSection',

	components: {
		HelpCircle,
	},

	props: {
		name: {
			type: String,
			required: true,
		},
		description: {
			type: String,
			default: '',
		},
		docUrl: {
			type: String,
			default: '',
		},
		/**
		 * Limit the width of the setting's content
		 *
		 * Setting this to false allows unrestricted (width) settings content.
		 * Note that the name and description have always a width limit.
		 * @deprecated Will be removed with next version and will not be used on Nextcloud 30+ (always forced to true)
		 */
		limitWidth: {
			type: Boolean,
			default: true,
		},
	},

	data() {
		return {
			docNameTranslated: t('External documentation for {name}', {
				name: this.name,
			}),
			containerMaxW: containerMaxW,
		}
	},

	computed: {
		forceLimitWidth() {
			// if (this.limitWidth) {
			// 	return true
			// }
			// // Overwrite this on Nextcloud 30+ to always limit the width
			// const [major] = window._oc_config?.version.split('.', 2) ?? []
			// return major && Number.parseInt(major) >= 30
            return true;
		},

		hasDescription() {
			return this.description.length > 0
		},
		hasDocUrl() {
			return this.docUrl.length > 0
		},
	},
}

</script>

<style lang="css" scoped>
/* $maxWidth: 900px; */

.settings-section {
	display: block;
	margin-bottom: auto;
	padding: 30px;

	&:not(:last-child) {
		border-bottom: 1px solid var(--color-border);
	}

	&--limit-width > * {
		max-width: 900px;
	}

	&__name {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		font-weight: bold;
		max-width: 900px;
		margin-top: 0; 
	}

	&__info {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--default-clickable-area);
		height: var(--default-clickable-area);
		
		/* margin: calc($icon-margin * -1); */
		margin-left: 0;
		color: var(--color-text-maxcontrast);

		&:hover, &:focus, &:active {
			color: var(--color-main-text);
		}
	}

	&__desc {
		margin-top: -.2em;
		margin-bottom: 1em;
		color: var(--color-text-maxcontrast);
		max-width: 900px;
	}
}

</style>