feat: version 1.0.0 (#21)

client/components/Notification.vue

@@ -0,0 +1,34 @@
+<script setup lang='ts'>
+const show = ref(false)
+const icon = ref<string | undefined>()
+const text = ref<string | undefined>()
+const classes = ref<string | undefined>()
+
+provideNotificationFn((data) => {
+  text.value = data.message
+  icon.value = data.icon
+  classes.value = data.classes ?? 'text-green'
+  show.value = true
+  setTimeout(() => {
+    show.value = false
+  }, data.duration ?? 1500)
+})
+</script>
+
+<template>
+  <div
+    fixed left-0 right-0 top-0 z-999 text-center
+    :class="show ? '' : 'pointer-events-none overflow-hidden'"
+  >
+    <div
+      border="~ base"
+      flex="~ inline gap2"
+      m-3 inline-block items-center rounded px-4 py-1 transition-all duration-300 bg-base
+      :style="show ? {} : { transform: 'translateY(-300%)' }"
+      :class="[show ? 'shadow' : 'shadow-none', classes]"
+    >
+      <div v-if="icon" :class="icon" />
+      <div>{{ text }}</div>
+    </div>
+  </div>
+</template>