@saasmakers/ui 0.1.49 → 0.1.50

package/app/components/bases/BaseAlert.vue

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import type { BaseAlert } from '../../types/bases'
+import { Preferences } from '@capacitor/preferences'
+
+const props = withDefaults(defineProps<BaseAlert>(), {
+  closingId: '',
+  isClosable: false,
+  size: 'base',
+  status: 'info',
+  text: '',
+})
+
+const emit = defineEmits<{
+  close: [event: MouseEvent]
+}>()
+
+const { t } = useI18n()
+
+const isClosed = ref(false)
+
+const buttonColor = computed((): BaseColor => {
+  if (props.status === 'error') {
+    return 'red'
+  }
+  else if (props.status === 'success') {
+    return 'green'
+  }
+  else if (props.status === 'warning') {
+    return 'orange'
+  }
+
+  return 'indigo'
+})
+
+onBeforeMount(async () => {
+  if (props.closingId) {
+    const { value } = await Preferences.get({ key: `alerts:${props.closingId}` })
+
+    isClosed.value = value === 'true'
+  }
+})
+
+async function onClose(event: MouseEvent) {
+  isClosed.value = true
+
+  if (props.closingId) {
+    await Preferences.set({
+      key: `alerts:${props.closingId}`,
+      value: 'true',
+    })
+  }
+
+  emit('close', event)
+}
+</script>
+
+<template>
+  <div
+    v-if="!isClosed"
+    class="relative flex flex-col gap-2.5 border rounded p-3 text-center"
+    :class="{
+      'border-red-600 dark:border-red-400 text-red-600 dark:text-red-400': status === 'error',
+      'border-indigo-600 dark:border-indigo-400 text-indigo-600 dark:text-indigo-400': status === 'info',
+      'border-green-600 dark:border-green-400 text-green-600 dark:text-green-400': status === 'success',
+      'border-orange-600 dark:border-orange-400 text-orange-600 dark:text-orange-400': status === 'warning',
+    }"
+  >
+    <BaseText
+      v-if="text"
+      :size="size"
+    >
+      {{ text }}
+    </BaseText>
+
+    <div
+      v-if="$slots.buttons || isClosable"
+      class="flex flex-col items-center justify-center gap-2 sm:flex-row"
+    >
+      <slot name="buttons" />
+
+      <BaseButton
+        v-if="isClosable"
+        :color="buttonColor"
+        :icon="getIcon('closeCircle')"
+        light
+        size="xs"
+        :text="t('closeThisMessage')"
+        @click="onClose"
+      />
+    </div>
+
+    <slot v-else />
+  </div>
+</template>
+
+  <i18n lang="json">
+  {
+    "en": {
+      "closeThisMessage": "Close this message"
+    },
+    "fr": {
+      "closeThisMessage": "Fermer ce message"
+    },
+    "ja": {
+      "closeThisMessage": "このメッセージを閉じる"
+    }
+  }
+  </i18n>

package/app/types/bases.d.ts

@@ -27,6 +27,14 @@ export type BaseStatus
     | 'success'
     | 'warning'
 
+export interface BaseAlert {
+  closingId?: string
+  isClosable?: boolean
+  size?: BaseSize
+  status?: BaseStatus
+  text?: BaseTextText
+}
+
 export interface BaseBordered {
   background?: BaseBackground
   borderColor?: BaseBorderedColor

package/app/types/global.d.ts

@@ -5,6 +5,7 @@ declare global {
   type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
 
   // Bases
+  type BaseAlert = Bases.BaseAlert
   type BaseBackground = Bases.BaseBackground
   type BaseBordered = Bases.BaseBordered
   type BaseBorderedColor = Bases.BaseBorderedColor

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -30,6 +30,7 @@
     "nuxt": "4.2.1"
   },
   "dependencies": {
+    "@capacitor/preferences": "7.0.2",
     "@nuxt/icon": "2.1.0",
     "@nuxtjs/color-mode": "3.5.2",
     "@nuxtjs/i18n": "10.2.0",