Popups

This plugin provides an easy way to launch popups on-demand. It also has an asynchronous method that can be used when you expect a return value when the popup is closed.

const Modal = defineComponent({
  setup() {
    const popups = usePopups();

    // Create controller or let "popups" create one automatically
    const controller = TUsePopupController.create<ResponseType>();

    const onHideSuccess = () => {
      return controller.hide({ value: "success" });
    };

    const onHideError = () => {
      return controller.hide({ value: "error" });
    };

    const launch = async () => {
      const response = await popups.launchModal({
        controller: controller,
        options: {
          window: true,
          // Allow closing the modal only when the value is "success"
          onBeforeHide: async (value) => {
            if (value === "success") {
              return true;
            }
          },
        },
        builder: () => (
          <div class="bg-white h-full flex-1 py-3 px-3">
            <TButton color="primary" onClick={onHideSuccess} block>
              Success
            </TButton>
            <TDivider class="my-2" />
            <TButton color="danger" onClick={onHideError} block>
              Close
            </TButton>
          </div>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Modal
      </TButton>
    );
  },
});

Drawer

const Drawer = defineComponent({
  setup() {
    const popups = usePopups();

    // Create controller or let "popups" create one automatically
    const controller = TUsePopupController.create<ResponseType>();

    const onHideSuccess = () => {
      return controller.hide({ value: "success" });
    };

    const onHideError = () => {
      return controller.hide({ value: "error" });
    };

    const launch = async () => {
      const response = await popups.launchDrawer({
        controller: controller,
        builder: () => (
          <div class="bg-white h-full flex-1 py-3 px-3">
            <TButton color="primary" onClick={onHideSuccess} block>
              Success
            </TButton>
            <TDivider class="my-2" />
            <TButton color="danger" onClick={onHideError} block>
              Close
            </TButton>
          </div>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Drawer
      </TButton>
    );
  },
});

const Menu = defineComponent({
  setup() {
    const popups = usePopups();

    // Create controller or let "popups" create one automatically
    const controller = TUsePopupController.create<ResponseType>();

    const onHideSuccess = () => {
      return controller.hide({ value: "success" });
    };

    const onHideError = () => {
      return controller.hide({ value: "error" });
    };

    const launch = async (event: MouseEvent) => {
      const response = await popups.launchMenu({
        controller: controller,
        event: event,
        builder: () => (
          <div class="bg-white w-full">
            <TButton color="primary" onClick={onHideSuccess} block>
              Success
            </TButton>
            <TDivider class="my-2" />
            <TButton color="danger" onClick={onHideError} block>
              Close
            </TButton>
          </div>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Menu
      </TButton>
    );
  },
});

Snackbar

const Snackbar = defineComponent({
  setup() {
    const popups = usePopups();

    // Create controller or let "popups" create one automatically
    const controller = TUsePopupController.create<ResponseType>();

    const onHideSuccess = () => {
      return controller.hide({ value: "success" });
    };

    const onHideError = () => {
      return controller.hide({ value: "error" });
    };

    const launch = async () => {
      const response = await popups.launchSnackbar({
        controller: controller,
        options: {
          design: "outlined",
        },
        builder: () => (
          <>
            <TButton color="primary" onClick={onHideSuccess}>
              Success
            </TButton>
            <TDivider class="mx-1" transparent vertical />
            <TButton color="danger" onClick={onHideError}>
              Close
            </TButton>
          </>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Snackbar
      </TButton>
    );
  },
});

Photoswipe

use-photoswipe

Popups

Menu

Table of Contents