daniel-knights / vue-dk-toast Goto Github PK

In my app I created an "achievement" feature. Everytime a user gets an achievement, a toast pops up. I'd like to have the image of the achievement in the toast, by using a component.
Could it be possible to have something like this?

              toast("<Achievement type='category' /> Achievement unlocked!", {
                styles: {
                  color: '#fff',
                  backgroundColor: '#0a0',
                },

I'm so glad I found this. Vue toast libraries are absurdly bloated. lightweight is all I need to see.

Bless you 🙏🏼

Hello,
Trying to test this plugin I created a small file src/views/test.vue :

<template>
  <div>
  
    stringVar:{{ stringVar}}
  
  </div>
</template>

<script>
  import app from './../App.vue'
  import { ref, onMounted } from 'vue'
  import DKToast from 'vue-dk-toast'
  console.log('app::')
  console.log(app)
  
  app.use(DKToast)

  export default {
    name: 'testPage',
    components: {},

    setup () {
      let stringVar = ref('Init value')
      const testInit = async () => {
        console.log('testInit emitter::')
        // this.$toast('Simple!')
        this.$toast('Simple!', {
          duration: 1000,
          // Position not yet supported
          styles: {
            borderRadius: '25px'
          },
          // Any valid HTML, intended for icons
          slotLeft: '<i class="fa fa-user"></i>', // Add icon to left
          slotRight: '<i class="fa fa-thumbs-up"></i>' // Add icon to right
        })
      }

      onMounted(testInit)

      return {
        stringVar
      }
    } // setup () {

  }
</script>

and got error in console : https://imgur.com/a/IzV4Igo
I suppose that I got invalid app, I show in in a printscreen above.
Which way is correct ?

    "vue": "^3.0.0",
    "vue-dk-toast": "^1.1.4",

It would be great to align the toast at the center (at least horizontally).

Hi there,

Really liking this plugin. Was just wondering how I can get it to work in a separate typescript file.

I am very new to Vue, and I followed the instructions: https://github.com/Daniel-Knights/vue-dk-toast#typescript-support

But my file doesn't recognise the setup() function and const toast is undefined.

Would really appreciate it if I knew how to get it to run in a separate file. The idea is to make 2 functions with 2 toasts and a message parameter. Because I want a succes toast, and error toast that can be used in multiple places :) Or maybe add a parameter to pass a class to the HTML element?

I don't know if it's a bug or on purpose, but when I set "positionX: 'center'" locally, it doesn't work, I have to set it when I "use" DJToast in the main.js file.
It could be great to be able to change the position of the toast locally.
Maybe using a wrapper with flex and changing the flex property when called locally could do the trick.

Hey!

Is there any way to stop the duration when hovering over the toast container?

Thanks!

Hi

first of all: Really nice libriary!

then: is it possible to change z-index of dk__toast-container class to a higher value? Having a Modal the toast message pop-ups in the background.

Many thanks :)

I'm using Tailwindcss. I was trying to add more than one class to the "class" property in toast().
I get the error:
Uncaught (in promise) DOMException: String contains an invalid character dkToast.umd.min.js:191:377

Here's my code:

const toast = inject('$toast')
toast('simple', {
  duration: false,
  positionY: 'top',
  positionX: 'right',
  disableClick: false,
  class: 'bg-gray-100 border-2 border-gray-200 text-gray-800 p-4 rounded-sm shadow-md',
  max: 6,
})

Getting rid of the spaces resolves the issue, but doesn't allow me to have more than one class.
Am I using this property in the wrong way?

Hi, is it possible to change the position of the toast on mobile ?

Really liking this lightweight library, just what I need.
I have a problem with Typescript and Vue3 though. My compiler gives the following error:
Error: src/main.ts(11,9): error TS2345: Argument of type 'import().Plugin' is not assignable to parameter of type 'import().Plugin'.

This is when importing the library: app.use(DKToast)

Changing the declaration of DKToast to use Plugin_2 instead of Plugin takes care of the problem. Not sure why since Plugin_2 is exported as Plugin in Vue. Any ideas?

1. Looking how vue-dk-toast works I see that
   styles.color/backgroundColor do not work locally, but only globally(in src/main.js), when
   toast is set for app object. Could you please tro make these options locally?
2. Can you please implement title( apart from text)?
3. Can you please implement custom html for text and title?
   Thanks in advance!

.

Currently, I'm using SVG to show an icon. But it would be nice to be able to inject a component into the slot.

Example:

if (toast) toast('Blue', {
    duration: false,
    positionY: 'top',
    positionX: 'right',
    disableClick: false,
    class: ['bg-blue-400', 'rounded-sm'],
    slotLeft: '<svg className="max-w-6 max-h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>'
})

Would become:

import { XCircleIcon } from '@heroicons/vue/solid'
toast('Blue', {
    duration: false,
    positionY: 'top',
    positionX: 'right',
    disableClick: false,
    class: ['bg-blue-400', 'rounded-sm'],
    slotLeft: '<XCircleIcon class="max-h-5 max-w-5" />'
})

For the moment it's only possible to create a link, but it's not the same behaviour in the navigation than "router-link".
Could it be possible to add this feature? For example with something like this:

    link: {
        href: 'https://vue-dk-toast.netlify.app/',
        router-link: true
    },

Styles don't seem to work. I've used the class attribute to add multiple classes. None of them show up.
I would prefer this to having to use the style attribute and write out all the styles.

Here's an example:

import { inject } from 'vue'
import { Toast } from 'vue-dk-toast'

const toast = inject<Toast>('$toast')

if (toast) toast('Gray', {
    duration: false,
    positionY: 'top',
    positionX: 'right',
    disableClick: false,
    class: ['bg-gray-200', 'rounded-sm']
})
if (toast) toast('Blue', {
    duration: false,
    positionY: 'top',
    positionX: 'right',
    disableClick: false,
    class: ['bg-blue-400', 'rounded-sm']
})

Hello,
It would be great to customize z-index, as I have some elements overlaying the toasts.
Thanks for the work.