Vue Alert Component

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomAlert } from '@getdom/studio';

const data = reactive({
		"as": "div",
		"tone": "info",
		"variant": "soft",
		"title": "Information available",
		"description": "Review the latest status details before continuing.",
		"icon": true,
		"dismissible": false,
		"dismissLabel": "Dismiss alert",
		"role": ""
	});
</script>

<template>
	<DomAlert
		v-bind="data"
	/>
</template>

<script setup>
import '@getdom/studio/style.css';
import { DomAlert } from '@getdom/studio';

const alerts = [
	{
		tone: 'info',
		title: 'Information available',
		description: 'A new policy summary is ready for review before the workflow continues.',
	},
	{
		tone: 'success',
		title: 'Changes saved',
		description: 'Your configuration is stored and will be used for the next deployment.',
	},
	{
		tone: 'warning',
		title: 'Review recommended',
		description: 'Two integrations need updated credentials before the sync window starts.',
	},
	{
		tone: 'danger',
		title: 'Action failed',
		description: 'The publish request could not complete because required fields are missing.',
	},
	{
		tone: 'default',
		title: 'General notice',
		description: 'This message is informational but not tied to a specific success or failure state.',
	},
];
</script>

<template>
	<div class="grid gap-3">
		<DomAlert
			v-for="alert in alerts"
			:key="alert.tone"
			:tone="alert.tone"
			:title="alert.title"
			:description="alert.description"
		/>
	</div>
</template>

<script setup>
import '@getdom/studio/style.css';
import { DomAlert, DomButton } from '@getdom/studio';
</script>

<template>
	<div class="grid gap-4">
		<DomAlert
			tone="success"
			variant="toast"
			title="Import complete"
			description="1,248 customer records were matched and the review queue has been refreshed."
		>
			<template #actions>
				<DomButton variant="secondary" size="sm">View records</DomButton>
				<DomButton variant="ghost" size="sm">Download report</DomButton>
			</template>
		</DomAlert>

		<DomAlert
			tone="warning"
			variant="toast"
			title="Sync paused"
			description="Reconnect the analytics account before the nightly enrichment job starts."
		/>

		<DomAlert
			tone="danger"
			variant="solid"
			title="Billing hold"
			description="Exports are paused until a billing owner updates the payment method."
		/>
	</div>
</template>

// CustomIcons.vue

<script setup>
import '@getdom/studio/style.css';
import { DomAlert } from '@getdom/studio';
import CloudSyncIcon from './CloudSyncIcon.vue';

const SHIELD_ICON = 'M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6l-7-3ZM9.5 12l1.75 1.75L15 10';
</script>

<template>
	<div class="grid gap-3">
		<DomAlert
			tone="primary"
			title="Protected workflow"
			description="This alert uses SVG path data passed through the icon prop."
			:icon="SHIELD_ICON"
		/>

		<DomAlert
			tone="info"
			variant="outline"
			title="Cloud sync queued"
			description="This alert uses an imported Vue icon component, the same pattern as DomIconButton."
			:icon="CloudSyncIcon"
		/>

		<DomAlert
			tone="default"
			variant="toast"
			title="Text-only notice"
			description="Set icon to false when the message should rely on text and layout alone."
			:icon="false"
		/>
	</div>
</template>


// CloudSyncIcon.vue

<template>
	<svg viewBox="0 0 24 24" fill="none">
		<path
			d="M17.5 18H8a4 4 0 0 1-.7-7.94A5.5 5.5 0 0 1 18 11.5h.5a3.25 3.25 0 0 1 0 6.5h-1M13 11l3 3-3 3M16 14H9"
			stroke="currentColor"
			stroke-width="1.8"
			stroke-linecap="round"
			stroke-linejoin="round"
		/>
	</svg>
</template>

<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomAlert, DomButton } from '@getdom/studio';

const alertKey = ref(0);
const dismissed = ref(false);

/**
 * Records that the alert completed its dismiss transition.
 *
 * @returns {void}
 */
function handleDismiss() {
	dismissed.value = true;
}

/**
 * Mounts a fresh alert so the dismiss interaction can be tried again.
 *
 * @returns {void}
 */
function restoreAlert() {
	alertKey.value += 1;
	dismissed.value = false;
}
</script>

<template>
	<div class="grid gap-3">
		<DomAlert
			:key="alertKey"
			dismissible
			tone="info"
			title="Workspace update available"
			description="Refresh when convenient to use the latest editor improvements."
			@dismiss="handleDismiss"
		/>
		<DomButton v-if="dismissed" class="w-fit" variant="secondary" size="sm" @click="restoreAlert">
			Show alert again
		</DomButton>
	</div>
</template>