@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/content/Terminal.vue

@@ -9,15 +9,15 @@ import { Button } from '../ui/button';
 
 // Props
 const props = withDefaults(defineProps<{
-    commands?: string[];
-    title?: string;
-    prompt?: string;
-    copyable?: boolean;
+	commands?: string[];
+	title?: string;
+	prompt?: string;
+	copyable?: boolean;
 }>(), {
-    commands: () => [],
-    title: '',
-    prompt: '$',
-    copyable: true
+	commands: () => [],
+	title: '',
+	prompt: '$',
+	copyable: true
 });
 
 const { t } = useI18n();
@@ -27,74 +27,74 @@ const resolvedTitle = computed(() => props.title || t('uiVintage.terminal.title'
 
 // Copy all command lines to the clipboard
 const copyCommands = async () => {
-    // Check if copy is enabled
-    if (!props.copyable || !commandText.value || !navigator.clipboard) {
-        return;
-    }
+	// Check if copy is enabled
+	if (!props.copyable || !commandText.value || !navigator.clipboard) {
+		return;
+	}
 
-    // Copy the command text to the clipboard
-    await navigator.clipboard.writeText(commandText.value);
-    copied.value = true;
-    window.setTimeout(() => {
-        copied.value = false;
-    }, 1800);
+	// Copy the command text to the clipboard
+	await navigator.clipboard.writeText(commandText.value);
+	copied.value = true;
+	window.setTimeout(() => {
+		copied.value = false;
+	}, 1800);
 };
 </script>
 
 <template>
-    <div class="not-prose my-6 sm:my-8">
-        <div data-aos="blur-up" data-terminal class="overflow-hidden rounded border border-border bg-card text-foreground shadow-elevated-sm">
-            <!-- Window title bar -->
-            <div class="relative flex h-8 items-center border-b border-border bg-surface px-3">
-                <!-- Traffic lights -->
-                <span aria-hidden="true" class="flex items-center gap-2">
-                    <span class="size-3 rounded-full bg-destructive/85" />
-                    <span class="size-3 rounded-full bg-warning/85" />
-                    <span class="size-3 rounded-full bg-success/85" />
-                </span>
+	<div class="not-prose my-6 sm:my-8">
+		<div data-aos="blur-up" data-terminal class="overflow-hidden rounded border border-border bg-card text-foreground shadow-elevated-sm">
+			<!-- Window title bar -->
+			<div class="relative flex h-8 items-center border-b border-border bg-surface px-3">
+				<!-- Traffic lights -->
+				<span aria-hidden="true" class="flex items-center gap-2">
+					<span class="size-3 rounded-full bg-destructive/85" />
+					<span class="size-3 rounded-full bg-warning/85" />
+					<span class="size-3 rounded-full bg-success/85" />
+				</span>
 
-                <!-- Window title -->
-                <div class="pointer-events-none absolute inset-x-24 flex items-center justify-center gap-1.5 text-muted-foreground">
-                    <HugeiconsIcon :icon="TerminalIcon" class="size-3.5 shrink-0" />
-                    <span class="truncate text-xs font-medium">{{ resolvedTitle }}</span>
-                </div>
+				<!-- Window title -->
+				<div class="pointer-events-none absolute inset-x-24 flex items-center justify-center gap-1.5 text-muted-foreground">
+					<HugeiconsIcon :icon="TerminalIcon" class="size-3.5 shrink-0" />
+					<span class="truncate text-xs font-medium">{{ resolvedTitle }}</span>
+				</div>
 
-                <!-- Copy command button -->
-                <Button v-if="props.copyable"
-                    variant="ghost"
-                    size="icon"
-                    class="ml-auto size-6 text-muted-foreground hover:bg-accent hover:text-foreground"
-                    :aria-label="copied ? t('uiVintage.terminal.copied') : t('uiVintage.terminal.copy')"
-                    :title="copied ? t('uiVintage.terminal.copied') : t('uiVintage.terminal.copy')"
-                    :disabled="!commandText"
-                    @click="copyCommands">
-                    <HugeiconsIcon :icon="copied ? CheckmarkCircle02Icon : Copy01Icon" class="size-3.5" />
-                </Button>
+				<!-- Copy command button -->
+				<Button v-if="props.copyable"
+					variant="ghost"
+					size="icon"
+					class="ml-auto size-6 text-muted-foreground hover:bg-accent hover:text-foreground"
+					:aria-label="copied ? t('uiVintage.terminal.copied') : t('uiVintage.terminal.copy')"
+					:title="copied ? t('uiVintage.terminal.copied') : t('uiVintage.terminal.copy')"
+					:disabled="!commandText"
+					@click="copyCommands">
+					<HugeiconsIcon :icon="copied ? CheckmarkCircle02Icon : Copy01Icon" class="size-3.5" />
+				</Button>
 
-                <!-- Announce the copy to screen readers -->
-                <span v-if="props.copyable" class="sr-only" aria-live="polite">{{ copied ? t('uiVintage.terminal.copied') : '' }}</span>
-            </div>
+				<!-- Announce the copy to screen readers -->
+				<span v-if="props.copyable" class="sr-only" aria-live="polite">{{ copied ? t('uiVintage.terminal.copied') : '' }}</span>
+			</div>
 
-            <!-- Terminal commands -->
-            <pre class="overflow-x-auto px-4 py-3 text-xs leading-6 sm:px-5 sm:py-4 sm:text-sm"><code><span v-for="(command, index) in props.commands" :key="`${command}-${index}`" class="flex min-w-max"><span class="mr-2 select-none text-primary" aria-hidden="true">{{ props.prompt }}</span><span>{{ command }}</span><span v-if="index === props.commands.length - 1" class="terminal-cursor ml-1 inline-block w-[0.6em] bg-primary/70" aria-hidden="true" /></span></code></pre>
-        </div>
-    </div>
+			<!-- Terminal commands -->
+			<pre class="overflow-x-auto px-4 py-3 text-xs leading-6 sm:px-5 sm:py-4 sm:text-sm"><code><span v-for="(command, index) in props.commands" :key="`${command}-${index}`" class="flex min-w-max"><span class="mr-2 select-none text-primary" aria-hidden="true">{{ props.prompt }}</span><span>{{ command }}</span><span v-if="index === props.commands.length - 1" class="terminal-cursor ml-1 inline-block w-[0.6em] bg-primary/70" aria-hidden="true" /></span></code></pre>
+		</div>
+	</div>
 </template>
 
 <style scoped>
 .terminal-cursor {
-    animation: terminal-blink 1.1s steps(1) infinite;
+	animation: terminal-blink 1.1s steps(1) infinite;
 }
 
 @keyframes terminal-blink {
-    50% {
-        opacity: 0;
-    }
+	50% {
+		opacity: 0;
+	}
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .terminal-cursor {
-        animation: none;
-    }
+	.terminal-cursor {
+		animation: none;
+	}
 }
-</style>
+</style>

package/src/components/cookie-consent/CookieConsent.vue

@@ -11,27 +11,27 @@ defineOptions({ inheritAttrs: false });
 
 // Props
 const props = withDefaults(defineProps<{
-    storageKey?: string;
-    message?: string;
-    policyTo?: string;
-    policyLabel?: string;
-    acceptLabel?: string;
-    declineLabel?: string;
-    class?: HTMLAttributes['class'];
+	storageKey?: string;
+	message?: string;
+	policyTo?: string;
+	policyLabel?: string;
+	acceptLabel?: string;
+	declineLabel?: string;
+	class?: HTMLAttributes['class'];
 }>(), {
-    storageKey: 'cookieConsent',
-    message: undefined,
-    policyTo: undefined,
-    policyLabel: undefined,
-    acceptLabel: undefined,
-    declineLabel: undefined,
-    class: undefined
+	storageKey: 'cookieConsent',
+	message: undefined,
+	policyTo: undefined,
+	policyLabel: undefined,
+	acceptLabel: undefined,
+	declineLabel: undefined,
+	class: undefined
 });
 
 // Emits
 const emit = defineEmits<{
-    accept: [];
-    decline: [];
+	accept: [];
+	decline: [];
 }>();
 
 const { t } = useI18n();
@@ -49,34 +49,34 @@ const resolvedDeclineLabel = computed(() => props.declineLabel || t('uiVintage.c
 
 // Save the choice and notify
 const handleAccept = () => {
-    accept();
-    emit('accept');
+	accept();
+	emit('accept');
 };
 const handleDecline = () => {
-    decline();
-    emit('decline');
+	decline();
+	emit('decline');
 };
 
 // Wait for the browser before showing the banner
 onMounted(() => {
-    hasMounted.value = true;
+	hasMounted.value = true;
 });
 </script>
 
 <template>
-    <!-- Rendered in the body: a transformed or filtered ancestor (page transitions, reveal animations) would otherwise pin the fixed banner to itself instead of the viewport -->
-    <Teleport to="body">
-        <div v-if="isVisible" v-bind="$attrs" data-slot="cookie-consent" role="region" :aria-label="t('uiVintage.cookieConsent.region')" :class="cn('fixed inset-x-4 bottom-4 z-50 sm:left-auto sm:right-4 sm:max-w-md', props.class)">
-            <Card class="gap-3! p-4 shadow-elevated-sm">
-                <p class="text-sm text-foreground">
-                    {{ resolvedMessage }}
-                    <NuxtLinkLocale v-if="props.policyTo" :to="props.policyTo" class="font-semibold text-primary underline underline-offset-2">{{ resolvedPolicyLabel }}</NuxtLinkLocale>
-                </p>
-                <div class="flex flex-wrap justify-end gap-2">
-                    <Button variant="secondary" size="sm" @click="handleDecline">{{ resolvedDeclineLabel }}</Button>
-                    <Button variant="primary" size="sm" @click="handleAccept">{{ resolvedAcceptLabel }}</Button>
-                </div>
-            </Card>
-        </div>
-    </Teleport>
+	<!-- Rendered in the body: a transformed or filtered ancestor (page transitions, reveal animations) would otherwise pin the fixed banner to itself instead of the viewport -->
+	<Teleport to="body">
+		<div v-if="isVisible" v-bind="$attrs" data-slot="cookie-consent" role="region" :aria-label="t('uiVintage.cookieConsent.region')" :class="cn('fixed inset-x-4 bottom-4 z-50 sm:left-auto sm:right-4 sm:max-w-md', props.class)">
+			<Card class="gap-3! p-4 shadow-elevated-sm">
+				<p class="text-sm text-foreground">
+					{{ resolvedMessage }}
+					<NuxtLinkLocale v-if="props.policyTo" :to="props.policyTo" class="font-semibold text-primary underline underline-offset-2">{{ resolvedPolicyLabel }}</NuxtLinkLocale>
+				</p>
+				<div class="flex flex-wrap justify-end gap-2">
+					<Button variant="secondary" size="sm" @click="handleDecline">{{ resolvedDeclineLabel }}</Button>
+					<Button variant="primary" size="sm" @click="handleAccept">{{ resolvedAcceptLabel }}</Button>
+				</div>
+			</Card>
+		</div>
+	</Teleport>
 </template>

package/src/components/cookie-consent/useCookieConsent.ts

@@ -8,48 +8,48 @@ const consentStates = new Map<string, Ref<CookieConsentValue>>();
 
 // Read the stored choice (storage can be unavailable, e.g. blocked in private windows)
 const readStoredConsent = (storageKey: string): CookieConsentValue => {
-    try {
-        const value = localStorage.getItem(storageKey);
-        return value === 'granted' || value === 'denied' ? value : null;
-    } catch {
-        return null;
-    }
+	try {
+		const value = localStorage.getItem(storageKey);
+		return value === 'granted' || value === 'denied' ? value : null;
+	} catch {
+		return null;
+	}
 };
 
 // Cookie consent state: gate optional scripts (analytics, ads) on `consent.value === 'granted'` and call `reset()` to ask again
 export const useCookieConsent = (storageKey = 'cookieConsent') => {
-    // On the server there is no stored choice (and no state must be shared between requests)
-    if (typeof window === 'undefined') {
-        const consent = ref<CookieConsentValue>(null);
-        const noop = () => {};
-        return { consent, accept: noop, decline: noop, reset: noop };
-    }
+	// On the server there is no stored choice (and no state must be shared between requests)
+	if (typeof window === 'undefined') {
+		const consent = ref<CookieConsentValue>(null);
+		const noop = () => {};
+		return { consent, accept: noop, decline: noop, reset: noop };
+	}
 
-    // Shared state for this key
-    let consent = consentStates.get(storageKey);
-    if (!consent) {
-        consent = ref(readStoredConsent(storageKey));
-        consentStates.set(storageKey, consent);
-    }
+	// Shared state for this key
+	let consent = consentStates.get(storageKey);
+	if (!consent) {
+		consent = ref(readStoredConsent(storageKey));
+		consentStates.set(storageKey, consent);
+	}
 
-    // Save a choice (null removes it, so the banner asks again)
-    const state = consent;
-    const setConsent = (value: CookieConsentValue) => {
-        state.value = value;
-        try {
-            if (value) {
-                localStorage.setItem(storageKey, value);
-            } else {
-                localStorage.removeItem(storageKey);
-            }
-        } catch { }
-    };
+	// Save a choice (null removes it, so the banner asks again)
+	const state = consent;
+	const setConsent = (value: CookieConsentValue) => {
+		state.value = value;
+		try {
+			if (value) {
+				localStorage.setItem(storageKey, value);
+			} else {
+				localStorage.removeItem(storageKey);
+			}
+		} catch { }
+	};
 
-    // Return the state and the actions
-    return {
-        consent: state,
-        accept: () => setConsent('granted'),
-        decline: () => setConsent('denied'),
-        reset: () => setConsent(null)
-    };
+	// Return the state and the actions
+	return {
+		consent: state,
+		accept: () => setConsent('granted'),
+		decline: () => setConsent('denied'),
+		reset: () => setConsent(null)
+	};
 };