README.md

@tok/ui useAlerts

useCase to show Web Alerts

Important

useAlerts won't work outside setup components

Usage

Simple

<script setup lang="ts">
import { useAlerts } from '@tok/ui/use/alerts';

const alertsService = useAlerts();

alertsService.show('Hello!');
</script>

Error

<script setup lang="ts">
import { useAlerts } from '@tok/ui/use/alerts';

const alertsService = useAlerts();

alertsService.show('Error :(', {
  type: 'error',
});
</script>

"Telegram Like"

<script setup lang="ts">
import { useAlerts } from '@tok/ui/use/alerts';

const alertsService = useAlerts();

alertsService.show('Error :(', {
  type: 'telegram',
});
</script>

Available options

<script setup lang="ts">
import { useAlerts } from '@tok/ui/use/alerts';

const alertsService = useAlerts();

alertsService.show('Error :(', {
  // default: success
  // type?: 'success' | 'error' | 'telegram' | string;
  //
  // default: true
  // autoClose?: boolean | number;
  //
  // default: true
  // hasClose?: boolean;
  //
  // data?: T;
  //
  // onClose?: () => void;
});
</script>

Use with component

<script setup lang="ts">
import { useAlerts } from '@tok/ui/use/alerts';
import AlertContent from './AlertContent.vue'

const alertsService = useAlerts();

alertsService.show(AlertContent, {
  data: {
    hello: 'hello!'
  },
  onClose: () => {
    alertsService.show('Closed!')
  };
});
</script>

<!-- AlertContent.vue -->
<template>
  <div>{{ context.data.hello }}</div>
  <button @click="context.close">Close alert</button>
</template>

<script setup lang="ts">
import { AlertContextProps } from '@tok/ui/components/Alert';

defineProps<
  AlertContextProps<{
    hello: string;
  }>
>();
</script>

Other

<script setup lang="ts">
import { useAlerts } from '@tok/ui/use/alerts';

const alertsService = useAlerts();

const id = alertsService.show('Hello');
alertsService.close(id);

alertsService.show('Hello');
alertsService.closeLast();
</script>