@ironsource/shared-ui 2.1.6-rc.3 → 2.1.6-rc.30

package/src/components/dialog/v4/DialogV4.vue2.js

@@ -0,0 +1,155 @@
+import { defineComponent as A, openBlock as o, createBlock as c, Teleport as w, createVNode as b, Transition as I, withCtx as u, unref as e, createElementBlock as m, createElementVNode as C, mergeProps as s, renderSlot as k, createTextVNode as f, toDisplayString as B, createCommentVNode as d } from "vue";
+import { NOOP as V } from "@vue/shared";
+import T from "../../typography/v4/Typography.vue.js";
+import N from "../../button/v4/ButtonV4.vue.js";
+import p from "../../button/v4/IconButtonV4.vue.js";
+import { Reason as g } from "../common/Reason.js";
+import { dialogCommon as D } from "../common/Dialog.common.js";
+import { DialogTestIdModifiers as l } from "../../../testids/index.js";
+import { useTestIdAttrs as P } from "../../../utils/testIds.js";
+import { useMagicKeys as R, whenever as $ } from "@vueuse/core";
+const S = {
+  key: 0,
+  class: "container light-theme-v4"
+}, F = { class: "title" }, U = {
+  key: 1,
+  class: "footer"
+}, Q = /* @__PURE__ */ A({
+  __name: "DialogV4",
+  props: {
+    modelValue: { type: Boolean },
+    content: { default: null },
+    title: { default: "" },
+    subtitle: { default: "" },
+    appendToBody: { type: Boolean, default: !0 },
+    size: { default: "small" },
+    showBackdrop: { type: Boolean, default: !0 },
+    closeDelay: { default: 0 },
+    openDelay: { default: 0 },
+    escapeToClose: { type: Boolean, default: !0 },
+    closeOnClickOutside: { type: Boolean, default: !1 },
+    beforeClose: { type: Function, default: null },
+    showCloseButton: { type: Boolean, default: !0 },
+    showFooter: { type: Boolean, default: !0 },
+    saveButtonLabel: { default: "Save" },
+    saveButtonLoading: { type: Boolean, default: !1 },
+    saveButtonColor: { default: "primary" },
+    cancelButtonLabel: { default: "Cancel" },
+    cancelButtonColor: { default: "default" },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue", "open", "close", "save", "cancel"],
+  setup(t, { emit: v }) {
+    const i = t, { escape: L } = R(), a = P(i.testId, l), { visible: h, handleClose: y } = D(i, v);
+    $(L, () => {
+      h.value && i.escapeToClose && !i.saveButtonLoading && y(g.Escape);
+    });
+    const E = () => {
+      const { closeOnClickOutside: r, saveButtonLoading: n } = i;
+      r && !n ? y(g.Backdrop) : V();
+    };
+    return (r, n) => (o(), c(w, {
+      to: "body",
+      disabled: !t.appendToBody
+    }, [
+      b(I, null, {
+        default: u(() => [
+          e(h) ? (o(), m("div", S, [
+            C("div", s({
+              class: ["dialog", [`dialog--${t.size}`]]
+            }, e(a)[e(l).WRAPPER]), [
+              t.title || t.subtitle || t.showCloseButton ? (o(), m("header", s({
+                key: 0,
+                class: "header"
+              }, e(a)[e(l).HEADER]), [
+                C("div", F, [
+                  k(r.$slots, "header", {}, () => [
+                    t.title ? (o(), c(e(T), {
+                      key: 0,
+                      variant: "h3"
+                    }, {
+                      default: u(() => [
+                        f(B(t.title), 1)
+                      ]),
+                      _: 1
+                    })) : d("", !0),
+                    t.subtitle ? (o(), c(e(T), {
+                      key: 1,
+                      class: "subtitle",
+                      variant: "body1"
+                    }, {
+                      default: u(() => [
+                        f(B(t.subtitle), 1)
+                      ]),
+                      _: 1
+                    })) : d("", !0)
+                  ], !0)
+                ]),
+                t.showCloseButton ? (o(), c(e(p), s({
+                  key: 0,
+                  class: "close-button",
+                  "icon-name": "x",
+                  disabled: t.saveButtonLoading
+                }, e(a)[e(l).ACTION_CLOSE], {
+                  onClick: n[0] || (n[0] = (O) => e(y)(e(g).CloseButton))
+                }), null, 16, ["disabled"])) : d("", !0)
+              ], 16)) : d("", !0),
+              C("div", s({ class: "content" }, e(a)[e(l).CONTENT]), [
+                k(r.$slots, "default", {}, () => [
+                  t.content ? (o(), c(e(T), {
+                    key: 0,
+                    variant: "body1"
+                  }, {
+                    default: u(() => [
+                      f(B(t.content), 1)
+                    ]),
+                    _: 1
+                  })) : d("", !0)
+                ], !0)
+              ], 16),
+              t.showFooter ? (o(), m("footer", U, [
+                C("div", s({ class: "action-buttons" }, e(a)[e(l).ACTION_BUTTONS_WRAPPER]), [
+                  k(r.$slots, "footer", {}, () => [
+                    b(e(N), s({
+                      class: "form-action",
+                      variant: "outlined",
+                      color: t.cancelButtonColor,
+                      disabled: t.saveButtonLoading
+                    }, e(a)[e(l).CANCEL_BUTTON], {
+                      onClick: n[1] || (n[1] = (O) => v("cancel"))
+                    }), {
+                      default: u(() => [
+                        f(B(t.cancelButtonLabel), 1)
+                      ]),
+                      _: 1
+                    }, 16, ["color", "disabled"]),
+                    b(e(N), s({
+                      class: "form-action",
+                      loading: t.saveButtonLoading,
+                      color: t.saveButtonColor
+                    }, e(a)[e(l).SAVE_BUTTON], {
+                      onClick: n[2] || (n[2] = (O) => v("save"))
+                    }), {
+                      default: u(() => [
+                        f(B(t.saveButtonLabel), 1)
+                      ]),
+                      _: 1
+                    }, 16, ["loading", "color"])
+                  ], !0)
+                ], 16)
+              ])) : d("", !0)
+            ], 16),
+            t.showBackdrop ? (o(), m("div", s({
+              key: 0,
+              class: "dialog-backdrop"
+            }, e(a)[e(l).BACKDROP], { onClick: E }), null, 16)) : d("", !0)
+          ])) : d("", !0)
+        ]),
+        _: 3
+      })
+    ], 8, ["disabled"]));
+  }
+});
+export {
+  Q as default
+};

package/src/components/dropdown/common/Dropdown.common.js

@@ -0,0 +1,336 @@
+import { useToggle as me } from "../../../composables/useToggle.js";
+import { ref as n, computed as r, watch as m, useSlots as Pe, toRaw as A, nextTick as N, provide as Te, onMounted as we } from "vue";
+import { isObjectInArray as W } from "../../../utils/array.js";
+import { objectsEqual as xe } from "../../../utils/object.js";
+import { useClamp as Ie, useVirtualList as De, onClickOutside as Y } from "@vueuse/core";
+import { Mode as P, Type as _, DropdownContext as Ne } from "./DropdownContext.js";
+import { pxToRem as Re } from "../../../utils/style.js";
+import { useEditableContext as Ee } from "../../table-cells/common/EditableContext.js";
+const Ue = (l, O, b) => {
+  const Z = (e, t) => l.multi ? W(e, t) : A(e) === t;
+  let k;
+  ((e) => {
+    e[e.None = 0] = "None", e[e.Next = 1] = "Next", e[e.Previous = -1] = "Previous", e[e.NextPage = 10] = "NextPage", e[e.PrevPage = -10] = "PrevPage";
+  })(k || (k = {}));
+  const a = n(
+    l.selected
+  ), R = Ee(), u = r({
+    get() {
+      return R?.value?.value ?? a.value;
+    },
+    set(e) {
+      R.onChange?.(e), R.onClose?.(), O("update:selected", e);
+    }
+  });
+  m(
+    () => l.selected,
+    () => {
+      a.value = l.selected, v.value = l.selected;
+    }
+  );
+  const p = Pe(), w = n(null), g = n(null), V = n(null), E = n(null), H = n(null), x = n(null), F = n(), B = n(null), L = n(null), U = n(null), ee = 8, le = r(() => x.value ? x.value.getBoundingClientRect().height + ee + l.distance : 0), c = n([]), I = n(-1), T = n(""), v = n(l.selected || []), q = () => x.value?.focus(), [d, te, ae] = me({
+    disabled: l.disabled,
+    initialValue: l.defaultOpen
+  });
+  m(
+    () => l.disabled,
+    (e) => {
+      e !== void 0 && ae(e);
+    }
+  );
+  const G = (e) => {
+    ue.value = te(e);
+  }, ue = r({
+    get() {
+      return l.isOpen;
+    },
+    set(e) {
+      O("update:isOpen", e);
+    }
+  }), ne = r(() => s.value.length - 1), o = Ie(0, 0, ne), K = r(() => u.value ? l.displayValue(u.value) : ""), ie = (e) => {
+    if (!e.value.length && !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix)
+      return l.placeholder;
+    const t = !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix ? `${e.value.length} selected` : `${l.multiOptionsPlaceholderPrefix ?? ""}${e.value.length ?? "0"}${l.multiOptionsPlaceholderSuffix ?? ""}`;
+    return e.value.length == 1 && l.displayValue ? l.displayValue(e.value[0]) : t;
+  }, re = r(() => {
+    if (!l.multi)
+      return u.value ? l.displayValue(u.value) : l.placeholder;
+    if (Array.isArray(a.value))
+      return ie(a);
+  }), $ = r(() => {
+    if (Array.isArray(a.value))
+      return a.value.length === s.value.length;
+  }), oe = r(() => !l.multi || !Array.isArray(a.value) ? !1 : a.value.length > 0 && a.value.length < s.value.length), M = (e) => {
+    T.value = e;
+  }, se = r(() => {
+    const e = A(v.value), t = {
+      selected: [],
+      notSelected: []
+    };
+    return A(l.options).forEach((y) => {
+      const f = e.includes(y) ? "selected" : "notSelected";
+      t[f].push(y);
+    }), [].concat(t.selected, t.notSelected);
+  }), s = r(() => {
+    const e = Array.isArray(v.value) && l.multi && b.VERSION === 4 ? se.value : l.options;
+    return l.onSearch ? e.filter((t) => l.onSearch(t, T.value)) : e;
+  }), ce = r(() => c.value[0]?.hasSubtitle), X = r(() => i.mode === P.Multi), j = r(
+    () => ce.value ? b.MULTILINE_LIST_HEIGHT : b.LIST_HEIGHT
+  ), {
+    list: z,
+    containerProps: J,
+    wrapperProps: ve,
+    scrollTo: D
+  } = De(s, {
+    itemHeight: j.value,
+    overscan: 2
+  });
+  m(
+    () => l.isOpen,
+    (e) => {
+      G(e);
+    }
+  ), m([I], async () => {
+    await N();
+  }), m(
+    [d, o, I],
+    async ([e], [t]) => {
+      d.value && (await N(), I.value !== -1 && e !== t && setTimeout(() => {
+        l.multi && b.VERSION === 4 || D(I.value);
+      }), o.value && setTimeout(() => {
+        D(o.value);
+      }));
+    }
+  ), m(T, () => {
+    D(0);
+  });
+  const h = (e, t = !1) => {
+    l.disabled || (G(e), N(() => {
+      d.value && O("opened"), d.value || O("closed"), w.value && t && w.value.focus();
+    }));
+  };
+  m(d, (e) => {
+    if (e) {
+      X.value && Array.isArray(u.value) && (v.value = A(u.value).slice());
+      return;
+    }
+    q();
+  });
+  const de = () => {
+    if ($.value) {
+      a.value = [];
+      return;
+    }
+    if (Array.isArray(a.value)) {
+      if (a.value.length === s.value.length) {
+        a.value = [];
+        return;
+      }
+      a.value = s.value, O("selectAll");
+    }
+  }, fe = () => {
+    de(), b.VERSION !== 4 && (u.value = a.value);
+  }, ge = (e = !0) => {
+    a.value = [], e && (u.value = [], v.value = [], O("clear"));
+  }, C = (e, t) => {
+    if (e = A(e), c.value[t]?.disabled)
+      return;
+    if (I.value = t, i.mode !== P.Multi) {
+      l.keepOpen || h(!1), i.goToOption(
+        0
+        /* None */
+      ), u.value = e, M(""), q(), i.type === _.Search && g.value && (g.value.value = l.displayValue(e));
+      return;
+    }
+    if (!Array.isArray(a.value))
+      return;
+    g.value?.focus();
+    const S = A(a.value);
+    if (W(S, e)) {
+      a.value = S.filter(
+        (f) => !xe(f, e)
+      );
+      return;
+    } else {
+      a.value = [...S, e];
+      return;
+    }
+  }, he = (e) => c.value[e]?.disabled, i = {
+    activeIndex: o,
+    options: c,
+    selectedOption: u,
+    labelRef: H,
+    activeOption: E,
+    listRef: w,
+    clearable: l.clearable,
+    type: p.input ? _.Search : _.Dropdown,
+    mode: l.multi ? P.Multi : P.Single,
+    query: T,
+    selectedValue: K,
+    toggle: h,
+    disabled: l.disabled,
+    open: d,
+    mandatory: l.mandatory,
+    size: l.size,
+    placeholder: l.placeholder,
+    select: C,
+    clearSelection: () => {
+      M(""), u.value = i.mode === P.Single ? null : [], v.value = i.mode === P.Single ? null : [], g.value && (g.value.value = "");
+    },
+    search: M,
+    goToOption: async (e) => {
+      if (!d.value)
+        return;
+      let t = o.value + e;
+      const y = c.value.filter(
+        (f) => f.disabled
+      ).length, S = s.value.length - y;
+      for (t > S && (t = S + 1); ; ) {
+        if (!c.value[t]?.disabled) {
+          E.value = s.value[t], o.value = t;
+          return;
+        }
+        if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!he(o.value)) {
+          E.value = s.value[t], o.value = t;
+          return;
+        }
+      }
+    },
+    registerInput: (e) => {
+      g.value = e.value;
+    },
+    registerOption: (e, t, y) => {
+      c.value = [...c.value, { id: e, disabled: t, hasSubtitle: y }];
+    },
+    unRegisterOption(e) {
+      c.value = c.value.filter((t) => t.id !== e);
+    }
+  };
+  Te(Ne, i), Y(
+    w,
+    () => {
+      d.value && Q();
+    },
+    {
+      ignore: [
+        x,
+        B,
+        L,
+        U,
+        g,
+        J.ref
+      ]
+    }
+  );
+  const ye = () => {
+    g.value && (g.value.value = i.query.value = "");
+  };
+  we(async () => {
+    l.autoFocus && (await N(), setTimeout(() => {
+      V.value.focus();
+    })), i.goToOption(0);
+  });
+  const Se = () => {
+    u.value = a.value, Array.isArray(u.value) && (v.value = A(u.value).slice()), O("apply", u.value), h(!1), ye();
+  }, Q = () => {
+    X.value && Array.isArray(v.value) && (u.value = A(v.value).slice()), T.value = "", h(!1);
+  }, be = (e) => {
+    if (!l.disableKeyboardEvents)
+      switch (e.key) {
+        case "Space":
+        case "Enter":
+        case "ArrowUp":
+        case "ArrowDown":
+          h(!0), e.preventDefault();
+      }
+  }, Ae = (e) => {
+    if (!l.disableKeyboardEvents)
+      switch (e.key) {
+        case "ArrowUp": {
+          i.goToOption(
+            -1
+            /* Previous */
+          ), e.preventDefault(), e.stopPropagation();
+          break;
+        }
+        case "ArrowDown": {
+          i.goToOption(
+            1
+            /* Next */
+          ), e.preventDefault(), e.stopPropagation();
+          break;
+        }
+        case "Escape": {
+          h(!1), e.preventDefault();
+          break;
+        }
+        case "PageUp": {
+          i.goToOption(
+            10
+            /* NextPage */
+          ), e.preventDefault();
+          break;
+        }
+        case "PageDown": {
+          i.goToOption(
+            -10
+            /* PrevPage */
+          ), e.preventDefault();
+          break;
+        }
+        case "Enter": {
+          if (!d.value) {
+            h(!0);
+            return;
+          }
+          C(s.value[o.value], o.value), i.mode === P.Single && !l.keepOpen && h(!1), e.preventDefault();
+          break;
+        }
+      }
+  }, Oe = r(() => {
+    const e = z.value.length, t = l.multi && l.showSelectAll ? 1 : 0, y = e > b.MAX_NUMBER_OF_OPTIONS, S = e + t;
+    let f = y ? b.MAX_NUMBER_OF_OPTIONS + 0.1 : S;
+    return l.noResultsText && f === 0 && (f = f + 1), Re(
+      f * j.value + b.PADDING_PX
+    );
+  });
+  return {
+    onKeydown: Ae,
+    location: le,
+    open: d,
+    toggleMenu: h,
+    onButtonKeydown: be,
+    displayedValue: re,
+    labelRef: H,
+    query: T,
+    containerProps: J,
+    calculateTableHeight: Oe,
+    wrapperProps: ve,
+    filteredOptions: s,
+    allSelected: $,
+    isIndeterminate: oe,
+    onSelectAll: fe,
+    virtualOptions: z,
+    isSelected: Z,
+    selectedOption: u,
+    selectedOptionPrevious: v,
+    selectedValue: K,
+    onSelect: C,
+    activeIndex: o,
+    onCancel: Q,
+    onApply: Se,
+    scrollTo: D,
+    onClickOutside: Y,
+    listRef: w,
+    buttonRef: x,
+    apply: B,
+    cancel: L,
+    el: V,
+    triggerRef: F,
+    clearAll: U,
+    onClearAllSelections: ge
+  };
+};
+export {
+  Ue as dropdownCommon
+};

package/src/components/dropdown/v3/Dropdown.vue.js

@@ -0,0 +1,8 @@
+import o from "./Dropdown.vue2.js";
+/* empty css               *//* empty css               */import _ from "../../../../_virtual/_plugin-vue_export-helper.js";
+console.log('scoped// import "../../../Dropdown.vue_vue_type_style_index_0_scoped_aaa8c4bb_lang.css"; //*');
+console.log('global// import "../../../Dropdown.vue_vue_type_style_index_1_lang.css";  //');
+const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-aaa8c4bb"]]);
+export {
+  a as default
+};