silencesys / silentbox

A lightbox inspired Vue.js component.
https://silentbox.rocek.dev
MIT License
296 stars 51 forks source link

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

Open svossen opened 1 year ago

svossen commented 1 year ago

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>

https://github.com/silencesys/silentbox/assets/5097018/b9f69740-f12d-40ce-94c1-f3e93fa76aa1