feat: site languages, setup and site URL settings

2026-11-01 22:13:02 +01:00
1 parent 0806733d5c
commit d9158025d4
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { SHEET_CONTENT_CLASS, SHEET_FOOTER_CLASS } from '@/components/sheetClasses'
+import LocaleAlert from '@/components/localization/LocaleAlert.vue'
+import LocaleButton from '@/components/localization/LocaleButton.vue'
+
+withDefaults(
+	defineProps<{
+		title: string
+		description?: string
+		confirmLabel: string
+		cancelLabel?: string
+		tone?: 'primary' | 'danger'
+		pending?: boolean
+		confirmDisabled?: boolean
+		error?: { title: string; description?: string } | null
+	}>(),
+	{
+		description: undefined,
+		cancelLabel: undefined,
+		tone: 'primary',
+		pending: false,
+		confirmDisabled: false,
+		error: null,
+	},
+)
+
+const emit = defineEmits<{ close: []; confirm: [] }>()
+
+const CLOSE_BUTTON = {
+	color: 'neutral',
+	variant: 'ghost',
+	class: 'size-11 justify-center p-0 text-muted md:size-7',
+} as const
+</script>
+
+<template>
+	<UModal
+		:open="true"
+		:title="title"
+		:description="description"
+		:dismissible="!pending"
+		:close="pending ? false : CLOSE_BUTTON"
+		:ui="{
+			content: `${SHEET_CONTENT_CLASS} sm:top-25 sm:max-w-115`,
+			close: 'end-6 top-8 md:top-5',
+			header: 'min-h-0 items-start px-6 pt-5 pb-0 sm:px-6',
+			title: 'pe-14 text-lg/6 font-semibold md:pe-10',
+			description: 'mt-1 pe-14 text-sm text-pretty text-toned md:pe-10',
+			body: 'px-6 pt-4 pb-0 sm:px-6 sm:pt-4 sm:pb-0',
+			footer: SHEET_FOOTER_CLASS,
+		}"
+		@update:open="(value: boolean) => !value && emit('close')"
+	>
+		<template #body>
+			<div class="flex flex-col gap-3.5">
+				<LocaleAlert
+					v-if="error"
+					tone="error"
+					icon="i-lucide-circle-x"
+					:title="error.title"
+					:description="error.description"
+				/>
+				<slot />
+			</div>
+		</template>
+		<template #footer>
+			<div class="flex w-full flex-col-reverse gap-2 md:flex-row md:justify-end">
+				<LocaleButton :disabled="pending" block class="md:w-auto" @click="emit('close')">
+					{{ cancelLabel ?? t('Cancel') }}
+				</LocaleButton>
+				<LocaleButton
+					:kind="tone === 'danger' ? 'danger' : 'primary'"
+					:disabled="confirmDisabled || pending"
+					:loading="pending"
+					block
+					class="md:w-auto"
+					@click="emit('confirm')"
+				>
+					{{ confirmLabel }}
+				</LocaleButton>
+			</div>
+		</template>
+	</UModal>
+</template>