playground stuff

packages/playground/package.json

@@ -7,6 +7,7 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@unocss/reset": "0.58.5",
 		"@vuetils/form": "0.2.7",
 		"@vuetils/toast": "workspace:^",
 		"vue": "3.4.19"

packages/playground/src/App.vue

@@ -1,23 +1,31 @@
 <template>
 	<div class="flex flex h-screen w-screen flex-col items-center justify-center">
-		<button @click="addToast">Press me</button>
+		<button class="rounded-md border border-black px-2 py-1 shadow-xl" @click="onClick">
+			Press me
+		</button>
 
 		<div class="mt-4 grid grid-cols-3 gap-4">
 			<label v-for="value in positions">
 				{{ value }}
-				<UInput :field="position" type="radio" name="radio" :value="value" />
+				<UInput :field="position" type="radio" name="position" :value="value" />
+			</label>
+		</div>
+
+		<div class="mt-4 grid grid-cols-3 gap-4">
+			<label v-for="value in types">
+				{{ value }}
+				<UInput :field="type" type="radio" name="type" :value="value" />
 			</label>
 		</div>
 	</div>
 
-	<Toaster :toast="CustomToast" :position="position.value" />
+	<Toaster :toast="ToastComponent" :position="position.value" />
 </template>
 
 <script setup lang="ts">
 import { UInput, useField } from '@vuetils/form';
-import type { ToastPosition } from '@vuetils/toast';
-import { Toaster, toast } from '@vuetils/toast';
-import CustomToast from './components/CustomToast.vue';
+import type { ToastPosition, ToastType } from '@vuetils/toast';
+import { ToastComponent, Toaster, addToast } from '@vuetils/toast';
 
 const positions: ToastPosition[] = [
 	'top-left',
@@ -28,10 +36,16 @@ const positions: ToastPosition[] = [
 	'bottom-right',
 ];
 
+const types: ToastType[] = ['success', 'error', 'loading'];
+
 const position = useField<ToastPosition>('bottom-center');
+const type = useField<ToastType>('success');
 
-function addToast() {
-	toast.success(Date.now() + '', { autoClose: false });
+function onClick() {
+	addToast(Date.now() + '', {
+		type: type.value,
+		autoClose: false,
+	});
 }
 </script>
 

packages/playground/src/main.ts

@@ -1,3 +1,4 @@
+import '@unocss/reset/tailwind.css';
 import '@vuetils/toast/style.css';
 import 'virtual:uno.css';
 import { createApp } from 'vue';