@ironsource/shared-ui 2.1.3-rc.2 → 2.1.3-rc.20

package/components/autocomplete/Autocomplete.vue.d.ts

@@ -0,0 +1,115 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    label?: string;
+    labelDirection?: "top" | "inside";
+    mandatory?: boolean;
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    options: unknown[] | {
+        id: string;
+        text: string;
+    }[];
+    displayValue: (option: unknown) => string;
+    optionNameKey?: string;
+    optionsListWidth?: string;
+    onSearch?: (option: any, term: string) => boolean;
+    testId?: string;
+}>, {
+    modelValue: string;
+    placeholder: string;
+    disabled: boolean;
+    size: string;
+    label: string;
+    labelDirection: string;
+    mandatory: boolean;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+    onSearch: any;
+    optionNameKey: string;
+    optionsListWidth: any;
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    label?: string;
+    labelDirection?: "top" | "inside";
+    mandatory?: boolean;
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    options: unknown[] | {
+        id: string;
+        text: string;
+    }[];
+    displayValue: (option: unknown) => string;
+    optionNameKey?: string;
+    optionsListWidth?: string;
+    onSearch?: (option: any, term: string) => boolean;
+    testId?: string;
+}>, {
+    modelValue: string;
+    placeholder: string;
+    disabled: boolean;
+    size: string;
+    label: string;
+    labelDirection: string;
+    mandatory: boolean;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+    onSearch: any;
+    optionNameKey: string;
+    optionsListWidth: any;
+    testId: string;
+}>>> & {
+    "onUpdate:modelValue"?: (value: string | number) => any;
+}, {
+    label: string;
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+    mandatory: boolean;
+    testId: string;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    modelValue: string | number;
+    placeholder: string;
+    labelDirection: "top" | "inside";
+    onSearch: (option: any, term: string) => boolean;
+    optionNameKey: string;
+    optionsListWidth: string;
+}>, {
+    default?(_: {
+        option: unknown;
+        selected: boolean;
+        active: boolean;
+        disabled: any;
+    }): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/autocomplete/Autocomplete.vue.js

@@ -0,0 +1,7 @@
+import o from "./Autocomplete.vue2.js";
+/* empty css                   */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Autocomplete.vue_vue_type_style_index_0_scoped_c7af6b8e_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-c7af6b8e"]]);
+export {
+  p as default
+};

package/components/autocomplete/Autocomplete.vue2.js

@@ -0,0 +1,89 @@
+ import "../../Autocomplete.vue_vue_type_style_index_0_scoped_c7af6b8e_lang.css"; import { defineComponent as h, computed as b, ref as r, watchEffect as y, openBlock as V, createBlock as x, unref as s, withCtx as f, createVNode as w, isRef as g, renderSlot as S, normalizeProps as k, guardReactiveProps as z } from "vue";
+import C from "../dropdown/v4/DropdownV4.vue.js";
+import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
+import "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
+import "../dropdown/v4/ChipDropdownTrigger.vue.js";
+import "../dropdown/v4/AppDropdownTrigger.vue.js";
+import "../dropdown/v4/ButtonDropdownTrigger.vue.js";
+import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
+import "../dropdown/v4/OptionV4.vue.js";
+import F from "../input/v4/TextField.vue.js";
+import { useVModel as I } from "@vueuse/core";
+const R = /* @__PURE__ */ h({
+  __name: "Autocomplete",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    size: { default: "small" },
+    label: { default: "" },
+    labelDirection: { default: "top" },
+    mandatory: { type: Boolean, default: !1 },
+    hoverHelpText: { default: "" },
+    hoverHelpTextPlacement: { default: "top" },
+    options: null,
+    displayValue: null,
+    optionNameKey: { default: "" },
+    optionsListWidth: { default: null },
+    onSearch: { type: Function, default: null },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: p }) {
+    const a = e, d = I(a, "modelValue", p), m = (t) => {
+      t !== void 0 && (d.value = a.displayValue(t));
+    }, c = (t, l) => a.displayValue(t).toLowerCase().replace(/\s+/g, "").includes(l.toLowerCase().replace(/\s+/g, "")), n = b(() => {
+      const t = d.value.toString();
+      return (a.options || []).filter((l) => a.displayValue(l) !== t).filter(
+        (l) => a.onSearch !== null ? a.onSearch(l, t) : c(l, t)
+      );
+    }), o = r(!1), u = r(!1);
+    y(() => {
+      a.disabled ? o.value = !1 : u.value && n.value.length ? o.value = !0 : n.value.length === 0 && (o.value = !1);
+    });
+    const v = () => {
+      a.disabled || !o.value && n.value.length && (o.value = !0);
+    };
+    return (t, l) => (V(), x(s(C), {
+      "is-open": o.value,
+      "onUpdate:is-open": l[3] || (l[3] = (i) => o.value = i),
+      class: "autocomplete-dropdown",
+      "display-value": e.displayValue,
+      options: s(n),
+      "option-name-key": e.optionNameKey,
+      "options-list-width": e.optionsListWidth,
+      disabled: e.disabled,
+      "search-auto-focus": !1,
+      "full-width": !1,
+      "test-id": e.testId,
+      "onUpdate:selected": m
+    }, {
+      "dropdown-trigger": f(() => [
+        w(s(F), {
+          modelValue: s(d),
+          "onUpdate:modelValue": l[0] || (l[0] = (i) => g(d) ? d.value = i : null),
+          class: "autocomplete-field",
+          placeholder: e.placeholder,
+          disabled: e.disabled,
+          size: e.size,
+          label: e.label,
+          "label-direction": e.labelDirection,
+          mandatory: e.mandatory,
+          "hover-help-text": e.hoverHelpText,
+          "hover-help-text-placemen": e.hoverHelpTextPlacement,
+          "test-id": e.testId,
+          onFocusin: l[1] || (l[1] = (i) => u.value = !0),
+          onFocusout: l[2] || (l[2] = (i) => u.value = !1),
+          onClick: v
+        }, null, 8, ["modelValue", "placeholder", "disabled", "size", "label", "label-direction", "mandatory", "hover-help-text", "hover-help-text-placemen", "test-id"])
+      ]),
+      default: f((i) => [
+        S(t.$slots, "default", k(z(i)), void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["is-open", "display-value", "options", "option-name-key", "options-list-width", "disabled", "test-id"]));
+  }
+});
+export {
+  R as default
+};

package/components/autocomplete/index.d.ts

@@ -0,0 +1,364 @@
+import Autocomplete from './Autocomplete.vue';
+declare const AutocompleteTypes: () => ({
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            label: string;
+            disabled: boolean;
+            size: "small" | "medium" | "large";
+            mandatory: boolean;
+            testId: string;
+            hoverHelpText: string;
+            hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+            modelValue: string | number;
+            placeholder: string;
+            labelDirection: "top" | "inside";
+            onSearch: (option: any, term: string) => boolean;
+            optionNameKey: string;
+            optionsListWidth: string;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            label: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            disabled: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            size: {
+                type: import("vue").PropType<"small" | "medium" | "large">;
+                default: string;
+            };
+            mandatory: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            options: {
+                type: import("vue").PropType<unknown[] | {
+                    id: string;
+                    text: string;
+                }[]>;
+                required: true;
+            };
+            hoverHelpText: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            hoverHelpTextPlacement: {
+                type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
+                default: string;
+            };
+            modelValue: {
+                type: import("vue").PropType<string | number>;
+                default: string;
+            };
+            placeholder: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            labelDirection: {
+                type: import("vue").PropType<"top" | "inside">;
+                default: string;
+            };
+            onSearch: {
+                type: import("vue").PropType<(option: any, term: string) => boolean>;
+                default: any;
+            };
+            displayValue: {
+                type: import("vue").PropType<(option: unknown) => string>;
+                required: true;
+            };
+            optionNameKey: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            optionsListWidth: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
+        }>> & {
+            "onUpdate:modelValue"?: (value: string | number) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "disabled" | "size" | "mandatory" | "testId" | "hoverHelpText" | "hoverHelpTextPlacement" | "modelValue" | "placeholder" | "labelDirection" | "onSearch" | "optionNameKey" | "optionsListWidth">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $emit: (event: "update:modelValue", value: string | number) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            label: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            disabled: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            size: {
+                type: import("vue").PropType<"small" | "medium" | "large">;
+                default: string;
+            };
+            mandatory: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            options: {
+                type: import("vue").PropType<unknown[] | {
+                    id: string;
+                    text: string;
+                }[]>;
+                required: true;
+            };
+            hoverHelpText: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            hoverHelpTextPlacement: {
+                type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
+                default: string;
+            };
+            modelValue: {
+                type: import("vue").PropType<string | number>;
+                default: string;
+            };
+            placeholder: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            labelDirection: {
+                type: import("vue").PropType<"top" | "inside">;
+                default: string;
+            };
+            onSearch: {
+                type: import("vue").PropType<(option: any, term: string) => boolean>;
+                default: any;
+            };
+            displayValue: {
+                type: import("vue").PropType<(option: unknown) => string>;
+                required: true;
+            };
+            optionNameKey: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            optionsListWidth: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
+        }>> & {
+            "onUpdate:modelValue"?: (value: string | number) => any;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (value: string | number) => void;
+        }, string, {
+            label: string;
+            disabled: boolean;
+            size: "small" | "medium" | "large";
+            mandatory: boolean;
+            testId: string;
+            hoverHelpText: string;
+            hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+            modelValue: string | number;
+            placeholder: string;
+            labelDirection: "top" | "inside";
+            onSearch: (option: any, term: string) => boolean;
+            optionNameKey: string;
+            optionsListWidth: string;
+        }, {}, string> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        label: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        disabled: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        size: {
+            type: import("vue").PropType<"small" | "medium" | "large">;
+            default: string;
+        };
+        mandatory: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        testId: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        options: {
+            type: import("vue").PropType<unknown[] | {
+                id: string;
+                text: string;
+            }[]>;
+            required: true;
+        };
+        hoverHelpText: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        hoverHelpTextPlacement: {
+            type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
+            default: string;
+        };
+        modelValue: {
+            type: import("vue").PropType<string | number>;
+            default: string;
+        };
+        placeholder: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        labelDirection: {
+            type: import("vue").PropType<"top" | "inside">;
+            default: string;
+        };
+        onSearch: {
+            type: import("vue").PropType<(option: any, term: string) => boolean>;
+            default: any;
+        };
+        displayValue: {
+            type: import("vue").PropType<(option: unknown) => string>;
+            required: true;
+        };
+        optionNameKey: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        optionsListWidth: {
+            type: import("vue").PropType<string>;
+            default: any;
+        };
+    }>> & {
+        "onUpdate:modelValue"?: (value: string | number) => any;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+    mandatory: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    options: {
+        type: import("vue").PropType<unknown[] | {
+            id: string;
+            text: string;
+        }[]>;
+        required: true;
+    };
+    hoverHelpText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    hoverHelpTextPlacement: {
+        type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<string | number>;
+        default: string;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    labelDirection: {
+        type: import("vue").PropType<"top" | "inside">;
+        default: string;
+    };
+    onSearch: {
+        type: import("vue").PropType<(option: any, term: string) => boolean>;
+        default: any;
+    };
+    displayValue: {
+        type: import("vue").PropType<(option: unknown) => string>;
+        required: true;
+    };
+    optionNameKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    optionsListWidth: {
+        type: import("vue").PropType<string>;
+        default: any;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (value: string | number) => any;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => void;
+}, string, {
+    label: string;
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+    mandatory: boolean;
+    testId: string;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    modelValue: string | number;
+    placeholder: string;
+    labelDirection: "top" | "inside";
+    onSearch: (option: any, term: string) => boolean;
+    optionNameKey: string;
+    optionsListWidth: string;
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {
+            option: unknown;
+            selected: boolean;
+            active: boolean;
+            disabled: any;
+        }): any;
+    };
+}))[];
+export { Autocomplete, AutocompleteTypes };

package/components/autocomplete/index.js

@@ -0,0 +1,6 @@
+import o from "./Autocomplete.vue.js";
+const e = () => [o];
+export {
+  o as Autocomplete,
+  e as AutocompleteTypes
+};