Non-Polite Mother

    @styless-ui/modal
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    @styless-ui/modal

     

    Zero Built-in Style UI JS Library.

     


     

    Install

    via npm

    npm install @styless-ui/modal --save

    via yarn

    yarn add @styless-ui/modal

     

    Usage

    // import
    import { Modal } from "@styless-ui/modal";
    
    const modal = new Modal(modalElement, {
      disableScroll,
      trapFocus,
      closeOnEsc,
      onChange,
    });

    Options

    • disableScroll: boolean | BodyScrollOptions

    • trapFocus: boolean | BodyScrollOptions

    • closeOnEsc: boolean

      • Optional
      • Defaults to true
    • onChange: (element: HTMLElement, isOpen: boolean) => void

      • Optional
      • Change State Handler

    Modal Instance Methods

    • open: () => void

      • A function to open the Modal.
    • close: () => void

      • A function to close the Modal.
    • dispose: () => void

      • cleanup function.

     

    Example

    <section class="section" style="height: 120vh">
      <h2 class="title">Modal</h2>
      <button class="button" data-modal-open-trigger>open</button>
      <div class="modal">
        <div class="modal-background" data-modal-close-trigger></div>
        <div class="modal-card">
          <header class="modal-card-head">
            <p class="modal-card-title">Modal title</p>
            <button
              class="delete"
              aria-label="close"
              data-modal-close-trigger
            ></button>
          </header>
          <section class="modal-card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
          </section>
          <footer class="modal-card-foot">
            <button class="button is-success" data-modal-close-trigger>
              Save changes
            </button>
            <button class="button" data-modal-close-trigger>Cancel</button>
          </footer>
        </div>
      </div>
    </section>
    import { Modal } from "@styless-ui/modal";
    
    const modalElement = document.querySelector(".modal");
    
    if (modalElement != null && modalElement instanceof HTMLElement) {
      const modal = new Modal(modalElement, {
        disableScroll: true,
        trapFocus: true,
        closeOnEsc: true,
        onChange: (element: HTMLElement, isOpen: boolean): void => {
          if (isOpen) {
            element.classList.add("is-active");
          } else {
            element.classList.remove("is-active");
          }
        },
      });
    
      document.addEventListener("click", (event: Event): void => {
        const { target } = event;
    
        if (!(target instanceof HTMLElement)) {
          // Not HTML Element
          return;
        }
    
        if ("modalCloseTrigger" in target.dataset) {
          // on Click Close Modal trigger
          modal.close();
          event.preventDefault();
        }
    
        if ("modalOpenTrigger" in target.dataset) {
          // on Click Close Modal trigger
          modal.open();
          event.preventDefault();
        }
      });
    }

     

    Licence

    This project is licensed under MIT license.

     

    Created and maintained by

    @yuki0410_ 🇯🇵

    Install

    npm i @styless-ui/modal

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    13.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • yuki0410