@adyen/bento-vue2 0.10.0 → 0.10.1-2

package/dist/modal.js

@@ -0,0 +1,709 @@
+import "./assets/index13.css";
+import { defineComponent as S, ref as U, toRefs as E, computed as i, watch as q, onMounted as w } from "vue";
+import { B as W, a as C } from "./chunks/button.31b757d1.js";
+import { BentoTypography as M, BentoTypographyElement as T, BentoTypographyVariant as k } from "./typography.js";
+import { BentoDivider as K } from "./divider.js";
+import { B as Y } from "./chunks/index.8e9cdc73.js";
+import { h as f } from "./chunks/hasSlot.dceac207.js";
+import { u as j } from "./chunks/aria-label.ac9651a5.js";
+import { u as N } from "./chunks/i18n.8934ef6c.js";
+import { C as Q } from "./chunks/cross.db1f9177.js";
+import { G as H, a as J } from "./chunks/grid-layout.14423a2e.js";
+import { n as O } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as x, c as R } from "./chunks/button-actions.59406268.js";
+var D = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(D || {}), h = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(h || {}), y = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(y || {}), B = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(B || {}), p = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(p || {}), c = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))(c || {});
+const X = {
+  "en-US": {
+    ariaLabelFallback: "modal"
+  }
+}, Z = S({
+  i18n: { messages: X },
+  name: "base-modal",
+  components: { CrossIcon: Q, BentoTypography: M, BentoButton: W, BentoDivider: K, BentoFocusTrap: Y, GridLayout: H },
+  props: {
+    /**
+     * Defines whether the modal will be an alert modal
+     */
+    modalRole: {
+      type: String,
+      default: B.DIALOG
+    },
+    /**
+     * If set to true, it allows the modal to be closed by clicking outside of it
+     */
+    isDismissible: {
+      type: Boolean,
+      required: !0
+    },
+    /**
+     * Hides a cross icon on the right side of the title
+     */
+    hideCloseButton: {
+      type: Boolean,
+      required: !0
+    },
+    /**
+     * If provided, manages the padding of the whole modal container
+     */
+    customPadding: {
+      type: String,
+      default: null
+    },
+    /**
+     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
+     */
+    withColumnLayout: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.
+     */
+    columnsSize: {
+      type: String,
+      default: y.SMALLER
+    },
+    /**
+     * Controls the modal's state from the outside. Set it to true to open the modal
+     */
+    isOpen: {
+      type: Boolean,
+      required: !0
+    },
+    /**
+     * Sets the width of the modal
+     */
+    size: {
+      type: String,
+      default: h.SMALL
+    },
+    /**
+     * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
+     */
+    initiallyOpen: {
+      type: Boolean,
+      default: !1
+    },
+    overflowVisible: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [c.CLOSE_MODAL],
+  setup(e, { slots: t, emit: o }) {
+    const { t: a } = N(), n = U(null), { isOpen: l, customPadding: s, overflowVisible: u } = E(e), _ = i(
+      () => {
+        var g;
+        return f(t)("default") && t.default() ? (g = t.default()[0]) == null ? void 0 : g.text : null;
+      }
+    ), v = i(() => s.value ? { padding: s.value } : {}), b = i(
+      () => s.value ? { marginLeft: `-${s.value}`, width: `calc(100% + calc(${s.value} * 2))` } : {}
+    ), d = j({
+      label: _,
+      defaultFallback: a("ariaLabelFallback")
+    }), r = i(() => e.withColumnLayout && e.size === h.LARGE), m = () => {
+      n.value.showModal();
+    }, A = () => {
+      o(c.CLOSE_MODAL);
+    }, L = () => {
+      n.value.close(), A();
+    }, G = () => {
+      L();
+    }, z = ({ target: g }) => {
+      g && g.tagName === B.DIALOG.toUpperCase() && L();
+    }, P = i(() => ({
+      [`b-modal-base__container--${e.size}`]: e.size,
+      ["b-modal-base__container--visible"]: l.value,
+      ["b-modal-base__container--overflow-visible"]: u.value
+    })), V = i(() => ({
+      "b-modal-base__content--column-layout": r.value
+    })), F = i(() => ({
+      "b-modal-base__actions--column-layout": r.value
+    })), $ = i(() => e.columnsSize === y.SMALLER ? [{ small: 4, medium: 4, large: 4 }] : e.columnsSize === y.BIGGER ? [{ small: 8, medium: 8, large: 8 }] : [{ small: 6, medium: 6, large: 6 }]);
+    return q(
+      () => [l.value, n.value],
+      () => {
+        l.value && n.value ? m() : n.value && L();
+      },
+      { immediate: !0 }
+    ), w(() => {
+      l.value && n.value && m();
+    }), {
+      // Refs
+      modal: n,
+      computedAriaLabel: d,
+      // Handling the state
+      openModal: m,
+      closeModalOnClickOutside: z,
+      // Methods
+      onCloseButtonClick: G,
+      hasSlot: f(t),
+      emitCloseEvent: A,
+      // Styles
+      modalActionsConditionalClasses: F,
+      modalConditionalClasses: P,
+      modalContentConditionalClasses: V,
+      wrapperStyles: v,
+      dividerStyles: b,
+      hasColumnLayout: r,
+      computedColumnWidth: $,
+      // Enums
+      BentoButtonVariant: C,
+      BentoTypographyElement: T,
+      BentoTypographyVariant: k,
+      GridLayoutContainerType: J
+    };
+  }
+});
+var tt = function() {
+  var t = this, o = t._self._c;
+  return t._self._setupProxy, o("div", { staticClass: "b-modal-base" }, [o("dialog", { ref: "modal", staticClass: "b-modal-base__container", class: t.modalConditionalClasses, attrs: { role: t.modalRole, "aria-label": t.computedAriaLabel, open: t.initiallyOpen }, on: { click: function(a) {
+    t.isDismissible && t.closeModalOnClickOutside(a);
+  }, keydown: function(a) {
+    return !a.type.indexOf("key") && t._k(a.keyCode, "esc", 27, a.key, ["Esc", "Escape"]) ? null : t.emitCloseEvent.apply(null, arguments);
+  } } }, [o("bento-focus-trap", [o("div", { staticClass: "b-modal-base__wrapper", style: t.wrapperStyles }, [t.hasSlot("default") || !t.hideCloseButton ? o("div", { staticClass: "b-modal-base__header" }, [o("bento-typography", { staticClass: "b-modal-base__title", attrs: { "aria-label": "base modal title", el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.TITLE, stronger: "" } }, [t.hasSlot("default") ? t._t("default") : t._e()], 2), t.hideCloseButton ? t._e() : o("bento-button", { staticClass: "b-modal-base__close-button", attrs: { variant: t.BentoButtonVariant.TERTIARY, type: "button" }, on: { click: t.onCloseButtonClick } }, [o("cross-icon", { attrs: { "svg-title": "close" } })], 1)], 1) : t._e(), t.hasColumnLayout && t.hasSlot("default") ? o("bento-divider", { staticClass: "b-modal-base__divider", style: t.dividerStyles }) : t._e(), o("div", { staticClass: "b-modal-base__content", class: t.modalContentConditionalClasses }, [t.hasSlot("content") ? o("bento-typography", { attrs: { "aria-label": "base modal content", el: t.BentoTypographyElement.DIV, variant: t.BentoTypographyVariant.BODY, stronger: "" } }, [t.hasColumnLayout ? o("grid-layout", { staticClass: "b-modal-base__grid", attrs: { "column-width": t.computedColumnWidth, "container-type": t.GridLayoutContainerType.NORMAL }, scopedSlots: t._u([{ key: "col-1", fn: function() {
+    return [t._t("content-col-1")];
+  }, proxy: !0 }, { key: "col-2", fn: function() {
+    return [t._t("content-col-2")];
+  }, proxy: !0 }], null, !0) }) : t._t("content")], 2) : t._e()], 1), t.hasSlot("actions") ? o("div", { staticClass: "b-modal-base__actions-container" }, [t.hasColumnLayout ? o("bento-divider", { staticClass: "b-modal-base__divider", style: t.dividerStyles }) : t._e(), o("div", { staticClass: "b-modal-base__actions", class: t.modalActionsConditionalClasses, attrs: { "aria-label": "modal actions" } }, [t._t("actions")], 2)], 1) : t._e()], 1)])], 1)]);
+}, et = [], ot = /* @__PURE__ */ O(
+  Z,
+  tt,
+  et,
+  !1,
+  null,
+  "89e76b27",
+  null,
+  null
+);
+const I = ot.exports, nt = S({
+  name: "bento-modal-default",
+  components: { BaseModal: I, BentoButtonActions: x, BentoTypography: M },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Adds a cross icon on the right side of the alert
+     */
+    /**
+     * Controls the modal's state from the outside. Set it to true to open the modal
+     */
+    isOpen: {
+      type: Boolean,
+      required: !0
+    },
+    /**
+     * If set to true, it allows the modal to be closed by clicking outside of it
+     */
+    isDismissible: {
+      type: Boolean,
+      required: !0
+    },
+    /**
+     * If set to true, it will set overflow:visible to the modal, only recommended to be used with dropdown
+     */
+    overflowVisible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Hides a cross icon on the right side of the title
+     */
+    hideCloseButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the width of the modal
+     */
+    size: {
+      type: String,
+      required: !0
+    },
+    /**
+     * If provided, manages the padding of the whole modal container
+     */
+    customPadding: {
+      type: String,
+      default: null
+    },
+    /**
+     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
+     */
+    withColumnLayout: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.
+     */
+    columnsSize: {
+      type: String,
+      default: y.SMALLER
+    },
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     * But you may change the color of 1-st action to red with 'critial' key
+     * Not more than 3 action buttons can be provided
+     * Or 2 action buttons and 1 Label for them
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',2
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     * }]
+     * ```
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Text label that is displayed left to the action buttons
+     */
+    actionsLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * If passed - sets first button color to red
+     */
+    destructiveActions: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
+     */
+    initiallyOpen: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [c.CLOSE_MODAL],
+  setup(e, { slots: t, emit: o }) {
+    const { actions: a, destructiveActions: n } = E(e), l = i(() => {
+      const u = a.value.length < 3 ? a.value : a.value.slice(0, a.value.length - 1);
+      return n.value && (u[0].critical = !0), {
+        leftAligned: a.value.length === 3 ? [
+          {
+            ...a.value[a.value.length - 1],
+            variant: C.SECONDARY
+          }
+        ] : null,
+        rightAligned: u
+      };
+    }), s = () => {
+      o(c.CLOSE_MODAL);
+    };
+    return w(() => {
+      if (!(f(t)("content") || f(t)("content-col-1") && f(t)("content-col-2")))
+        throw new Error("Bento Modal default variant requires content slot or column slots");
+      if (e.actions && e.actions.length > 3)
+        throw new Error("Not more than 3 action buttons may be provided to Bento Modal default variant");
+      if (e.actionsLabel && e.actions && e.actions.length > 2)
+        throw new Error(
+          "Not more than 2 action buttons may be provided with actions label to Bento Modal default variant"
+        );
+    }), {
+      // Values
+      alignedActions: l,
+      // Methods
+      onCloseModal: s,
+      hasSlot: f(t),
+      // Enums
+      BentoButtonActionsLayout: R,
+      BentoTypographyElement: T,
+      BentoTypographyVariant: k
+    };
+  }
+});
+var at = function() {
+  var t = this, o = t._self._c;
+  return t._self._setupProxy, o("base-modal", { staticClass: "b-modal-default", attrs: { size: t.size, "hide-close-button": t.hideCloseButton, "custom-padding": t.customPadding, "is-dismissible": t.isDismissible, "is-open": t.isOpen, "overflow-visible": t.overflowVisible, "with-column-layout": t.withColumnLayout, "initially-open": t.initiallyOpen }, on: { "close-modal": t.onCloseModal }, scopedSlots: t._u([t.hasSlot("default") ? { key: "default", fn: function() {
+    return [t._t("default")];
+  }, proxy: !0 } : null, { key: "content-col-1", fn: function() {
+    return [t._t("content-col-1")];
+  }, proxy: !0 }, { key: "content-col-2", fn: function() {
+    return [t._t("content-col-2")];
+  }, proxy: !0 }, { key: "content", fn: function() {
+    return [t._t("content")];
+  }, proxy: !0 }, t.actions ? { key: "actions", fn: function() {
+    return [t._t("actions", function() {
+      return [t.actionsLabel ? o("bento-typography", { staticClass: "b-modal-base__title", attrs: { "aria-label": "base modal title", el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY, stronger: "" } }, [t._v(" " + t._s(t.actionsLabel) + " ")]) : t._e(), t.alignedActions.leftAligned ? o("bento-button-actions", { attrs: { actions: t.alignedActions.leftAligned, layout: t.BentoButtonActionsLayout.BUTTONS_START } }) : t._e(), o("bento-button-actions", { attrs: { actions: t.alignedActions.rightAligned, layout: t.BentoButtonActionsLayout.BUTTONS_END } })];
+    })];
+  }, proxy: !0 } : null], null, !0) });
+}, lt = [], st = /* @__PURE__ */ O(
+  nt,
+  at,
+  lt,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const it = st.exports, rt = {
+  "en-US": {
+    okButtonText: "OK"
+  }
+}, ut = S({
+  i18n: { messages: rt },
+  name: "bento-modal-dialog",
+  components: { BaseModal: I, BentoButtonActions: x },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Controls the modal's state from the outside. Set it to true to open the modal
+     */
+    isOpen: {
+      type: Boolean,
+      required: !0
+    },
+    /**
+     * If set to true, it allows the modal to be closed by clicking outside of it
+     */
+    isDismissible: {
+      type: Boolean,
+      required: !0
+    },
+    /**
+     * If set to true, it will set overflow:visible to the modal, only recommended to be used with dropdown
+     */
+    overflowVisible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets different action buttons styling and appearance
+     */
+    dialogType: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Text that is displayed in the content section of modal
+     */
+    content: {
+      type: String,
+      required: !0
+    },
+    /**
+     * List of actions that will be used to render the buttons.
+     * Only 1 action button is allowed for Modal Dialog
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',2
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }]
+     * ```
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
+     */
+    initiallyOpen: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [c.CLOSE_MODAL],
+  setup(e, { slots: t, emit: o }) {
+    const { t: a } = N(), { actions: n, dialogType: l } = E(e), s = () => {
+      o(c.CLOSE_MODAL);
+    }, u = () => {
+      s();
+    }, _ = i(() => [
+      {
+        title: a("okButtonText"),
+        event: u,
+        variant: C.SECONDARY
+      }
+    ]), v = i(() => {
+      var m;
+      const d = {
+        title: "Cancel",
+        event: u
+      }, r = (m = n == null ? void 0 : n.value) == null ? void 0 : m[0];
+      return l.value === p.DESTRUCTIVE ? r.critical = !0 : l.value === p.INFO && (r.variant = C.SECONDARY), [r, d];
+    }), b = i(() => ({
+      [`b-modal-dialog--${l.value}`]: l.value
+    }));
+    return w(() => {
+      var d, r;
+      if (!f(t)("default") || !e.content)
+        throw new Error("Bento Modal Dialog requires header title and content");
+      if (((d = n == null ? void 0 : n.value) == null ? void 0 : d.length) > 1)
+        throw new Error("Not more than 1 action button may be provided to Modal Dialog");
+      if (l.value !== p.ACKNOWLEDGEMENT && !(n != null && n.value))
+        throw new Error(
+          "Modal Dialog, except ACKNOWLEDGEMENT type, always has to contain one action button"
+        );
+      if (l.value === p.ACKNOWLEDGEMENT && ((r = n == null ? void 0 : n.value) != null && r.length))
+        throw new Error("Acknowledgement Modal Dialog does not accept action buttons");
+    }), {
+      // Values
+      dialogActions: v,
+      acknowledgementDialogActions: _,
+      // Methods
+      onCloseModal: s,
+      onCloseActionButton: u,
+      // Styles
+      modalDialogConditionalClasses: b,
+      // Enums
+      BentoModalRole: B,
+      BentoModalSize: h,
+      BentoButtonVariant: C,
+      BentoModalDialogType: p,
+      BentoButtonActionsLayout: R
+    };
+  }
+});
+var ct = function() {
+  var t = this, o = t._self._c;
+  return t._self._setupProxy, o("base-modal", { staticClass: "b-modal-dialog", class: t.modalDialogConditionalClasses, attrs: { "hide-close-button": !0, size: t.BentoModalSize.SMALL, "is-dismissible": t.isDismissible, "is-open": t.isOpen, "overflow-visible": t.overflowVisible, "modal-role": t.BentoModalRole.ALERT_DIALOG, "initially-open": t.initiallyOpen }, on: { "close-modal": t.onCloseModal }, scopedSlots: t._u([{ key: "default", fn: function() {
+    return [t._t("default")];
+  }, proxy: !0 }, { key: "content", fn: function() {
+    return [t._v(" " + t._s(t.content) + " ")];
+  }, proxy: !0 }, { key: "actions", fn: function() {
+    return [t.dialogType === t.BentoModalDialogType.ACKNOWLEDGEMENT ? o("bento-button-actions", { attrs: { actions: t.acknowledgementDialogActions, layout: t.BentoButtonActionsLayout.BUTTONS_END } }) : o("bento-button-actions", { attrs: { actions: t.dialogActions, layout: t.BentoButtonActionsLayout.BUTTONS_END } })];
+  }, proxy: !0 }], null, !0) });
+}, dt = [], mt = /* @__PURE__ */ O(
+  ut,
+  ct,
+  dt,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const ft = mt.exports, pt = S({
+  name: "bento-modal",
+  components: { BentoModalDefault: it, BentoModalDialog: ft },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Choose between default or dialog versions of modal
+     */
+    variant: {
+      type: String,
+      default: D.DEFAULT
+    },
+    // Shared Modal Default and Modal Default props
+    /**
+     * If set to true, it allows the modal to be closed by clicking outside of it
+     */
+    isDismissible: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * If set to true, it will set overflow:visible to the modal, only recommended to be used with dropdown
+     */
+    overflowVisible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Controls the modal's state from the outside. Set it to true to open the modal
+     */
+    isOpen: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',2
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     * }]
+     * ```
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    // Specific to Modal Default props
+    /**
+     * Hides a cross icon on the right side of the title
+     */
+    hideCloseButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the width of the modal
+     */
+    size: {
+      type: String,
+      default: h.SMALL
+    },
+    /**
+     * If provided, manages the padding of the whole modal container
+     */
+    customPadding: {
+      type: String,
+      default: null
+    },
+    /**
+     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
+     */
+    withColumnLayout: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.
+     */
+    columnsSize: {
+      type: String,
+      default: y.SMALLER
+    },
+    /**
+     * Text label that is displayed left to the action buttons
+     */
+    actionsLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * If passed - sets first button color to red
+     */
+    destructiveActions: {
+      type: Boolean,
+      default: !1
+    },
+    // Specific to Modal dialog props
+    /**
+     * Changes the visual styling of action buttons
+     */
+    dialogType: {
+      type: String,
+      default: p.CONFIRMATION
+    },
+    /**
+     * Text that will be displayed in the content section of Modal
+     */
+    content: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [c.CLOSE_MODAL],
+  setup(e, { slots: t, emit: o }) {
+    const {
+      variant: a,
+      hideCloseButton: n,
+      size: l,
+      isDismissible: s,
+      overflowVisible: u,
+      dialogType: _,
+      content: v,
+      customPadding: b,
+      actionsLabel: d,
+      destructiveActions: r,
+      withColumnLayout: m
+    } = E(e), A = i(
+      () => a.value === D.DEFAULT ? {
+        hideCloseButton: n.value,
+        size: l.value,
+        customPadding: b.value,
+        actionsLabel: d.value,
+        destructiveActions: r.value,
+        isDismissible: s.value ?? !0,
+        overflowVisible: u.value,
+        withColumnLayout: m.value
+      } : {
+        dialogType: _.value,
+        content: v.value,
+        isDismissible: s.value ?? !1,
+        overflowVisible: u.value
+      }
+    );
+    return {
+      onCloseModal: () => {
+        o(c.CLOSE_MODAL);
+      },
+      customProps: A,
+      hasSlot: f(t)
+    };
+  }
+});
+var yt = function() {
+  var t = this, o = t._self._c;
+  return t._self._setupProxy, o(t.variant, t._b({ tag: "component", staticClass: "b-modal", attrs: { "is-open": t.isOpen, actions: t.actions }, on: { "close-modal": t.onCloseModal }, scopedSlots: t._u([t.hasSlot("default") ? { key: "default", fn: function() {
+    return [t._t("default")];
+  }, proxy: !0 } : null, t.hasSlot("content-col-1") ? { key: "content-col-1", fn: function() {
+    return [t._t("content-col-1")];
+  }, proxy: !0 } : null, t.hasSlot("content-col-2") ? { key: "content-col-2", fn: function() {
+    return [t._t("content-col-2")];
+  }, proxy: !0 } : null, t.hasSlot("content") ? { key: "content", fn: function() {
+    return [t._t("content")];
+  }, proxy: !0 } : null], null, !0) }, "component", t.customProps, !1));
+}, _t = [], vt = /* @__PURE__ */ O(
+  pt,
+  yt,
+  _t,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const Tt = vt.exports;
+export {
+  Tt as BentoModal,
+  y as BentoModalColumnLayoutVariant,
+  p as BentoModalDialogType,
+  c as BentoModalEvent,
+  B as BentoModalRole,
+  h as BentoModalSize,
+  D as BentoModalVariant
+};
+//# sourceMappingURL=modal.js.map