@ironsource/shared-ui 1.4.2-vite.1 → 1.4.3-andyk.1

package/components/toggle/Toggle.vue.js

@@ -1,6 +1,105 @@
-import o from "./Toggle.vue2.js";
-/* empty css             */import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d26e6831"]]);
-export {
-  p as default
-};
+import { defineComponent, useCssVars, openBlock, createElementBlock, createElementVNode, unref, normalizeClass, createCommentVNode, createVNode, withCtx, createTextVNode, toDisplayString, createBlock } from 'vue';
+import { ToggleTestIdModifiers } from '../../testids/index.vue.js';
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../typography/Text.vue.js';
+import { COLORS } from '../../consts/colors.vue.js';
+/* empty css                                                        */
+import "../../Toggle.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["data-testid"];
+const _hoisted_2 = ["data-testid"];
+const _hoisted_3 = { class: "toggle-head" };
+const _hoisted_4 = ["disabled", "checked", "data-testid"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Toggle",
+  props: {
+    modelValue: { type: Boolean },
+    activeText: { default: void 0 },
+    inactiveText: { default: void 0 },
+    errorText: { default: void 0 },
+    helperText: { default: void 0 },
+    isDisabled: { type: Boolean, default: false },
+    isLoading: { type: Boolean, default: false },
+    color: { default: COLORS.PRIMARY_500 },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    useCssVars((_ctx) => ({
+      "189a2944": __props.color
+    }));
+    const toggleValue = () => {
+      if (props.isDisabled)
+        return;
+      emit("update:modelValue", !props.modelValue);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", {
+          class: "toggle-wrap",
+          "data-testid": `${__props.testId}-${unref(ToggleTestIdModifiers).WRAPPER}`
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(["toggle-body", { "toggle-active": __props.modelValue, "toggle-disabled": __props.isDisabled }]),
+            "data-testid": `${__props.testId}-${unref(ToggleTestIdModifiers).BODY}`,
+            onClick: toggleValue
+          }, [
+            createElementVNode("div", _hoisted_3, [
+              __props.isLoading ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(["loader", {
+                  "loader-active": __props.modelValue
+                }])
+              }, null, 2)) : createCommentVNode("", true)
+            ])
+          ], 10, _hoisted_2),
+          createElementVNode("input", {
+            type: "checkbox",
+            disabled: __props.isDisabled,
+            checked: __props.modelValue,
+            "data-testid": `${__props.testId}-${unref(ToggleTestIdModifiers).FIELD}`,
+            class: "checkbox"
+          }, null, 8, _hoisted_4),
+          createVNode(unref(Text), {
+            size: "sm",
+            "is-truncated": "",
+            class: normalizeClass(["item-text", { "text-disabled": __props.isDisabled }]),
+            "test-id": `${__props.testId}-${unref(ToggleTestIdModifiers).TEXT}`
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.modelValue ? __props.activeText : __props.inactiveText), 1)
+            ]),
+            _: 1
+          }, 8, ["class", "test-id"])
+        ], 8, _hoisted_1),
+        createElementVNode("div", null, [
+          __props.helperText ? (openBlock(), createBlock(unref(Text), {
+            key: 0,
+            size: "caption",
+            class: "helper-text",
+            "test-id": `${__props.testId}-${unref(ToggleTestIdModifiers).HELPER_TEXT}`
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.helperText), 1)
+            ]),
+            _: 1
+          }, 8, ["test-id"])) : createCommentVNode("", true),
+          __props.errorText ? (openBlock(), createBlock(unref(Text), {
+            key: 1,
+            size: "caption",
+            class: normalizeClass(["error-text", { "error-and-help": !!__props.helperText }]),
+            "test-id": `${__props.testId}-${unref(ToggleTestIdModifiers).ERROR_TEXT}`
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.errorText), 1)
+            ]),
+            _: 1
+          }, 8, ["class", "test-id"])) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+var Toggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6b2024eb"]]);
+
+export { Toggle as default };

package/components/toggle/index.d.ts

@@ -1,6 +1,7 @@
 declare const ToggleTypes: () => import("vue").DefineComponent<{
-    color: {
+    testId: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     modelValue: {
@@ -9,29 +10,45 @@ declare const ToggleTypes: () => import("vue").DefineComponent<{
     };
     helperText: {
         type: import("vue").PropType<string>;
+    } & {
         default: any;
     };
+    color: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
     errorText: {
         type: import("vue").PropType<string>;
+    } & {
         default: any;
     };
     activeText: {
         type: import("vue").PropType<string>;
+    } & {
         default: any;
     };
     inactiveText: {
         type: import("vue").PropType<string>;
+    } & {
         default: any;
     };
     isDisabled: {
         type: import("vue").PropType<boolean>;
+    } & {
         default: boolean;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    color: {
+    testId: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     modelValue: {
@@ -40,29 +57,46 @@ declare const ToggleTypes: () => import("vue").DefineComponent<{
     };
     helperText: {
         type: import("vue").PropType<string>;
+    } & {
         default: any;
     };
+    color: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
     errorText: {
         type: import("vue").PropType<string>;
+    } & {
         default: any;
     };
     activeText: {
         type: import("vue").PropType<string>;
+    } & {
         default: any;
     };
     inactiveText: {
         type: import("vue").PropType<string>;
+    } & {
         default: any;
     };
     isDisabled: {
         type: import("vue").PropType<boolean>;
+    } & {
         default: boolean;
     };
 }>> & {
     "onUpdate:modelValue"?: (value: boolean) => any;
 }, {
-    color: string;
+    testId: string;
     helperText: string;
+    color: string;
+    isLoading: boolean;
     errorText: string;
     activeText: string;
     inactiveText: string;

package/components/toggle/index.vue.js

@@ -0,0 +1,6 @@
+import Toggle from './Toggle.vue.js';
+export { default as Toggle } from './Toggle.vue.js';
+
+const ToggleTypes = () => [Toggle];
+
+export { ToggleTypes };

package/components/tooltip/TextWithTitleContent.vue.d.ts

@@ -1,20 +1,30 @@
-declare const _default: import("vue").DefineComponent<{
-    text: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    header: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    text: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    header: {
-        type: import("vue").PropType<string>;
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    text: string;
+    header: string;
+    testId?: string;
+}>, {
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    text: string;
+    header: string;
+    testId?: string;
+}>, {
+    testId: string;
+}>>>, {
+    testId: string;
+}>;
+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;
     };
-}>>, {}>;
-export default _default;
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/tooltip/TextWithTitleContent.vue.js

@@ -0,0 +1,53 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, createTextVNode, toDisplayString } from 'vue';
+import { TooltipTestIdModifiers } from '../../testids/index.vue.js';
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../typography/Text.vue.js';
+/* empty css                                                                      */
+import "../../TextWithTitleContent.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = { class: "content-wrap" };
+const _hoisted_2 = { class: "content-header" };
+const _hoisted_3 = { class: "content-body" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TextWithTitleContent",
+  props: {
+    text: null,
+    header: null,
+    testId: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(unref(Text), {
+            size: "md",
+            "is-truncated": false,
+            strong: "",
+            "test-id": `${props.testId}-${unref(TooltipTestIdModifiers).TEXT}`
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.header), 1)
+            ]),
+            _: 1
+          }, 8, ["test-id"])
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          createVNode(unref(Text), {
+            size: "xs",
+            "is-truncated": false,
+            strong: "",
+            "test-id": `${props.testId}-${unref(TooltipTestIdModifiers).TEXT}`
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.text), 1)
+            ]),
+            _: 1
+          }, 8, ["test-id"])
+        ])
+      ]);
+    };
+  }
+});
+var TextWithTitleContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-aef63464"]]);
+
+export { TextWithTitleContent as default };

package/components/tooltip/Tooltip.vue.d.ts

@@ -1,89 +1,66 @@
-type TooltipPositions = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
-type Triggers = 'hover' | 'click' | 'focus' | 'touch';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    header: {
-        type: import("vue").PropType<string>;
-        default: any;
-    };
-    text: {
-        type: import("vue").PropType<string>;
-        default: any;
-    };
-    theme: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    delay: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    triggers: {
-        type: import("vue").PropType<Triggers[]>;
-        default: () => string[];
-    };
-    forceShowWithTruncate: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    placement: {
-        type: import("vue").PropType<TooltipPositions>;
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    header: {
-        type: import("vue").PropType<string>;
-        default: any;
-    };
-    text: {
-        type: import("vue").PropType<string>;
-        default: any;
-    };
-    theme: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    delay: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    triggers: {
-        type: import("vue").PropType<Triggers[]>;
-        default: () => string[];
-    };
-    forceShowWithTruncate: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    placement: {
-        type: import("vue").PropType<TooltipPositions>;
-        default: string;
-    };
-}>>, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    text?: string;
+    header?: string;
+    delay?: number;
+    triggers?: ("hover" | "click" | "focus" | "touch")[];
+    forceShowWithTruncate?: boolean;
+    placement?: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+    theme?: string;
+    disabled?: boolean;
+    testId?: string;
+}>, {
+    text: any;
+    header: any;
+    delay: number;
+    triggers: () => string[];
+    forceShowWithTruncate: boolean;
+    placement: string;
+    theme: string;
+    disabled: boolean;
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    text?: string;
+    header?: string;
+    delay?: number;
+    triggers?: ("hover" | "click" | "focus" | "touch")[];
+    forceShowWithTruncate?: boolean;
+    placement?: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+    theme?: string;
+    disabled?: boolean;
+    testId?: string;
+}>, {
+    text: any;
+    header: any;
+    delay: number;
+    triggers: () => string[];
+    forceShowWithTruncate: boolean;
+    placement: string;
+    theme: string;
+    disabled: boolean;
+    testId: string;
+}>>>, {
     header: string;
     text: string;
+    testId: string;
     theme: string;
-    disabled: boolean;
     delay: number;
-    triggers: Triggers[];
+    triggers: ("hover" | "click" | "focus" | "touch")[];
     forceShowWithTruncate: boolean;
-    placement: TooltipPositions;
-}>, {
-    default?(_: {}): any;
-    tooltip?(_: {
-        text: any;
-    }): any;
+    placement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+    disabled: boolean;
 }>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+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 ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/tooltip/Tooltip.vue.js

@@ -1,79 +1,101 @@
-import { defineComponent as y, ref as r, useSlots as v, watch as f, openBlock as i, createBlock as d, unref as h, mergeProps as w, withCtx as u, renderSlot as m, createTextVNode as g, toDisplayString as T, createElementVNode as S, nextTick as k } from "vue";
-import W from "./TextWithTitleContent.vue2.js";
-/* empty css                          */import b from "../typography/Text.vue.js";
-import { Tooltip as B } from "floating-vue";
-const N = /* @__PURE__ */ y({
+import { defineComponent, ref, useSlots, watch, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, createElementVNode, nextTick } from 'vue';
+import TextWithTitleContent from './TextWithTitleContent.vue.js';
+import { TooltipTestIdModifiers } from '../../testids/index.vue.js';
+/* empty css                                                                     */import Text from '../typography/Text.vue.js';
+import { Tooltip } from 'floating-vue';
+/* empty css                                             */
+import "../../Tooltip.vue_vue_type_style_index_0_lang.css";
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Tooltip",
   props: {
     text: { default: null },
     header: { default: null },
     delay: { default: 0 },
     triggers: { default: () => ["hover"] },
-    forceShowWithTruncate: { type: Boolean, default: !1 },
+    forceShowWithTruncate: { type: Boolean, default: false },
     placement: { default: "top" },
     theme: { default: "default" },
-    disabled: { type: Boolean, default: !1 }
+    disabled: { type: Boolean, default: false },
+    testId: { default: "" }
   },
-  setup(e) {
-    const a = e, o = r(!1), l = r(null), n = r(null), p = v(), s = () => o.value ? a.text : null, c = async () => {
-      if (o.value = !0, await k(), !a.forceShowWithTruncate) {
-        const t = n.value?.children && n.value.children[0];
-        (t && window.getComputedStyle(t, null).getPropertyValue("text-overflow")) === "ellipsis" && (o.value = t.offsetWidth < t.scrollWidth);
+  setup(__props) {
+    const props = __props;
+    const showTooltip = ref(false);
+    const textForDisplay = ref(null);
+    const container = ref(null);
+    const slots = useSlots();
+    const getText = () => showTooltip.value ? props.text : null;
+    const checkShouldShowTooltip = async () => {
+      showTooltip.value = true;
+      await nextTick();
+      if (!props.forceShowWithTruncate) {
+        const slotElement = container.value?.children && container.value.children[0];
+        const textOverflow = slotElement && window.getComputedStyle(slotElement, null).getPropertyValue("text-overflow");
+        if (textOverflow === "ellipsis") {
+          showTooltip.value = slotElement.offsetWidth < slotElement.scrollWidth;
+        }
       }
     };
-    return f(
-      () => a.text,
+    watch(
+      () => props.text,
       async () => {
-        await c(), l.value = s();
+        await checkShouldShowTooltip();
+        textForDisplay.value = getText();
       },
-      { immediate: !0 }
-    ), f(
-      () => p.default,
+      { immediate: true }
+    );
+    watch(
+      () => slots.default,
       async () => {
-        await c(), l.value = s();
+        await checkShouldShowTooltip();
+        textForDisplay.value = getText();
       },
-      { immediate: !0 }
-    ), (t, x) => (i(), d(h(B), w(t.$props, {
-      theme: e.theme,
-      "no-auto-focus": "",
-      triggers: e.triggers,
-      delay: { show: e.delay, hide: 0 },
-      placement: e.placement,
-      disabled: e.disabled || e.text && !l.value,
-      "auto-hide": ""
-    }), {
-      popper: u(() => [
-        m(t.$slots, "tooltip", { text: l.value }, () => [
-          e.header ? (i(), d(W, {
-            key: 1,
-            text: e.text,
-            header: e.header
-          }, null, 8, ["text", "header"])) : (i(), d(h(b), {
-            key: 0,
-            size: "sm",
-            "is-truncated": !1,
-            strong: ""
-          }, {
-            default: u(() => [
-              g(T(l.value), 1)
-            ]),
-            _: 1
-          }))
-        ])
-      ]),
-      default: u(() => [
-        S("div", {
-          ref_key: "container",
-          ref: n,
-          class: "container"
-        }, [
-          m(t.$slots, "default")
-        ], 512)
-      ]),
-      _: 3
-    }, 16, ["theme", "triggers", "delay", "placement", "disabled"]));
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Tooltip), mergeProps(_ctx.$props, {
+        theme: __props.theme,
+        "no-auto-focus": "",
+        triggers: __props.triggers,
+        delay: { show: __props.delay, hide: 0 },
+        placement: __props.placement,
+        disabled: __props.disabled || __props.text && !textForDisplay.value,
+        "data-testid": `${__props.testId}-${unref(TooltipTestIdModifiers).TRIGGER}`,
+        "auto-hide": ""
+      }), {
+        popper: withCtx(() => [
+          renderSlot(_ctx.$slots, "tooltip", { text: textForDisplay.value }, () => [
+            !__props.header ? (openBlock(), createBlock(unref(Text), {
+              key: 0,
+              size: "sm",
+              "is-truncated": false,
+              strong: "",
+              "test-id": `${__props.testId}-${unref(TooltipTestIdModifiers).TEXT}`
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(textForDisplay.value), 1)
+              ]),
+              _: 1
+            }, 8, ["test-id"])) : (openBlock(), createBlock(TextWithTitleContent, {
+              key: 1,
+              text: __props.text,
+              header: __props.header
+            }, null, 8, ["text", "header"]))
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            ref_key: "container",
+            ref: container,
+            class: "container"
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 512)
+        ]),
+        _: 3
+      }, 16, ["theme", "triggers", "delay", "placement", "disabled", "data-testid"]);
+    };
   }
 });
-export {
-  N as default
-};
+
+export { _sfc_main as default };