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

package/components/dropdown/common/Option.vue2.js

@@ -0,0 +1,102 @@
+ import "../../../Option.vue_vue_type_style_index_0_scoped_6d9b9102_lang.css"; import { defineComponent as M, ref as x, onMounted as I, onUnmounted as N, computed as m, toRaw as p, openBlock as l, createElementBlock as r, normalizeClass as k, unref as e, createElementVNode as f, createBlock as y, createCommentVNode as s, renderSlot as v, createVNode as O, withCtx as h, createTextVNode as z, toDisplayString as A, withModifiers as P } from "vue";
+import "../../typography/Heading.vue.js";
+import g from "../../typography/Text.vue.js";
+import { useDropdownContext as S, Mode as C } from "./DropdownContext.js";
+import { useId as V } from "../../../composables/useId.js";
+import D from "../../checkbox/Checkbox.vue.js";
+import E from "../../icon/Icon.vue.js";
+import { NOOP as R } from "@vue/shared";
+const T = {
+  key: 1,
+  class: "image"
+}, U = {
+  key: 2,
+  class: "start-icon"
+}, j = { class: "text-container" }, q = { key: 0 }, X = /* @__PURE__ */ M({
+  __name: "Option",
+  props: {
+    option: { default: null },
+    subtitle: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    selectedProp: { type: Boolean },
+    isIndeterminate: { type: Boolean, default: !1 },
+    selectAllOption: { type: Boolean, default: !1 },
+    active: { type: Boolean, default: null }
+  },
+  setup(n) {
+    const i = n, t = S("Option"), d = V().value, B = x(null), $ = (o) => {
+      i.selectAllOption ? o.stopPropagation() : t.select(i.option);
+    };
+    I(() => t.registerOption(d, i.disabled, !!i.subtitle)), N(() => {
+      t.unRegisterOption(d);
+    });
+    const c = m(() => t.mode === C.Multi), w = m(() => i.active !== null ? i.active : t.activeIndex.value !== null ? t.activeOption.value === i.option : !1), u = m(() => i.selectedProp ? !0 : t.mode === C.Multi && Array.isArray(t.selectedOption.value) ? p(t.selectedOption.value.includes(i.option)) : p(t.selectedOption.value) === p(i.option));
+    return (o, a) => (l(), r("div", {
+      ref_key: "el",
+      ref: B,
+      class: k(["item-container", {
+        "item-container--disabled": n.disabled,
+        "item-container--active": e(w),
+        "item-container--selected": e(u),
+        "item-container--multi": e(c)
+      }])
+    }, [
+      f("div", {
+        class: k(["item", {
+          "item--multi": e(c),
+          "item--with-icon": o.$slots["icon-start"] || o.$slots.image
+        }])
+      }, [
+        e(c) ? (l(), y(e(D), {
+          key: 0,
+          id: e(d).toString(),
+          tabindex: "-1",
+          class: "checkbox",
+          size: "sm",
+          "is-checked": e(u),
+          "is-indeterminate": n.isIndeterminate && !n.option,
+          onClick: a[0] || (a[0] = (b) => n.disabled ? e(R)() : $(b))
+        }, null, 8, ["id", "is-checked", "is-indeterminate"])) : s("", !0),
+        o.$slots.image ? (l(), r("div", T, [
+          v(o.$slots, "image", {}, void 0, !0)
+        ])) : s("", !0),
+        o.$slots["icon-start"] ? (l(), r("div", U, [
+          v(o.$slots, "icon-start", {}, void 0, !0)
+        ])) : s("", !0),
+        f("div", j, [
+          O(e(g), { size: "sm" }, {
+            default: h(() => [
+              v(o.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          }),
+          n.subtitle ? (l(), y(e(g), {
+            key: 0,
+            class: "subtitle",
+            size: "xs"
+          }, {
+            default: h(() => [
+              z(A(n.subtitle), 1)
+            ]),
+            _: 1
+          })) : s("", !0)
+        ])
+      ], 2),
+      e(t).clearable && e(u) ? (l(), r("div", q, [
+        f("button", {
+          class: "clear-button",
+          onClick: a[1] || (a[1] = P((b) => e(t).clearSelection(), ["prevent", "stop"]))
+        }, [
+          O(e(E), {
+            name: "close",
+            width: "8",
+            height: 8
+          })
+        ])
+      ])) : s("", !0)
+    ], 2));
+  }
+});
+export {
+  X as default
+};

package/components/dropdown/common/SearchInput.vue.d.ts

@@ -1,2 +1,15 @@
-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?(_: {
+        inputRef: HTMLInputElement;
+        disabled: boolean;
+        change: (event: any) => void;
+        placeholder: string;
+    }): any;
+    prefix?(_: {}): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/dropdown/common/SearchInput.vue.js

@@ -1,120 +1,7 @@
-import { defineComponent, useSlots, ref, onMounted, computed, watch, renderSlot, unref, createElementVNode, normalizeClass, openBlock, createElementBlock, createCommentVNode, createVNode, withCtx, createBlock } from 'vue';
-import { useDropdownContext, Mode } from './DropdownContext.vue.js';
-import Icon from '../../icon/v3/Icon.vue.js';
-/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
-/* empty css                                                                     *//* empty css                                                                      */import IconButton from '../../button/v3/IconButton.vue.js';
-/* empty css                                                                                  */import 'floating-vue';
-/* empty css                                                         *//* empty css                                                                            *//* empty css                                                             */
-import "../../../SearchInput.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = {
-  key: 0,
-  class: "prefix"
+import o from "./SearchInput.vue2.js";
+/* empty css                  */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../SearchInput.vue_vue_type_style_index_0_scoped_2fb7762f_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-2fb7762f"]]);
+export {
+  s as default
 };
-const _hoisted_2 = ["disabled", "placeholder"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "SearchInput",
-  setup(__props) {
-    const api = useDropdownContext("searchInput");
-    const slots = useSlots();
-    const inputEl = ref(null);
-    const isFocused = ref();
-    onMounted(() => {
-      api.registerInput(inputEl);
-    });
-    const onChange = (event) => {
-      api.toggle(true);
-      api.search(event.target.value);
-    };
-    const showPrefix = computed(() => {
-      return !api.open.value && slots.prefix && !Array.isArray(api.selectedOption.value) && api.selectedOption.value;
-    });
-    const placeholder = computed(() => {
-      if (api.mode === Mode.Multi && Array.isArray(api.selectedOption.value) && api.selectedOption.value.length) {
-        return `${api.selectedOption.value.length} selected`;
-      }
-      if (api.open.value && api.selectedValue.value) {
-        return api.selectedValue.value;
-      }
-      return api.placeholder;
-    });
-    const showClear = computed(() => {
-      return api.query.value !== "" || api.selectedValue.value;
-    });
-    watch(api.open, (value) => {
-      if (value) {
-        inputEl.value.focus();
-      }
-      if (api.mode === Mode.Multi) {
-        return;
-      }
-      if (!value || !inputEl.value) {
-        return;
-      }
-      inputEl.value.value = "";
-    });
-    const rightIcon = computed(() => {
-      return showClear.value ? "cancel" : "search-bold";
-    });
-    const onClearClick = () => {
-      api.clearSelection();
-      inputEl.value.focus();
-    };
-    return (_ctx, _cache) => {
-      return renderSlot(_ctx.$slots, "default", {
-        inputRef: inputEl.value,
-        disabled: unref(api).disabled,
-        change: onChange,
-        placeholder: unref(placeholder)
-      }, () => [
-        createElementVNode("div", {
-          class: normalizeClass(["container", {
-            "container--open": unref(api).open.value,
-            "container--disabled": unref(api).disabled,
-            [`container--${unref(api).size}`]: true,
-            focused: isFocused.value
-          }])
-        }, [
-          unref(showPrefix) ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
-          ])) : createCommentVNode("", true),
-          createElementVNode("input", {
-            ref_key: "inputEl",
-            ref: inputEl,
-            disabled: unref(api).disabled,
-            class: normalizeClass(["input", { "input--disabled": unref(api).disabled }]),
-            placeholder: unref(placeholder),
-            onFocusin: _cache[0] || (_cache[0] = ($event) => isFocused.value = true),
-            onFocusout: _cache[1] || (_cache[1] = ($event) => isFocused.value = false),
-            onInput: onChange
-          }, null, 42, _hoisted_2),
-          createVNode(unref(IconButton), {
-            variant: "colorized",
-            size: "sm",
-            theme: "secondary",
-            class: normalizeClass(["search-right-icon", { "search-right-icon-clear": unref(showClear) }]),
-            disabled: unref(api).disabled
-          }, {
-            default: withCtx(() => [
-              !unref(api).open.value ? (openBlock(), createBlock(unref(Icon), {
-                key: 0,
-                "font-size": "sm",
-                class: "angle-down",
-                name: "angle-down"
-              })) : createCommentVNode("", true),
-              unref(api).open.value ? (openBlock(), createBlock(unref(Icon), {
-                key: 1,
-                "font-size": "sm",
-                name: unref(rightIcon),
-                onClick: onClearClick
-              }, null, 8, ["name"])) : createCommentVNode("", true)
-            ]),
-            _: 1
-          }, 8, ["disabled", "class"])
-        ], 2)
-      ], true);
-    };
-  }
-});
-var SearchInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1b176ef7"]]);
-
-export { SearchInput as default };

package/components/dropdown/common/SearchInput.vue2.js

@@ -0,0 +1,82 @@
+ import "../../../SearchInput.vue_vue_type_style_index_0_scoped_2fb7762f_lang.css"; import { defineComponent as I, useSlots as x, ref as v, onMounted as z, computed as r, watch as V, renderSlot as f, unref as t, createElementVNode as m, normalizeClass as s, openBlock as u, createElementBlock as $, createCommentVNode as i, createVNode as O, withCtx as A, createBlock as h } from "vue";
+import { useDropdownContext as B, Mode as b } from "./DropdownContext.js";
+import g from "../../icon/Icon.vue.js";
+import "../../button/v3/Button.vue.js";
+import E from "../../button/v3/IconButton.vue.js";
+import "../../button/v3/ScrollButton.vue.js";
+const M = {
+  key: 0,
+  class: "prefix"
+}, S = ["disabled", "placeholder"], G = /* @__PURE__ */ I({
+  __name: "SearchInput",
+  setup(F) {
+    const e = B("searchInput"), y = x(), l = v(null), a = v();
+    z(() => {
+      e.registerInput(l);
+    });
+    const c = (o) => {
+      e.toggle(!0), e.search(o.target.value);
+    }, C = r(() => !e.open.value && y.prefix && !Array.isArray(e.selectedOption.value) && e.selectedOption.value), d = r(() => e.mode === b.Multi && Array.isArray(e.selectedOption.value) && e.selectedOption.value.length ? `${e.selectedOption.value.length} selected` : e.open.value && e.selectedValue.value ? e.selectedValue.value : e.placeholder), p = r(() => e.query.value !== "" || e.selectedValue.value);
+    V(e.open, (o) => {
+      o && l.value.focus(), e.mode !== b.Multi && (!o || !l.value || (l.value.value = ""));
+    });
+    const k = r(() => p.value ? "cancel" : "search-bold"), _ = () => {
+      e.clearSelection(), l.value.focus();
+    };
+    return (o, n) => f(o.$slots, "default", {
+      inputRef: l.value,
+      disabled: t(e).disabled,
+      change: c,
+      placeholder: t(d)
+    }, () => [
+      m("div", {
+        class: s(["container", {
+          "container--open": t(e).open.value,
+          "container--disabled": t(e).disabled,
+          [`container--${t(e).size}`]: !0,
+          focused: a.value
+        }])
+      }, [
+        t(C) ? (u(), $("div", M, [
+          f(o.$slots, "prefix", {}, void 0, !0)
+        ])) : i("", !0),
+        m("input", {
+          ref_key: "inputEl",
+          ref: l,
+          disabled: t(e).disabled,
+          class: s(["input", { "input--disabled": t(e).disabled }]),
+          placeholder: t(d),
+          onFocusin: n[0] || (n[0] = (w) => a.value = !0),
+          onFocusout: n[1] || (n[1] = (w) => a.value = !1),
+          onInput: c
+        }, null, 42, S),
+        O(t(E), {
+          variant: "colorized",
+          size: "sm",
+          theme: "secondary",
+          class: s(["search-right-icon", { "search-right-icon-clear": t(p) }]),
+          disabled: t(e).disabled
+        }, {
+          default: A(() => [
+            t(e).open.value ? i("", !0) : (u(), h(t(g), {
+              key: 0,
+              "font-size": "sm",
+              class: "angle-down",
+              name: "angle-down"
+            })),
+            t(e).open.value ? (u(), h(t(g), {
+              key: 1,
+              "font-size": "sm",
+              name: t(k),
+              onClick: _
+            }, null, 8, ["name"])) : i("", !0)
+          ]),
+          _: 1
+        }, 8, ["disabled", "class"])
+      ], 2)
+    ], !0);
+  }
+});
+export {
+  G as default
+};

package/components/dropdown/v3/Dropdown.vue.d.ts

@@ -1,6 +1,6 @@
 import { Placement } from 'floating-vue';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: unknown | unknown[] | Record<string, unknown>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: unknown;
     placeholder?: string;
     disabled?: boolean;
     mandatory?: boolean;
@@ -13,7 +13,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     popperClass?: string;
     noResultsText?: string;
     loading?: boolean;
-    selected?: unknown | unknown[];
+    selected?: unknown;
     showSelectAll?: boolean;
     defaultOpen?: boolean;
     showButtonOnOpen?: boolean;
@@ -24,9 +24,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     placement?: Placement;
     clearable?: boolean;
     error?: string;
-    size?: 'sm' | 'lg';
+    size?: "sm" | "lg";
     displayValue: (option: unknown) => string;
-    options: unknown[];
+    options: any[];
     onSearch?: (option: any, term: string) => boolean;
     theme?: string;
     container?: string;
@@ -80,16 +80,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     scrollTo: (index: number) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (value: unknown) => void;
-} & {
     "update:isOpen": (value: unknown) => void;
-} & {
     closed: () => void;
-} & {
     opened: () => void;
-} & {
     apply: (value: unknown) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: unknown | unknown[] | Record<string, unknown>;
+    modelValue?: unknown;
     placeholder?: string;
     disabled?: boolean;
     mandatory?: boolean;
@@ -102,7 +98,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     popperClass?: string;
     noResultsText?: string;
     loading?: boolean;
-    selected?: unknown | unknown[];
+    selected?: unknown;
     showSelectAll?: boolean;
     defaultOpen?: boolean;
     showButtonOnOpen?: boolean;
@@ -113,9 +109,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     placement?: Placement;
     clearable?: boolean;
     error?: string;
-    size?: 'sm' | 'lg';
+    size?: "sm" | "lg";
     displayValue: (option: unknown) => string;
-    options: unknown[];
+    options: any[];
     onSearch?: (option: any, term: string) => boolean;
     theme?: string;
     container?: string;
@@ -165,38 +161,38 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     darkTheme: boolean;
     valueToCopy: string;
 }>>> & {
-    "onUpdate:selected"?: (value: unknown) => any;
     onApply?: (value: unknown) => any;
+    "onUpdate:selected"?: (value: unknown) => any;
     "onUpdate:isOpen"?: (value: unknown) => any;
     onOpened?: () => any;
     onClosed?: () => any;
 }, {
     title: string;
     theme: string;
-    size: 'sm' | 'lg';
+    size: "sm" | "lg";
     testId: string;
     error: string;
     placement: Placement;
     disabled: boolean;
+    container: string;
     selected: any;
     modelValue: any;
     placeholder: string;
-    multi: boolean;
+    mandatory: boolean;
+    helperText: string;
     searchPlaceholder: string;
+    isOnTop: boolean;
+    multi: boolean;
+    inlineSearch: boolean;
     popperClass: string;
-    mandatory: boolean;
+    noResultsText: string;
+    defaultOpen: boolean;
     showButtonOnOpen: boolean;
-    inlineSearch: boolean;
-    isOnTop: boolean;
+    autoFocus: boolean;
     distance: number;
     skidding: number;
-    noResultsText: string;
-    autoFocus: boolean;
-    defaultOpen: boolean;
     clearable: boolean;
     onSearch: (option: any, term: string) => boolean;
-    helperText: string;
-    container: string;
     flip: boolean;
     keepOpen: boolean;
     autoSize: boolean;
@@ -205,6 +201,22 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     multiOptionsPlaceholderSuffix: string;
     darkTheme: boolean;
     valueToCopy: string;
+}>, {
+    label?(_: {}): any;
+    input?(_: {
+        open: boolean;
+        value: any;
+        disabled: boolean;
+    }): any;
+    image?(_: {}): any;
+    "input-list"?(_: {
+        open: true;
+    }): any;
+    default?(_: {
+        option: any;
+        selected: boolean;
+        active: boolean;
+    }): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -217,7 +229,15 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };