@ironsource/shared-ui 2.0.0-rc.3 → 2.0.0-test.2

package/components/dialog/Dialog.vue.js

@@ -1,208 +1,7 @@
-import { defineComponent, useCssVars, ref, computed, watch, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, unref, normalizeClass, createElementVNode, normalizeStyle, withKeys, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementBlock } from 'vue';
-import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component';
-import { useTimeoutFn } from '@vueuse/core';
-import Text from '../typography/Text.vue.js';
-import { NOOP } from '@vue/shared';
-import { Reason } from './Reason.vue.js';
-import { DialogTestIdModifiers } from '../../testids/index.vue.js';
-/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-import Icon from '../icon/v3/Icon.vue.js';
-/* empty css                                                                   */import IconButton from '../button/v3/IconButton.vue.js';
-/* empty css                                                                               */import 'floating-vue';
-/* empty css                                                      *//* empty css                                                                         *//* empty css                                                        */
-import "../../Dialog.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = ["data-testid"];
-const _hoisted_2 = ["data-testid"];
-const _hoisted_3 = ["data-testid"];
-const _hoisted_4 = ["data-testid"];
-const _hoisted_5 = { class: "placeholder" };
-const _hoisted_6 = {
-  key: 1,
-  class: "footer"
+import o from "./Dialog.vue2.js";
+/* empty css             */import _ from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Dialog.vue_vue_type_style_index_0_scoped_4c5a0438_lang.css"; //*');
+const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-4c5a0438"]]);
+export {
+  a as default
 };
-const _hoisted_7 = ["data-testid"];
-const _hoisted_8 = ["data-testid"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Dialog",
-  props: {
-    appendToBody: { type: Boolean, default: true },
-    content: { default: null },
-    width: { default: "" },
-    closeDelay: { default: 0 },
-    openDelay: { default: 0 },
-    escapeToClose: { type: Boolean, default: true },
-    showBackdrop: { type: Boolean, default: true },
-    headerBorder: { type: Boolean, default: true },
-    closeOnClickOutside: { type: Boolean, default: false },
-    modelValue: { type: Boolean },
-    beforeClose: { type: Function, default: null },
-    title: { default: "" },
-    showCloseButton: { type: Boolean, default: true },
-    themeClass: { default: "" },
-    testId: { default: "" }
-  },
-  emits: ["update:modelValue", "open", "close"],
-  setup(__props, { emit }) {
-    const props = __props;
-    useCssVars((_ctx) => ({
-      "453b645a": __props.width
-    }));
-    const visible = ref(false);
-    let openTimer = void 0;
-    let closeTimer = void 0;
-    const doClose = (reason) => {
-      visible.value = false;
-      emit("close", reason);
-      emit("update:modelValue", false);
-    };
-    const doOpen = () => {
-      visible.value = true;
-      emit("open");
-    };
-    const close = (reason) => {
-      openTimer?.();
-      closeTimer?.();
-      if (props.closeDelay && props.closeDelay > 0) {
-        ({ stop: closeTimer } = useTimeoutFn(
-          () => doClose(reason),
-          props.closeDelay
-        ));
-        return;
-      }
-      doClose(reason);
-    };
-    const open = () => {
-      closeTimer?.();
-      openTimer?.();
-      if (props.openDelay && props.openDelay > 0) {
-        ({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay));
-        return;
-      }
-      doOpen();
-    };
-    const inlineStyle = computed(() => props.width ? { width: props.width } : {});
-    watch(
-      () => props.modelValue,
-      (val) => {
-        if (val) {
-          open();
-          return;
-        }
-        if (visible.value) {
-          close(Reason.Other);
-        }
-      }
-    );
-    function handleClose(reason) {
-      function hide(shouldCancel) {
-        if (shouldCancel) {
-          return;
-        }
-        emit("close", reason);
-        visible.value = false;
-      }
-      if (props.beforeClose) {
-        props.beforeClose(hide);
-        return;
-      }
-      close(reason);
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(Teleport, {
-        to: "body",
-        disabled: !__props.appendToBody
-      }, [
-        createVNode(Transition, null, {
-          default: withCtx(() => [
-            visible.value ? (openBlock(), createBlock(unref(UseFocusTrap), {
-              key: 0,
-              class: normalizeClass(["container", __props.themeClass])
-            }, {
-              default: withCtx(() => [
-                createElementVNode("div", {
-                  class: "modal",
-                  style: normalizeStyle(unref(inlineStyle)),
-                  "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).WRAPPER}`,
-                  onKeydown: _cache[1] || (_cache[1] = withKeys(($event) => __props.escapeToClose ? handleClose(unref(Reason).Escape) : unref(NOOP)(), ["esc"]))
-                }, [
-                  createElementVNode("header", {
-                    class: normalizeClass(["header", { "header--bordered": __props.headerBorder }]),
-                    "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).HEADER}`
-                  }, [
-                    __props.headerBorder ? renderSlot(_ctx.$slots, "header", { key: 0 }, () => [
-                      createVNode(Text, { strong: "" }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(__props.title), 1)
-                        ]),
-                        _: 1
-                      })
-                    ], true) : createCommentVNode("", true),
-                    __props.showCloseButton ? (openBlock(), createBlock(unref(IconButton), {
-                      key: 1,
-                      class: "button close-button",
-                      size: "md",
-                      theme: "secondary",
-                      variant: "colorized",
-                      "icon-name": "close",
-                      "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).ACTION_CLOSE}`,
-                      onClick: _cache[0] || (_cache[0] = ($event) => handleClose(unref(Reason).CloseButton))
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(Icon, {
-                          "font-size": "md",
-                          name: "close"
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["data-testid"])) : createCommentVNode("", true)
-                  ], 10, _hoisted_2),
-                  !__props.headerBorder ? (openBlock(), createElementBlock("div", {
-                    key: 0,
-                    class: "header--secondary",
-                    "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).HEADER_SECONDARY}`
-                  }, [
-                    renderSlot(_ctx.$slots, "header", {}, () => [
-                      createVNode(Text, { strong: "" }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(__props.title), 1)
-                        ]),
-                        _: 1
-                      })
-                    ], true)
-                  ], 8, _hoisted_3)) : createCommentVNode("", true),
-                  createElementVNode("div", {
-                    class: normalizeClass(["content", { "content--bordered": __props.headerBorder }]),
-                    "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).CONTENT}`
-                  }, [
-                    renderSlot(_ctx.$slots, "default", {}, () => [
-                      createElementVNode("div", _hoisted_5, toDisplayString(__props.content), 1)
-                    ], true)
-                  ], 10, _hoisted_4),
-                  _ctx.$slots["footer"] ? (openBlock(), createElementBlock("footer", _hoisted_6, [
-                    createElementVNode("div", {
-                      class: "action-buttons",
-                      "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).ACTION_BUTTONS_WRAPPER}`
-                    }, [
-                      renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-                    ], 8, _hoisted_7)
-                  ])) : createCommentVNode("", true)
-                ], 44, _hoisted_1),
-                __props.showBackdrop ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: "backdrop",
-                  "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).BACKDROP}`,
-                  onClick: _cache[2] || (_cache[2] = ($event) => __props.closeOnClickOutside ? handleClose(unref(Reason).Backdrop) : unref(NOOP)())
-                }, null, 8, _hoisted_8)) : createCommentVNode("", true)
-              ]),
-              _: 3
-            }, 8, ["class"])) : createCommentVNode("", true)
-          ]),
-          _: 3
-        })
-      ], 8, ["disabled"]);
-    };
-  }
-});
-var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-51cc0b9a"]]);
-
-export { Dialog as default };

package/components/dialog/Dialog.vue2.js

@@ -0,0 +1,178 @@
+ import "../../Dialog.vue_vue_type_style_index_0_scoped_4c5a0438_lang.css"; import { defineComponent as A, useCssVars as S, ref as P, computed as g, watch as z, openBlock as s, createBlock as v, Teleport as F, createVNode as m, Transition as K, withCtx as i, unref as o, normalizeClass as T, createElementVNode as u, normalizeStyle as H, withKeys as U, renderSlot as h, createTextVNode as w, toDisplayString as k, createCommentVNode as n, createElementBlock as D } from "vue";
+import { UseFocusTrap as W } from "@vueuse/integrations/useFocusTrap/component";
+import { useTimeoutFn as I } from "@vueuse/core";
+import E from "../typography/Text.vue.js";
+import { NOOP as N } from "@vue/shared";
+import { Reason as y } from "./Reason.js";
+import "../button/v3/Button.vue.js";
+import x from "../button/v3/IconButton.vue.js";
+import "../button/v3/ScrollButton.vue.js";
+import L from "../icon/Icon.vue.js";
+import { DialogTestIdModifiers as l } from "../../testids/index.js";
+const M = ["data-testid"], Y = ["data-testid"], j = ["data-testid"], q = ["data-testid"], G = { class: "placeholder" }, J = {
+  key: 1,
+  class: "footer"
+}, Q = ["data-testid"], X = ["data-testid"], ie = /* @__PURE__ */ A({
+  __name: "Dialog",
+  props: {
+    appendToBody: { type: Boolean, default: !0 },
+    content: { default: null },
+    width: { default: "" },
+    closeDelay: { default: 0 },
+    openDelay: { default: 0 },
+    escapeToClose: { type: Boolean, default: !0 },
+    showBackdrop: { type: Boolean, default: !0 },
+    headerBorder: { type: Boolean, default: !0 },
+    closeOnClickOutside: { type: Boolean, default: !1 },
+    modelValue: { type: Boolean },
+    beforeClose: { type: Function, default: null },
+    title: { default: "" },
+    showCloseButton: { type: Boolean, default: !0 },
+    themeClass: { default: "" },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue", "open", "close"],
+  setup(e, { emit: c }) {
+    const d = e;
+    S((t) => ({
+      "0024f728": e.width
+    }));
+    const r = P(!1);
+    let C, B;
+    const O = (t) => {
+      r.value = !1, c("close", t), c("update:modelValue", !1);
+    }, p = () => {
+      r.value = !0, c("open");
+    }, b = (t) => {
+      if (C?.(), B?.(), d.closeDelay && d.closeDelay > 0) {
+        ({ stop: B } = I(
+          () => O(t),
+          d.closeDelay
+        ));
+        return;
+      }
+      O(t);
+    }, R = () => {
+      if (B?.(), C?.(), d.openDelay && d.openDelay > 0) {
+        ({ stop: C } = I(() => p(), d.openDelay));
+        return;
+      }
+      p();
+    }, V = g(() => d.width ? { width: d.width } : {});
+    z(
+      () => d.modelValue,
+      (t) => {
+        if (t) {
+          R();
+          return;
+        }
+        r.value && b(y.Other);
+      }
+    );
+    function $(t) {
+      function a(f) {
+        f || (c("close", t), r.value = !1);
+      }
+      if (d.beforeClose) {
+        d.beforeClose(a);
+        return;
+      }
+      b(t);
+    }
+    return (t, a) => (s(), v(F, {
+      to: "body",
+      disabled: !e.appendToBody
+    }, [
+      m(K, null, {
+        default: i(() => [
+          r.value ? (s(), v(o(W), {
+            key: 0,
+            class: T(["container", e.themeClass])
+          }, {
+            default: i(() => [
+              u("div", {
+                class: "modal",
+                style: H(o(V)),
+                "data-testid": `${e.testId}-${o(l).WRAPPER}`,
+                onKeydown: a[1] || (a[1] = U((f) => e.escapeToClose ? $(o(y).Escape) : o(N)(), ["esc"]))
+              }, [
+                u("header", {
+                  class: T(["header", { "header--bordered": e.headerBorder }]),
+                  "data-testid": `${e.testId}-${o(l).HEADER}`
+                }, [
+                  e.headerBorder ? h(t.$slots, "header", { key: 0 }, () => [
+                    m(E, { strong: "" }, {
+                      default: i(() => [
+                        w(k(e.title), 1)
+                      ]),
+                      _: 1
+                    })
+                  ], !0) : n("", !0),
+                  e.showCloseButton ? (s(), v(o(x), {
+                    key: 1,
+                    class: "button close-button",
+                    size: "md",
+                    theme: "secondary",
+                    variant: "colorized",
+                    "icon-name": "close",
+                    "data-testid": `${e.testId}-${o(l).ACTION_CLOSE}`,
+                    onClick: a[0] || (a[0] = (f) => $(o(y).CloseButton))
+                  }, {
+                    default: i(() => [
+                      m(L, {
+                        "font-size": "md",
+                        name: "close"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["data-testid"])) : n("", !0)
+                ], 10, Y),
+                e.headerBorder ? n("", !0) : (s(), D("div", {
+                  key: 0,
+                  class: "header--secondary",
+                  "data-testid": `${e.testId}-${o(l).HEADER_SECONDARY}`
+                }, [
+                  h(t.$slots, "header", {}, () => [
+                    m(E, { strong: "" }, {
+                      default: i(() => [
+                        w(k(e.title), 1)
+                      ]),
+                      _: 1
+                    })
+                  ], !0)
+                ], 8, j)),
+                u("div", {
+                  class: T(["content", { "content--bordered": e.headerBorder }]),
+                  "data-testid": `${e.testId}-${o(l).CONTENT}`
+                }, [
+                  h(t.$slots, "default", {}, () => [
+                    u("div", G, k(e.content), 1)
+                  ], !0)
+                ], 10, q),
+                t.$slots.footer ? (s(), D("footer", J, [
+                  u("div", {
+                    class: "action-buttons",
+                    "data-testid": `${e.testId}-${o(l).ACTION_BUTTONS_WRAPPER}`
+                  }, [
+                    h(t.$slots, "footer", {}, void 0, !0)
+                  ], 8, Q)
+                ])) : n("", !0)
+              ], 44, M),
+              e.showBackdrop ? (s(), D("div", {
+                key: 0,
+                class: "backdrop",
+                "data-testid": `${e.testId}-${o(l).BACKDROP}`,
+                onClick: a[2] || (a[2] = (f) => e.closeOnClickOutside ? $(o(y).Backdrop) : o(N)())
+              }, null, 8, X)) : n("", !0)
+            ]),
+            _: 3
+          }, 8, ["class"])) : n("", !0)
+        ]),
+        _: 3
+      })
+    ], 8, ["disabled"]));
+  }
+});
+export {
+  ie as default
+};

package/components/dialog/Reason.js

@@ -0,0 +1,4 @@
+var t = /* @__PURE__ */ ((r) => (r[r.Escape = 0] = "Escape", r[r.Backdrop = 1] = "Backdrop", r[r.CloseButton = 2] = "CloseButton", r[r.Other = 3] = "Other", r))(t || {});
+export {
+  t as Reason
+};