?? GreyFile

?? GreyFile — Mystic File Browser

Current path: home/webdevt/prestashop17/modules/blockwishlist/_dev/front/js/components/Toast/

?? Go up: /home/webdevt/prestashop17/modules/blockwishlist/_dev/front/js/components

?? Editing: Toast.vue

<template>
  <div
    class="wishlist-toast"
    :class="[{ isActive: active }, type]"
  >
    <p class="wishlist-toast-text">
      {{ text }}
    </p>
  </div>
</template>

export default {
    name: 'Button',
    props: {
      renameWishlistText: {
        type: String,
        required: true,
      },
      addedWishlistText: {
        type: String,
        required: true,
      },
      deleteWishlistText: {
        type: String,
        required: true,
      },
      createWishlistText: {
        type: String,
        required: true,
      },
      deleteProductText: {
        type: String,
        required: true,
      },
      copyText: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        text: '',
        active: false,
        timeout: null,
        type: 'basic',
      };
    },
    mounted() {
      /**
       * Register to an even so every components can show toast
       */
      EventBus.$on('showToast', (event) => {
        if (event.detail.message) {
          if (this[event.detail.message]) {
            this.text = this[event.detail.message];
          } else {
            this.text = event.detail.message;
          }
        }

this.active = true;

if (this.timeout) {
          clearTimeout(this.timeout);
        }

this.timeout = setTimeout(() => {
          this.active = false;
          this.timeout = null;
        }, 2500);

this.type = event.detail.type ? event.detail.type : 'basic';
      });
    },
  };
</script>

&.success {
        background-color: #69b92d;
        border-color: #69b92d;

.wishlist-toast-text {
          color: white;
        }
      }

&.error {
        background-color: #b9312d;
        border-color: #b9312d;

.wishlist-toast-text {
          color: white;
        }
      }

&.isActive {
        transform: translateY(0);
        pointer-events: all;
        opacity: 1;
      }

&-text {
        color: #232323;
        font-size: 0.875rem;
        letter-spacing: 0;
        line-height: 1.1875rem;
        margin-bottom: 0;
      }
    }
  }
</style>

?? index.js | ?? Edit | ??? Delete
?? Toast.vue | ?? Edit | ??? Delete