silencesys/silentbox

silentbox-is-opened class isn’t removed after closing silentbox

Opened this issue · 0 comments

I’m using silentbox 3.0.4 in a Nuxt 3 app. When I open the silentbox and then close it with the close button or the escape key, the class silentbox-is-opened isn’t removed from the body element. The silentbox-overlay-hidden event isn’t fired either. I attached a screencap of this.

plugins/silent-box.ts:

import VueSilentbox from "vue-silentbox";
import "vue-silentbox/dist/style.css";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSilentbox);
});

app.vue (with options API, I can’t get silentbox working with composition API)

<template>
  <button type="button" @click.native="openSilentbox">Open silentbox</button>
  <silent-box
    @silentbox-overlay-hidden="hideTest"
    @silentbox-overlay-opened="openTest"
  />
</template>

<script>
export default {
  data() {
    return {
      images: [
        {
          src: "https://placehold.co/600x400",
        },
      ],
    };
  },
  methods: {
    openSilentbox() {
      this.$silentbox.open(this.images[0]);
    },
    hideTest() {
      console.log("hide");
    },
    openTest() {
      console.log("open");
    },
  },
};
</script>
Kapture.2023-08-23.at.16.49.10.mp4