@ironsource/shared-ui 1.4.2-rc.6 → 1.4.2-test.1

package/components/dropdown/Dropdown.vue2.js

@@ -0,0 +1,568 @@
+import { defineComponent as ze, computed as m, useSlots as De, ref as p, watch as x, nextTick as E, toRaw as O, provide as Ie, onMounted as Ve, openBlock as s, createElementBlock as c, normalizeClass as q, renderSlot as $, createVNode as h, unref as l, withCtx as f, Transition as xe, createElementVNode as T, createTextVNode as S, toDisplayString as P, createCommentVNode as r, createBlock as G, mergeProps as oe, withModifiers as ie, Fragment as $e, renderList as Pe, pushScopeId as Re, popScopeId as Ee } from "vue";
+import { useClamp as Me, useVirtualList as Ne, onClickOutside as Ke } from "@vueuse/core";
+import { Dropdown as Le } from "floating-vue";
+/* empty css                          */import B from "../typography/Text.vue.js";
+import { Mode as A, Type as j, DropdownContext as Fe } from "./DropdownContext.js";
+import { useToggle as He } from "../../composables/useToggle.js";
+import se from "../icon/Icon.vue.js";
+import ue from "../button/Button.vue.js";
+/* empty css                        *//* empty css                         *//* empty css                                   *//* empty css                       *//* empty css                           */import Ue from "./Option.vue.js";
+import qe from "../search/Search.vue.js";
+const Ge = (t) => (Re("data-v-c681a7ca"), t = t(), Ee(), t), je = ["tabindex"], Je = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"], Qe = {
+  key: 0,
+  class: "image-slot"
+}, We = { class: "angle-down" }, Xe = {
+  key: 0,
+  class: "dropdown-title"
+}, Ye = {
+  key: 0,
+  class: "dropdown-title__text"
+}, Ze = {
+  key: 0,
+  class: "no-result-container"
+}, _e = {
+  key: 1,
+  class: "loader"
+}, et = /* @__PURE__ */ Ge(() => /* @__PURE__ */ T("svg", {
+  width: "100",
+  height: "100",
+  viewBox: "0 0 100 100"
+}, [
+  /* @__PURE__ */ T("circle", {
+    cx: "50",
+    cy: "50",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "6",
+    r: "35",
+    "stroke-dasharray": "164.93361431346415 56.97787143782138"
+  }, [
+    /* @__PURE__ */ T("animateTransform", {
+      attributeName: "transform",
+      type: "rotate",
+      repeatCount: "indefinite",
+      dur: "1s",
+      values: "0 50 50;360 50 50",
+      keyTimes: "0;1"
+    })
+  ])
+], -1)), tt = { key: 2 }, lt = ["aria-selected", "aria-disabled", "onClick"], at = {
+  key: 0,
+  class: "actions"
+}, kt = /* @__PURE__ */ ze({
+  __name: "Dropdown",
+  props: {
+    modelValue: { default: null },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    mandatory: { type: Boolean, default: !1 },
+    helperText: { default: "" },
+    searchPlaceholder: { default: "" },
+    isOnTop: { type: Boolean, default: !1 },
+    multi: { type: Boolean, default: !1 },
+    title: { default: "" },
+    inlineSearch: { type: Boolean, default: !1 },
+    popperClass: { default: "" },
+    noResultsText: { default: "No results found" },
+    loading: { type: Boolean },
+    selected: { default: null },
+    showSelectAll: { type: Boolean },
+    defaultOpen: { type: Boolean, default: !1 },
+    showButtonOnOpen: { type: Boolean, default: !0 },
+    autoFocus: { type: Boolean, default: !1 },
+    distance: { default: 0 },
+    isOpen: { type: Boolean },
+    skidding: { default: 0 },
+    placement: { default: "bottom-start" },
+    clearable: { type: Boolean, default: !1 },
+    error: { default: "" },
+    size: { default: "lg" },
+    displayValue: null,
+    options: null,
+    onSearch: { type: Function, default: () => !0 },
+    theme: { default: "is-dropdown" },
+    container: { default: "body" },
+    flip: { type: Boolean, default: !0 },
+    keepOpen: { type: Boolean, default: !1 },
+    autoSize: { type: Boolean, default: !1 },
+    disableKeyboardEvents: { type: Boolean, default: !1 }
+  },
+  emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
+  setup(t, { expose: re, emit: C }) {
+    const n = t, de = 48, ce = 34, o = m({
+      get() {
+        return n.selected;
+      },
+      set(e) {
+        C("update:selected", e);
+      }
+    }), fe = De(), z = p(null), w = p(null), J = p(null), M = p(null), Q = p(null), D = p(null), W = p(null), X = p(null), pe = 8, ve = m(() => D.value?.getBoundingClientRect().height + pe + n.distance), b = p([]), I = p(-1), V = p(""), N = p([]), Y = () => D.value?.focus(), [i, ye, me] = He({
+      disabled: n.disabled,
+      initialValue: n.defaultOpen
+    });
+    x(
+      () => n.disabled,
+      (e) => {
+        e !== void 0 && me(e);
+      }
+    );
+    const Z = (e) => {
+      he.value = ye(e);
+    }, he = m({
+      get() {
+        return n.isOpen;
+      },
+      set(e) {
+        C("update:isOpen", e);
+      }
+    }), be = m(() => y.value.length - 1), v = Me(0, 0, be), ge = m(() => o.value ? n.displayValue(o.value) : ""), ke = (e) => e.value.length ? e.value.length <= 1 && n.displayValue ? n.displayValue(e.value[0]) : `${e.value.length} selected` : n.placeholder, _ = m(() => {
+      if (!n.multi)
+        return o.value ? n.displayValue(o.value) : n.placeholder;
+      if (Array.isArray(o.value))
+        return ke(o);
+    }), K = m(() => {
+      if (Array.isArray(o.value))
+        return o.value.length === y.value.length;
+    }), we = m(() => !n.multi || !Array.isArray(o.value) ? !1 : o.value.length > 0 && o.value.length < y.value.length), L = (e) => {
+      V.value = e;
+    }, y = m(
+      () => n.options.filter((e) => n.onSearch(e, V.value))
+    ), Se = m(() => b.value[0]?.hasSubtitle), ee = m(() => d.mode === A.Multi), {
+      list: te,
+      containerProps: le,
+      wrapperProps: Te,
+      scrollTo: F
+    } = Ne(y, {
+      itemHeight: () => Se.value ? de : ce
+    });
+    x(
+      () => n.isOpen,
+      (e) => {
+        Z(e);
+      }
+    ), x([I], async () => {
+      await E();
+    }), x(
+      [i, v, I],
+      async ([e], [a]) => {
+        i.value && (await E(), I.value !== -1 && e !== a && setTimeout(() => {
+          F(I.value);
+        }), v.value && setTimeout(() => {
+          F(v.value);
+        }));
+      }
+    );
+    const g = (e, a = !1) => {
+      n.disabled || (Z(e), E(() => {
+        i.value && C("opened"), i.value || C("closed"), z.value && a && z.value.focus();
+      }));
+    };
+    x(i, (e) => {
+      if (e) {
+        ee.value && Array.isArray(o.value) && (N.value = O(o.value).slice());
+        return;
+      }
+      Y();
+    });
+    const Oe = () => {
+      if (K.value) {
+        o.value = [];
+        return;
+      }
+      if (Array.isArray(o.value)) {
+        if (o.value.length === y.value.length) {
+          o.value = [];
+          return;
+        }
+        o.value = y.value;
+      }
+    }, R = (e, a) => {
+      if (e = O(e), b.value[a]?.disabled)
+        return;
+      if (I.value = a, d.mode !== A.Multi) {
+        n.keepOpen || g(!1), d.goToOption(
+          0
+          /* None */
+        ), o.value = e, L(""), Y(), d.type === j.Search && w.value && (w.value.value = n.displayValue(e));
+        return;
+      }
+      if (!Array.isArray(o.value))
+        return;
+      w.value?.focus();
+      const k = O(o.value);
+      if (k.includes(e)) {
+        o.value = k.filter((U) => U !== e);
+        return;
+      }
+      o.value = [.../* @__PURE__ */ new Set([...k, e])];
+    }, Be = (e) => b.value[e]?.disabled, d = {
+      activeIndex: v,
+      options: b,
+      selectedOption: o,
+      labelRef: Q,
+      activeOption: M,
+      listRef: z,
+      clearable: n.clearable,
+      type: fe.input ? j.Search : j.Dropdown,
+      mode: n.multi ? A.Multi : A.Single,
+      query: V,
+      selectedValue: ge,
+      toggle: g,
+      disabled: n.disabled,
+      open: i,
+      mandatory: n.mandatory,
+      size: n.size,
+      placeholder: n.placeholder,
+      select: R,
+      clearSelection: () => {
+        L(""), o.value = d.mode === A.Single ? null : [], w.value && (w.value.value = "");
+      },
+      search: L,
+      goToOption: async (e) => {
+        if (!i.value)
+          return;
+        let a = v.value + e;
+        const u = b.value.filter(
+          (U) => U.disabled
+        ).length, k = y.value.length - u;
+        for (a > k && (a = k + 1); ; ) {
+          if (!b.value[a]?.disabled) {
+            M.value = y.value[a], v.value = a;
+            return;
+          }
+          if ((e === 1 || e === 10) && (a = a + 1), (e === -1 || e === -10) && (a = a + -1), !!Be(v.value)) {
+            M.value = y.value[a], v.value = a;
+            return;
+          }
+        }
+      },
+      registerInput: (e) => {
+        w.value = e.value;
+      },
+      registerOption: (e, a, u) => {
+        b.value = [...b.value, { id: e, disabled: a, hasSubtitle: u }];
+      },
+      unRegisterOption(e) {
+        b.value = b.value.filter((a) => a.id !== e);
+      }
+    };
+    Ie(Fe, d), Ke(
+      z,
+      () => {
+        i.value && ae();
+      },
+      {
+        ignore: [D, W, X, w, le.ref]
+      }
+    );
+    const Ae = () => {
+      w.value && (w.value.value = d.query.value = "");
+    };
+    Ve(async () => {
+      n.autoFocus && (await E(), setTimeout(() => {
+        J.value.focus();
+      })), d.goToOption(0);
+    });
+    const Ce = () => {
+      C("apply", o.value), g(!1), Ae();
+    }, ae = () => {
+      ee.value && Array.isArray(N.value) && (o.value = O(N.value).slice()), g(!1);
+    }, ne = (e) => {
+      if (!n.disableKeyboardEvents)
+        switch (e.key) {
+          case "Space":
+          case "Enter":
+          case "ArrowUp":
+          case "ArrowDown":
+            g(!0), e.preventDefault();
+        }
+    }, H = (e) => {
+      if (!n.disableKeyboardEvents)
+        switch (e.key) {
+          case "ArrowUp": {
+            d.goToOption(
+              -1
+              /* Previous */
+            ), e.preventDefault(), e.stopPropagation();
+            break;
+          }
+          case "ArrowDown": {
+            d.goToOption(
+              1
+              /* Next */
+            ), e.preventDefault(), e.stopPropagation();
+            break;
+          }
+          case "Escape": {
+            g(!1), e.preventDefault();
+            break;
+          }
+          case "PageUp": {
+            d.goToOption(
+              10
+              /* NextPage */
+            ), e.preventDefault();
+            break;
+          }
+          case "PageDown": {
+            d.goToOption(
+              -10
+              /* PrevPage */
+            ), e.preventDefault();
+            break;
+          }
+          case "Enter": {
+            if (!i.value) {
+              g(!0);
+              return;
+            }
+            R(y.value[v.value], v.value), d.mode === A.Single && !n.keepOpen && g(!1), e.preventDefault();
+            break;
+          }
+        }
+    };
+    return re({
+      selectItem: R,
+      scrollTo: F
+    }), (e, a) => (s(), c("div", {
+      ref_key: "el",
+      ref: J,
+      class: q(["dropdown", { "dropdown--disabled": t.disabled }]),
+      tabindex: t.disabled ? -1 : 0,
+      onKeydown: H
+    }, [
+      $(e.$slots, "label", {}, void 0, !0),
+      h(l(Le), {
+        theme: t.theme,
+        "popper-class": [
+          t.popperClass,
+          t.autoSize ? "v-popper--theme-is-dropdown--auto-size" : null
+        ],
+        placement: t.placement,
+        skidding: t.isOnTop ? 0 : t.skidding,
+        distance: t.isOnTop ? -l(ve) : t.distance,
+        flip: t.flip,
+        triggers: [],
+        shown: !!l(i),
+        "auto-hide": !1,
+        container: t.container,
+        "auto-size": t.autoSize
+      }, {
+        popper: f(() => [
+          h(xe, null, {
+            default: f(() => [
+              T("div", {
+                ref_key: "listRef",
+                ref: z
+              }, [
+                t.inlineSearch || t.title ? (s(), c("div", Xe, [
+                  t.title ? (s(), c("div", Ye, [
+                    h(l(B), { strong: "" }, {
+                      default: f(() => [
+                        S(P(t.title), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])) : r("", !0),
+                  t.inlineSearch ? (s(), G(l(qe), {
+                    key: 1,
+                    modelValue: V.value,
+                    "onUpdate:modelValue": a[2] || (a[2] = (u) => V.value = u),
+                    placeholder: t.searchPlaceholder,
+                    class: "dropdown-title__search",
+                    variant: "transparent",
+                    size: "md",
+                    onKeydown: H
+                  }, null, 8, ["modelValue", "placeholder"])) : r("", !0)
+                ])) : r("", !0),
+                l(i) ? (s(), c("div", {
+                  key: 1,
+                  class: "dropdown",
+                  onKeydown: H
+                }, [
+                  $(e.$slots, "input-list", { open: l(i) }, void 0, !0),
+                  T("div", oe(l(le), {
+                    class: ["list-container", { "list-container--multi": t.multi }]
+                  }), [
+                    T("ul", oe(l(Te), {
+                      role: "listbox",
+                      class: ["list", { "list--multi": t.multi }]
+                    }), [
+                      !l(y).length && !t.loading ? (s(), c("li", Ze, [
+                        h(l(B), {
+                          size: "sm",
+                          class: "no-result"
+                        }, {
+                          default: f(() => [
+                            S(P(t.noResultsText), 1)
+                          ]),
+                          _: 1
+                        })
+                      ])) : r("", !0),
+                      t.loading ? (s(), c("li", _e, [
+                        h(l(se), {
+                          "font-size": "md",
+                          class: "loader-icon"
+                        }, {
+                          default: f(() => [
+                            et
+                          ]),
+                          _: 1
+                        }),
+                        h(l(B), null, {
+                          default: f(() => [
+                            S("Loading...")
+                          ]),
+                          _: 1
+                        })
+                      ])) : r("", !0),
+                      t.showSelectAll ? (s(), c("li", tt, [
+                        h(Ue, {
+                          "aria-selected": l(K),
+                          "aria-disabled": !!t.disabled,
+                          "selected-prop": l(K),
+                          "is-indeterminate": l(we),
+                          "select-all-option": "",
+                          onClick: a[3] || (a[3] = ie((u) => Oe(), ["stop"]))
+                        }, {
+                          default: f(() => [
+                            S("Select all ")
+                          ]),
+                          _: 1
+                        }, 8, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
+                      ])) : r("", !0),
+                      l(te).length && !t.loading ? (s(!0), c($e, { key: 3 }, Pe(l(te), ({ data: u, index: k }) => (s(), c("li", {
+                        key: k,
+                        "aria-selected": O(l(o)) === u,
+                        "aria-disabled": !!t.disabled,
+                        onClick: ie(() => R(u, k), ["stop"])
+                      }, [
+                        $(e.$slots, "default", {
+                          option: u,
+                          selected: O(l(o)) === u,
+                          active: O(l(v)) === k
+                        }, void 0, !0)
+                      ], 8, lt))), 128)) : r("", !0)
+                    ], 16)
+                  ], 16),
+                  t.multi ? (s(), c("div", at, [
+                    h(l(ue), {
+                      ref_key: "cancel",
+                      ref: X,
+                      size: "sm",
+                      variant: "border",
+                      theme: "third",
+                      onClick: ae
+                    }, {
+                      default: f(() => [
+                        S(" Cancel ")
+                      ]),
+                      _: 1
+                    }, 512),
+                    h(l(ue), {
+                      ref_key: "apply",
+                      ref: W,
+                      "data-testid": "mutli-apply",
+                      size: "sm",
+                      class: "apply-button",
+                      onClick: Ce
+                    }, {
+                      default: f(() => [
+                        S("Apply ")
+                      ]),
+                      _: 1
+                    }, 512)
+                  ])) : r("", !0)
+                ], 32)) : r("", !0)
+              ], 512)
+            ]),
+            _: 3
+          })
+        ]),
+        default: f(() => [
+          T("div", {
+            class: q(["button__container", {
+              "button__container--open": !!l(i),
+              [`button__container--${t.size}`]: !0,
+              "button__container--disabled": t.disabled
+            }])
+          }, [
+            e.$slots.input ? (s(), c("div", {
+              key: 0,
+              ref_key: "buttonRef",
+              ref: D,
+              onClick: a[0] || (a[0] = (u) => g()),
+              onKeydown: ne
+            }, [
+              $(e.$slots, "input", {
+                open: l(i),
+                value: l(_),
+                disabled: t.disabled
+              }, void 0, !0)
+            ], 544)) : r("", !0),
+            e.$slots.input ? r("", !0) : (s(), c("button", {
+              key: 1,
+              ref_key: "buttonRef",
+              ref: D,
+              disabled: t.disabled,
+              "aria-haspopup": !0,
+              "aria-expanded": !!l(i),
+              "aria-labelledby": Q.value?.id,
+              "aria-disabled": t.disabled,
+              class: q([{
+                "button--open": !!l(i),
+                [`button--${t.size}`]: !0,
+                "button--disabled": t.disabled
+              }, "button"]),
+              onKeydown: ne,
+              onClick: a[1] || (a[1] = (u) => g())
+            }, [
+              e.$slots.image ? (s(), c("div", Qe, [
+                $(e.$slots, "image", {}, void 0, !0)
+              ])) : r("", !0),
+              h(l(B), {
+                size: "sm",
+                "is-truncated": ""
+              }, {
+                default: f(() => [
+                  S(P(l(_)), 1)
+                ]),
+                _: 1
+              }),
+              T("div", We, [
+                h(l(se), {
+                  name: "angle-down",
+                  "font-size": "sm"
+                })
+              ])
+            ], 42, Je))
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size"]),
+      !t.error && t.helperText ? (s(), G(l(B), {
+        key: 0,
+        size: "caption",
+        class: "helper-text"
+      }, {
+        default: f(() => [
+          S(P(t.helperText), 1)
+        ]),
+        _: 1
+      })) : r("", !0),
+      t.error ? (s(), G(l(B), {
+        key: 1,
+        size: "caption",
+        class: "helper-text helper-text--error"
+      }, {
+        default: f(() => [
+          S(P(t.error), 1)
+        ]),
+        _: 1
+      })) : r("", !0)
+    ], 42, je));
+  }
+});
+export {
+  kt as default
+};

package/components/dropdown/DropdownContext.js

@@ -0,0 +1,21 @@
+import { inject as t } from "vue";
+var e = /* @__PURE__ */ ((r) => (r[r.Multi = 0] = "Multi", r[r.Single = 1] = "Single", r))(e || {}), c = /* @__PURE__ */ ((r) => (r[r.Search = 0] = "Search", r[r.Dropdown = 1] = "Dropdown", r))(c || {});
+const a = Symbol(
+  "DropdownContext"
+);
+function i(r) {
+  const n = t(a, null);
+  if (n === null) {
+    const o = new Error(
+      `<${r} /> is missing a parent <Dropdown /> component.`
+    );
+    throw Error.captureStackTrace && Error.captureStackTrace(o, i), o;
+  }
+  return n;
+}
+export {
+  a as DropdownContext,
+  e as Mode,
+  c as Type,
+  i as useDropdownContext
+};

package/components/dropdown/Label.vue.d.ts

@@ -1,2 +1,9 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
+    default?(_: {}): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/dropdown/Label.vue.js

@@ -1,41 +1,6 @@
-import { defineComponent, openBlock, createElementBlock, unref, normalizeClass, createVNode, withCtx, renderSlot, createBlock, createTextVNode, createCommentVNode } from 'vue';
-/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-import Text from '../typography/Text.vue.js';
-import { useDropdownContext } from './DropdownContext.vue.js';
-import { useId } from '../../composables/useId.vue.js';
-/* empty css                                                       */
-import "../../Label.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Label",
-  setup(__props) {
-    const id = `is-system-label-${useId().value}`;
-    const api = useDropdownContext("label");
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", {
-        id,
-        ref: unref(api).labelRef,
-        class: normalizeClass(["label", { "label--disabled": unref(api).disabled }])
-      }, [
-        createVNode(unref(Text), null, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ]),
-          _: 3
-        }),
-        unref(api).mandatory ? (openBlock(), createBlock(unref(Text), {
-          key: 0,
-          size: "lg",
-          class: "mandatory"
-        }, {
-          default: withCtx(() => [
-            createTextVNode("*")
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
-var Label = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4bba4499"]]);
-
-export { Label as default };
+import o from "./Label.vue2.js";
+/* empty css            */import t from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-04058f87"]]);
+export {
+  m as default
+};

package/components/dropdown/Label.vue2.js

@@ -0,0 +1,35 @@
+import { defineComponent as n, openBlock as l, createElementBlock as d, unref as e, normalizeClass as m, createVNode as c, withCtx as o, renderSlot as i, createBlock as u, createTextVNode as f, createCommentVNode as p } from "vue";
+/* empty css                          */import a from "../typography/Text.vue.js";
+import { useDropdownContext as b } from "./DropdownContext.js";
+import { useId as _ } from "../../composables/useId.js";
+const h = /* @__PURE__ */ n({
+  __name: "Label",
+  setup(x) {
+    const r = `is-system-label-${_().value}`, t = b("label");
+    return (s, C) => (l(), d("label", {
+      id: r,
+      ref: e(t).labelRef,
+      class: m(["label", { "label--disabled": e(t).disabled }])
+    }, [
+      c(e(a), null, {
+        default: o(() => [
+          i(s.$slots, "default", {}, void 0, !0)
+        ]),
+        _: 3
+      }),
+      e(t).mandatory ? (l(), u(e(a), {
+        key: 0,
+        size: "lg",
+        class: "mandatory"
+      }, {
+        default: o(() => [
+          f("*")
+        ]),
+        _: 1
+      })) : p("", !0)
+    ], 2));
+  }
+});
+export {
+  h as default
+};