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

package/components/tabs/index.vue.js

@@ -1,6 +1,6 @@
-import o from "./Tabs.vue.vue.js";
-const p = () => [o];
-export {
-  o as Tabs,
-  p as TabsTypes
-};
+import Tabs from './Tabs.vue.js';
+export { default as Tabs } from './Tabs.vue.js';
+
+const TabsTypes = () => [Tabs];
+
+export { TabsTypes };

package/components/textArea/TextArea.vue.d.ts

@@ -54,10 +54,7 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
-    }> : P[K];
+    } : P[K];
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/components/textArea/TextArea.vue.js

@@ -0,0 +1,73 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, createElementVNode } from 'vue';
+import { TextAreaTestIdModifiers } 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 "../../TextArea.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["data-testid"];
+const _hoisted_2 = ["data-testid"];
+const _hoisted_3 = ["value", "placeholder", "disabled", "data-testid"];
+const _hoisted_4 = {
+  key: 1,
+  class: "extra-text-container"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TextArea",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: false },
+    label: { default: "" },
+    feedbackHelpText: { default: "" },
+    feedbackErrorText: { default: "" },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const handleInput = (event) => {
+      emit("update:modelValue", event.target.value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass({ "textarea-with-label-container": true, disabled: __props.disabled }),
+        "data-testid": `${__props.testId}-${unref(TextAreaTestIdModifiers).WRAPPER}`
+      }, [
+        __props.label ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "label-container",
+          "data-testid": `${__props.testId}-${unref(TextAreaTestIdModifiers).LABEL}`
+        }, [
+          createVNode(unref(Text), { class: "label" }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.label), 1)
+            ]),
+            _: 1
+          })
+        ], 8, _hoisted_2)) : createCommentVNode("", true),
+        createElementVNode("textarea", {
+          class: "textarea",
+          value: __props.modelValue,
+          placeholder: __props.placeholder,
+          disabled: __props.disabled,
+          "data-testid": `${__props.testId}-${unref(TextAreaTestIdModifiers).FIELD}`,
+          onInput: handleInput
+        }, null, 40, _hoisted_3),
+        __props.feedbackErrorText || __props.feedbackHelpText ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          createVNode(unref(Text), {
+            class: normalizeClass({ [__props.feedbackErrorText ? "error" : "help"]: true }),
+            "data-testid": `${__props.testId}-${unref(TextAreaTestIdModifiers).TEXT}`,
+            size: "caption"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.feedbackErrorText || __props.feedbackHelpText), 1)
+            ]),
+            _: 1
+          }, 8, ["class", "data-testid"])
+        ])) : createCommentVNode("", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+var TextArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6197672e"]]);
+
+export { TextArea as default };

package/components/textArea/index.d.ts

@@ -1,30 +1,37 @@
 declare const TextAreaTypes: () => import("vue").DefineComponent<{
     label: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     testId: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     disabled: {
         type: import("vue").PropType<boolean>;
+    } & {
         default: boolean;
     };
     modelValue: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     placeholder: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     feedbackHelpText: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     feedbackErrorText: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -32,30 +39,37 @@ declare const TextAreaTypes: () => import("vue").DefineComponent<{
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     testId: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     disabled: {
         type: import("vue").PropType<boolean>;
+    } & {
         default: boolean;
     };
     modelValue: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     placeholder: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     feedbackHelpText: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     feedbackErrorText: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
 }>> & {

package/components/textArea/index.vue.js

@@ -1,6 +1,6 @@
-import e from "./TextArea.vue.vue.js";
-const t = () => [e];
-export {
-  e as TextArea,
-  t as TextAreaTypes
-};
+import TextArea from './TextArea.vue.js';
+export { default as TextArea } from './TextArea.vue.js';
+
+const TextAreaTypes = () => [TextArea];
+
+export { TextAreaTypes };

package/components/toggle/Toggle.vue.d.ts

@@ -61,10 +61,7 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
-    }> : P[K];
+    } : P[K];
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/components/toggle/Toggle.vue.js

@@ -0,0 +1,105 @@
+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<{
     testId: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     modelValue: {
@@ -9,30 +10,37 @@ 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, {
@@ -40,6 +48,7 @@ declare const ToggleTypes: () => import("vue").DefineComponent<{
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     testId: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     modelValue: {
@@ -48,30 +57,37 @@ 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;
     };
 }>> & {

package/components/toggle/index.vue.js

@@ -1,6 +1,6 @@
-import o from "./Toggle.vue.vue.js";
-const g = () => [o];
-export {
-  o as Toggle,
-  g as ToggleTypes
-};
+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

@@ -24,10 +24,7 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
-    }> : P[K];
+    } : P[K];
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[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,11 +1,11 @@
-type Triggers = 'hover' | 'click' | 'focus' | 'touch';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+import { TooltipPositions } from './Tooltip.types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     text?: string;
     header?: string;
     delay?: number;
-    triggers?: Triggers[];
+    triggers?: ("hover" | "click" | "focus" | "touch")[];
     forceShowWithTruncate?: boolean;
-    placement?: "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";
+    placement?: TooltipPositions;
     theme?: string;
     disabled?: boolean;
     testId?: string;
@@ -23,9 +23,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     text?: string;
     header?: string;
     delay?: number;
-    triggers?: Triggers[];
+    triggers?: ("hover" | "click" | "focus" | "touch")[];
     forceShowWithTruncate?: boolean;
-    placement?: "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";
+    placement?: TooltipPositions;
     theme?: string;
     disabled?: boolean;
     testId?: string;
@@ -45,15 +45,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
     testId: string;
     delay: number;
-    triggers: Triggers[];
+    triggers: ("hover" | "click" | "focus" | "touch")[];
     forceShowWithTruncate: boolean;
-    placement: "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";
+    placement: TooltipPositions;
     disabled: boolean;
-}>, {
-    default?(_: {}): any;
-    tooltip?(_: {
-        text: any;
-    }): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -66,15 +61,7 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? 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;
-    };
+    } : P[K];
 };

package/components/tooltip/Tooltip.vue.js

@@ -0,0 +1,101 @@
+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: false },
+    placement: { default: "top" },
+    theme: { default: "default" },
+    disabled: { type: Boolean, default: false },
+    testId: { default: "" }
+  },
+  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;
+        }
+      }
+    };
+    watch(
+      () => props.text,
+      async () => {
+        await checkShouldShowTooltip();
+        textForDisplay.value = getText();
+      },
+      { immediate: true }
+    );
+    watch(
+      () => slots.default,
+      async () => {
+        await checkShouldShowTooltip();
+        textForDisplay.value = getText();
+      },
+      { 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 { _sfc_main as default };