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

package/components/dropdown/v4/DropdownV4.vue2.js

@@ -0,0 +1,388 @@
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_896b5344_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as Q, openBlock as d, createElementBlock as n, normalizeClass as $, unref as e, renderSlot as h, createElementVNode as r, createVNode as s, withCtx as o, Transition as Z, createTextVNode as u, toDisplayString as b, createCommentVNode as i, createBlock as g, isRef as _, mergeProps as P, withModifiers as A, Fragment as ee, renderList as te, toRaw as T, pushScopeId as le, popScopeId as ae } from "vue";
+import C from "../../button/v4/ButtonV4.vue.js";
+import de from "../common/Option.vue.js";
+import B from "../../icon/Icon.vue.js";
+import oe from "../../search/v4/SearchV4.vue.js";
+import "../../typography/Heading.vue.js";
+import y from "../../typography/Text.vue.js";
+import { Dropdown as ie } from "floating-vue";
+import { DropdownTestIdModifiers as c } from "../../../testids/index.js";
+import { dropdownCommon as ne } from "../common/Dropdown.common.js";
+const se = (t) => (le("data-v-896b5344"), t = t(), ae(), t), re = ["tabindex", "data-testid"], ue = { style: { display: "flex", width: "100%" } }, ce = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"], fe = {
+  key: 0,
+  class: "image-slot"
+}, me = { class: "angle-down" }, ye = {
+  key: 0,
+  ref: "listRef",
+  class: "dropdown-title"
+}, pe = ["data-testid"], he = ["data-testid"], be = {
+  key: 0,
+  class: "no-result-container"
+}, ke = {
+  key: 1,
+  class: "loader"
+}, ve = /* @__PURE__ */ se(() => /* @__PURE__ */ r("svg", {
+  width: "100",
+  height: "100",
+  viewBox: "0 0 100 100"
+}, [
+  /* @__PURE__ */ r("circle", {
+    cx: "50",
+    cy: "50",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "6",
+    r: "35",
+    "stroke-dasharray": "164.93361431346415 56.97787143782138"
+  }, [
+    /* @__PURE__ */ r("animateTransform", {
+      attributeName: "transform",
+      type: "rotate",
+      repeatCount: "indefinite",
+      dur: "1s",
+      values: "0 50 50;360 50 50",
+      keyTimes: "0;1"
+    })
+  ])
+], -1)), we = { key: 2 }, $e = ["aria-selected", "aria-disabled", "onClick"], ge = {
+  key: 0,
+  class: "actions"
+}, Pe = /* @__PURE__ */ Q({
+  __name: "DropdownV4",
+  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 },
+    multiOptionsPlaceholderPrefix: { default: "" },
+    multiOptionsPlaceholderSuffix: { default: "" },
+    testId: { default: "" },
+    darkTheme: { type: Boolean, default: !0 },
+    valueToCopy: { default: "" }
+  },
+  emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
+  setup(t, { expose: V, emit: N }) {
+    const K = t, {
+      onKeydown: p,
+      location: L,
+      open: m,
+      toggleMenu: I,
+      onButtonKeydown: k,
+      displayedValue: S,
+      labelRef: D,
+      query: v,
+      containerProps: H,
+      calculateTableHeight: F,
+      wrapperProps: M,
+      filteredOptions: G,
+      allSelected: z,
+      isIndeterminate: X,
+      onSelectAll: q,
+      virtualOptions: O,
+      isSelected: R,
+      selectedOption: E,
+      onSelect: x,
+      activeIndex: U,
+      onCancel: W,
+      onApply: Y,
+      scrollTo: j
+    } = ne(K, N), J = () => {
+    };
+    return V({
+      selectItem: x,
+      scrollTo: j
+    }), (f, a) => (d(), n("div", {
+      ref: "el",
+      class: $(["dropdown", { "dropdown--disabled": t.disabled }]),
+      tabindex: t.disabled ? -1 : 0,
+      "data-testid": `${t.testId}-${e(c).WRAPPER}`,
+      onKeydown: a[7] || (a[7] = //@ts-ignore
+      (...l) => e(p) && e(p)(...l))
+    }, [
+      h(f.$slots, "label", {}, void 0, !0),
+      r("div", ue, [
+        s(e(ie), {
+          theme: t.theme,
+          "popper-class": [
+            t.popperClass,
+            t.darkTheme ? "dark-theme-v4" : "light-theme-v4",
+            t.autoSize ? "v-popper--theme-is-dropdown--auto-size" : null
+          ],
+          placement: t.placement,
+          skidding: t.isOnTop ? 0 : t.skidding,
+          distance: t.isOnTop ? -e(L) : t.distance,
+          flip: t.flip,
+          triggers: [],
+          shown: !!e(m),
+          "auto-hide": !1,
+          container: t.container,
+          "auto-size": t.autoSize,
+          "data-testid": `${t.testId}-${e(c).TRIGGER}`
+        }, {
+          popper: o(() => [
+            s(Z, null, {
+              default: o(() => [
+                t.inlineSearch || t.title ? (d(), n("div", ye, [
+                  r("div", null, [
+                    t.title ? (d(), n("div", {
+                      key: 0,
+                      class: "dropdown-title__text",
+                      "data-testid": `${t.testId}-${e(c).TITLE}`
+                    }, [
+                      s(e(y), { strong: "" }, {
+                        default: o(() => [
+                          u(b(t.title), 1)
+                        ]),
+                        _: 1
+                      })
+                    ], 8, pe)) : i("", !0),
+                    t.inlineSearch ? (d(), g(e(oe), {
+                      key: 1,
+                      modelValue: e(v),
+                      "onUpdate:modelValue": a[4] || (a[4] = (l) => _(v) ? v.value = l : null),
+                      placeholder: t.searchPlaceholder,
+                      class: "dropdown-title__search",
+                      variant: "transparent",
+                      size: "md",
+                      "test-id": `${t.testId}-${e(c).SEARCH}`,
+                      onKeydown: e(p)
+                    }, null, 8, ["modelValue", "placeholder", "test-id", "onKeydown"])) : i("", !0)
+                  ]),
+                  e(m) ? (d(), n("div", {
+                    key: 0,
+                    class: "dropdown",
+                    onKeydown: a[6] || (a[6] = //@ts-ignore
+                    (...l) => e(p) && e(p)(...l))
+                  }, [
+                    h(f.$slots, "input-list", { open: e(m) }, void 0, !0),
+                    r("div", P(e(H), {
+                      class: ["list-container", { "list-container--multi": t.multi }],
+                      style: { height: `${e(F)}rem` },
+                      "data-testid": `${t.testId}-${e(c).LIST_CONTAINER}`
+                    }), [
+                      r("ul", P(e(M), {
+                        role: "listbox",
+                        class: ["list", { "list--multi": t.multi }]
+                      }), [
+                        !e(G).length && !t.loading ? (d(), n("li", be, [
+                          s(e(y), {
+                            size: "sm",
+                            class: "no-result"
+                          }, {
+                            default: o(() => [
+                              u(b(t.noResultsText), 1)
+                            ]),
+                            _: 1
+                          })
+                        ])) : i("", !0),
+                        t.loading ? (d(), n("li", ke, [
+                          s(e(B), {
+                            "font-size": "md",
+                            class: "loader-icon"
+                          }, {
+                            default: o(() => [
+                              ve
+                            ]),
+                            _: 1
+                          }),
+                          s(e(y), null, {
+                            default: o(() => [
+                              u("Loading...")
+                            ]),
+                            _: 1
+                          })
+                        ])) : i("", !0),
+                        t.showSelectAll ? (d(), n("li", we, [
+                          s(de, {
+                            "aria-selected": e(z),
+                            "aria-disabled": !!t.disabled,
+                            "selected-prop": e(z),
+                            "is-indeterminate": e(X),
+                            "select-all-option": "",
+                            onClick: a[5] || (a[5] = A((l) => e(q)(), ["stop"]))
+                          }, {
+                            default: o(() => [
+                              u("Select all ")
+                            ]),
+                            _: 1
+                          }, 8, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
+                        ])) : i("", !0),
+                        e(O).length && !t.loading ? (d(!0), n(ee, { key: 3 }, te(e(O), ({ data: l, index: w }) => (d(), n("li", {
+                          key: w,
+                          "aria-selected": e(R)(T(e(E)), l),
+                          "aria-disabled": !!t.disabled,
+                          onClick: A(() => e(x)(l, w), ["stop"])
+                        }, [
+                          h(f.$slots, "default", {
+                            option: l,
+                            selected: e(R)(T(e(E)), l),
+                            active: T(e(U)) === w
+                          }, void 0, !0)
+                        ], 8, $e))), 128)) : i("", !0)
+                      ], 16)
+                    ], 16, he),
+                    t.multi ? (d(), n("div", ge, [
+                      s(e(C), {
+                        ref: "cancel",
+                        size: "small",
+                        variant: "outlined",
+                        color: "default",
+                        "test-id": `${t.testId}-${e(c).ACTION_CANCEL}`,
+                        onClick: e(W)
+                      }, {
+                        default: o(() => [
+                          u(" Cancel ")
+                        ]),
+                        _: 1
+                      }, 8, ["test-id", "onClick"]),
+                      s(e(C), {
+                        ref: "apply",
+                        "data-testid": "mutli-apply",
+                        size: "small",
+                        class: "apply-button",
+                        "test-id": `${t.testId}-${e(c).ACTION_APPLY}`,
+                        onClick: e(Y)
+                      }, {
+                        default: o(() => [
+                          u("Apply ")
+                        ]),
+                        _: 1
+                      }, 8, ["test-id", "onClick"])
+                    ])) : i("", !0)
+                  ], 32)) : i("", !0)
+                ], 512)) : i("", !0)
+              ]),
+              _: 3
+            })
+          ]),
+          default: o(() => [
+            r("div", {
+              class: $(["button__container", {
+                "button__container--open": !!e(m),
+                [`button__container--${t.size}`]: !0,
+                "button__container--disabled": t.disabled
+              }])
+            }, [
+              f.$slots.input ? (d(), n("div", {
+                key: 0,
+                ref: "buttonRef",
+                onClick: a[0] || (a[0] = (l) => e(I)()),
+                onKeydown: a[1] || (a[1] = //@ts-ignore
+                (...l) => e(k) && e(k)(...l))
+              }, [
+                h(f.$slots, "input", {
+                  open: e(m),
+                  value: e(S),
+                  disabled: t.disabled
+                }, void 0, !0)
+              ], 544)) : i("", !0),
+              f.$slots.input ? i("", !0) : (d(), n("button", {
+                key: 1,
+                ref: "buttonRef",
+                disabled: t.disabled,
+                "aria-haspopup": !0,
+                "aria-expanded": !!e(m),
+                "aria-labelledby": e(D)?.id,
+                "aria-disabled": t.disabled,
+                class: $([{
+                  "button--open": !!e(m),
+                  [`button--${t.size}`]: !0,
+                  "button--disabled": t.disabled
+                }, "button"]),
+                onKeydown: a[2] || (a[2] = //@ts-ignore
+                (...l) => e(k) && e(k)(...l)),
+                onClick: a[3] || (a[3] = (l) => e(I)())
+              }, [
+                f.$slots.image ? (d(), n("div", fe, [
+                  h(f.$slots, "image", {}, void 0, !0)
+                ])) : i("", !0),
+                s(e(y), {
+                  size: "sm",
+                  "is-truncated": ""
+                }, {
+                  default: o(() => [
+                    u(b(e(S)), 1)
+                  ]),
+                  _: 1
+                }),
+                r("div", me, [
+                  s(e(B), {
+                    name: "angle-down",
+                    "font-size": "sm"
+                  })
+                ])
+              ], 42, ce))
+            ], 2)
+          ]),
+          _: 3
+        }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size", "data-testid"]),
+        r("div", null, [
+          s(e(C), {
+            color: "default",
+            onClick: J
+          }, {
+            default: o(() => [
+              s(e(B), { name: "lock" })
+            ]),
+            _: 1
+          })
+        ])
+      ]),
+      !t.error && t.helperText ? (d(), g(e(y), {
+        key: 0,
+        size: "caption",
+        class: "helper-text",
+        "test-id": `${t.testId}-${e(c).HELPER_TEXT}`
+      }, {
+        default: o(() => [
+          u(b(t.helperText), 1)
+        ]),
+        _: 1
+      }, 8, ["test-id"])) : i("", !0),
+      t.error ? (d(), g(e(y), {
+        key: 1,
+        size: "caption",
+        class: "helper-text helper-text--error",
+        "test-id": `${t.testId}-${e(c).HELPER_TEXT_ERROR}`
+      }, {
+        default: o(() => [
+          u(b(t.error), 1)
+        ]),
+        _: 1
+      }, 8, ["test-id"])) : i("", !0)
+    ], 42, re));
+  }
+});
+export {
+  Pe as default
+};