<script>
import { useToast } from "@inkline/inkline/composables";
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const toast = useToast();
    function showTopLeftToast() {
      toast.show({
        title: "Top-left Toast",
        message: "This toast is positioned at the top-left corner of the screen",
        position: "top-left"
      });
    }
    function showTopToast() {
      toast.show({
        title: "Top Toast",
        message: "This toast is positioned at the top of the screen",
        position: "top"
      });
    }
    function showTopRightToast() {
      toast.show({
        title: "Top-right Toast",
        message: "This toast is positioned at the top-right corner of the screen",
        position: "top-right"
      });
    }
    function showRightToast() {
      toast.show({
        title: "Right Toast",
        message: "This toast is positioned at the right of the screen",
        position: "right"
      });
    }
    function showBottomRightToast() {
      toast.show({
        title: "Bottom-right Toast",
        message: "This toast is positioned at the bottom-right corner of the screen",
        position: "bottom-right"
      });
    }
    function showBottomToast() {
      toast.show({
        title: "Bottom Toast",
        message: "This toast is positioned at the bottom of the screen",
        position: "bottom"
      });
    }
    function showBottomLeftToast() {
      toast.show({
        title: "Bottom-left Toast",
        message: "This toast is positioned at the bottom-left corner of the screen",
        position: "bottom-left"
      });
    }
    function showLeftToast() {
      toast.show({
        title: "Left Toast",
        message: "This toast is positioned at the left of the screen",
        position: "left"
      });
    }
    return {
      showTopLeftToast,
      showTopToast,
      showTopRightToast,
      showRightToast,
      showBottomRightToast,
      showBottomToast,
      showBottomLeftToast,
      showLeftToast
    };
  }
});
</script>
<template>
    <IButton @click="showTopLeftToast">Show top-left toast</IButton>
    <IButton @click="showTopToast">Show top toast</IButton>
    <IButton @click="showTopRightToast">Show top-right toast</IButton>
    <IButton @click="showRightToast">Show right toast</IButton>
    <IButton @click="showBottomRightToast">Show bottom-right toast</IButton>
    <IButton @click="showBottomToast">Show bottom toast</IButton>
    <IButton @click="showBottomLeftToast">Show bottom-left toast</IButton>
    <IButton @click="showLeftToast">Show left toast</IButton>
</template>
