@inkline/inkline/composables/modals/prompt.js

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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.usePrompt = usePrompt;
var _IButton = require("@inkline/inkline/components/IButton");
var _IInput = require("@inkline/inkline/components/IInput");
var _i18n = require("@inkline/inkline/i18n");
var _utils = require("@grozav/utils");
var _vue = require("vue");
var _builder = require("@inkline/inkline/composables/modals/builder");
var _composables = require("@inkline/inkline/composables");
var _IForm = require("@inkline/inkline/components/IForm");
var _IFormGroup = require("@inkline/inkline/components/IFormGroup");
var _IFormError = require("@inkline/inkline/components/IFormError");
function usePrompt() {
  const modalService = (0, _builder.useModalBuilder)();
  return options => new Promise((resolve, reject) => {
    const id = (0, _utils.uid)("prompt");
    const {
      schema,
      form,
      validate
    } = (0, _composables.useForm)(options.schema || {
      input: {
        validators: ["required"]
      }
    });
    const disabled = (0, _vue.computed)(() => schema.value.invalid || schema.value.pristine);
    modalService.show({
      id,
      type: "prompt",
      onClose: () => reject(new Error("Prompt cancelled")),
      header: options.title,
      body: options.body || (0, _vue.h)("div", [(0, _vue.h)("p", options.message), (0, _vue.h)(_IForm.IForm, {
        modelValue: schema,
        "onUpdate:modelValue"(value) {
          schema.value = value;
        }
      }, () => [...(options.inputs ?? [(0, _vue.h)(_IFormGroup.IFormGroup, {}, () => [(0, _vue.h)(_IInput.IInput, {
        name: "input",
        placeholder: "Enter a value...",
        ...options.inputProps
      }), (0, _vue.h)(_IFormError.IFormError, {
        for: "input"
      })])])])]),
      footer: options.footer || (0, _vue.markRaw)((0, _vue.defineComponent)({
        setup() {
          return () => (0, _vue.h)("div", [(0, _vue.h)(_IButton.IButton, {
            onClick: () => {
              modalService.hide({
                id
              });
              reject(new Error("Prompt cancelled"));
            },
            ...options.cancelButtonProps
          }, () => options.cancelButtonText ?? (0, _i18n.translate)("modals.cancel")), (0, _vue.h)(_IButton.IButton, {
            onClick: async () => {
              await validate();
              if (schema.value.valid) {
                modalService.hide({
                  id
                });
                resolve(form.value);
              }
            },
            disabled: disabled.value,
            color: "primary",
            ...options.confirmButtonProps
          }, () => options.confirmButtonText ?? (0, _i18n.translate)("modals.confirm"))]);
        }
      })),
      ...options
    });
  });
}