Dialog component for Alpine.js

• @tasvet

MIT

Demo link : Click here

Github : Click here

Install alpinjs-dialog with npm

  npm install alpinejs gsap alpinjs-dialog
  or
  yarn add alpinejs gsap alpinjs-dialog

import :

  import Alpine from 'alpinejs';
  import dialog from "alpinjs-dialog";

  Alpine.plugin(dialog);
  Alpine.start();

  <template x-dialog="dialogName">
    <h1>Hello Dialog</h1>
    <p>Dialog is working!</p>
  </template>
  ...
  <button @click="$dialog('dialogName').open()">Show Dialog</button>
  // or
  this.$dialog("dialogName").open({
      addClass: ["custom-class-1", "custom-class-2"], //class as array
      data: null, // pass data into dialog
      config: {
        width: "500px", // dialog width
        height: "200px", // dialog height
        position: "center", // center , left, right, top, bottom
        backdrop: true //set true click away to close
        blur: 13, //set true to blur overlay,
        animate: {
          enter: 0.2, // seconds
          leave: 0.2, // seconds
        },
      },
      props: {
        click: this.counter.bind(this), // dialog props
      },
      afterOpen: (dialog) => {
        // callback after dialog open
        console.log("after dialog opened", dialog);
      },
      beforeClose: (dialog) => {
        // callback before dialog close
        console.log("before dialog close", dialog);
      },
      afterClose: (dialog) => {
        // callback after dialog close
        console.log("after dialog closed", dialog);
      }
    });

    // get data from dialog v1.0.54 or higher
    let data = this.$dialog("dialogName").data;

    // get data from dialog v1.0.53 or lower
    let data = this.$dialog("dialogName").data();

    // close dialog
    this.$dialog("dialogName").close(/* return something after close here */);

    // close dialog with validation
    this.$dialog("dialogName").validClose(() => {
      // return true to close dialog
      return true;
    });

    //event listener
    this.$dialog("dialogName")
      .target
      .addEventListener("dialogReady", (e) => {
          // dialog is ready
          console.log("dialogReady", e.detail);
        }
      );

     this.$dialog("dialogName")
      .target
      .addEventListener("dialogClose", (e) => {
          // dialog is closed
          console.log("dialogClosed", e.detail);
        }
      );

    // props
    this.$dialog("dialogName").props.click(1);

    // static config
    <template
        x-dialog="dialogName"
        width="1000px"
        height="500px"
        position="center"
        blur="3"
        animate-enter="0.5"
        animate-leave="0.2"
      >
      ....
    </template>