tailwind-alpine/toast.html at main · mishamean/tailwind-alpine · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link
			href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
			rel="stylesheet"
		/>
		<title>Tailwind + Alpine</title>
	</head>
	<body class="relative bg-gray-900">
		<div class="min-h-screen flex justify-center items-center p-3">
			<div class="grid grid-cols-2 gap-4">
				<button
					x-data
					@click="$store.toasts.createToast('This is a test toast message.')"
					class="bg-gray-700 border-t-4 border-blue-600 text-white p-3"
				>
					Create Info Test Toast
				</button>
				<button
					x-data
					@click="$store.toasts.createToast('This is a test toast message.', 'success')"
					class="bg-gray-700 border-t-4 border-green-600 text-white p-3"
				>
					Create Success Test Toast
				</button>
				<button
					x-data
					@click="$store.toasts.createToast('This is a test toast message.', 'warning')"
					class="bg-gray-700 border-t-4 border-yellow-500 text-white p-3"
				>
					Create Warning Test Toast
				</button>
				<button
					x-data
					@click="$store.toasts.createToast('This is a test toast message.', 'error')"
					class="bg-gray-700 border-t-4 border-red-600 text-white p-3"
				>
					Create Error Test Toast
				</button>
			</div>
		</div>
		<div x-data class="absolute top-0 right-0 p-4 overflow-x-hidden">
			<template
				x-for="(toast, index) in $store.toasts.list"
				:key="toast.id"
			>
				<div
					x-show="toast.visible"
					@click="$store.toasts.destroyToast(index)"
					x-transition:enter="transition ease-in duration-200"
					x-transition:enter-start="transform opacity-0 translate-y-2"
					x-transition:enter-end="transform opacity-100"
					x-transition:leave="transition ease-out duration-500"
					x-transition:leave-start="transform translate-x-0 opacity-100"
					x-transition:leave-end="transform translate-x-full opacity-0"
					class="bg-gray-900 bg-gradient-to-r text-white p-3 rounded mb-3 shadow-lg flex items-center"
					:class="{
				'from-blue-500 to-blue-600': toast.type === 'info',
				'from-green-500 to-green-600': toast.type === 'success',
				'from-yellow-400 to-yellow-500': toast.type === 'warning',
				'from-red-500 to-pink-500': toast.type === 'error',
				}"
				>
					<svg
						x-show="toast.type == 'info'"
						class="w-6 h-6 mr-2"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
					>
						<path
							fill-rule="evenodd"
							d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
							clip-rule="evenodd"
						/>
					</svg>
					<svg
						x-show="toast.type == 'success'"
						class="w-6 h-6 mr-2"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
					>
						<path
							fill-rule="evenodd"
							d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
							clip-rule="evenodd"
						/>
					</svg>
					<svg
						x-show="toast.type == 'warning'"
						class="w-6 h-6 mr-2"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
					>
						<path
							fill-rule="evenodd"
							d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
							clip-rule="evenodd"
						/>
					</svg>
					<svg
						x-show="toast.type == 'error'"
						class="w-6 h-6 mr-2"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
					>
						<path
							fill-rule="evenodd"
							d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
							clip-rule="evenodd"
						/>
					</svg>
					<div x-text="toast.message"></div>
				</div>
			</template>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/spruce@2.x.x/dist/spruce.umd.js"></script>
		<script>
			Spruce.store("toasts", {
				counter: 0,
				list: [],
				createToast(message, type = "info") {
					const index = this.list.length
					let totalVisible =
						this.list.filter((toast) => {
							return toast.visible
						}).length + 1
					this.list.push({
						id: this.counter++,
						message,
						type,
						visible: true,
					})
					setTimeout(() => {
						this.destroyToast(index)
					}, 2000 * totalVisible)
				},
				destroyToast(index) {
					this.list[index].visible = false
				},
			})
		</script>
		<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
	</body>
</html>