@inkline/inkline/composables/modals/confirm.mjs

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

import { IButton } from "@inkline/inkline/components/IButton";
import { translate } from "@inkline/inkline/i18n";
import { uid } from "@grozav/utils";
import { h } from "vue";
import { useModalBuilder } from "@inkline/inkline/composables/modals/builder";
export function useConfirm() {
  const builder = useModalBuilder();
  return (options) => new Promise((resolve) => {
    const id = uid("confirm");
    builder.show({
      id,
      type: "confirm",
      onClose: () => resolve(false),
      header: options.title,
      body: options.message,
      footer: options.footer || h("div", [
        h(
          IButton,
          {
            onClick: () => {
              builder.hide({ id });
              resolve(false);
            },
            ...options.cancelButtonProps
          },
          () => options.cancelButtonText ?? translate("modals.cancel")
        ),
        h(
          IButton,
          {
            onClick: () => {
              builder.hide({ id });
              resolve(true);
            },
            color: "primary",
            ...options.confirmButtonProps
          },
          () => options.confirmButtonText ?? translate("modals.confirm")
        )
      ]),
      ...options
    });
  });
}