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

package/components/tabs/Tabs.vue.js

@@ -1,129 +0,0 @@
-import { defineComponent, useCssVars, unref, ref, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, createBlock, createCommentVNode, withCtx, createTextVNode, toDisplayString, pushScopeId, popScopeId, createElementVNode } from 'vue';
-import { TabsTestIdModifiers } 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 Icon from '../icon/Icon.vue.js';
-/* empty css                                                      */
-import "../../Tabs.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _withScopeId = (n) => (pushScopeId("data-v-c22c2836"), n = n(), popScopeId(), n);
-const _hoisted_1 = ["data-testid"];
-const _hoisted_2 = ["data-testid", "onClick", "onMouseover"];
-const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "tabs-border-line" }, null, -1));
-const _hoisted_4 = {
-  key: 0,
-  class: "tabs-border-line-hover"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Tabs",
-  props: {
-    tabsList: { default: () => [] },
-    selectedTab: null,
-    variant: { default: "fill" },
-    size: { default: "sm" },
-    testId: { default: "" }
-  },
-  emits: ["update:selectedTab"],
-  setup(__props, { emit }) {
-    const props = __props;
-    useCssVars((_ctx) => ({
-      "99d50838": unref(selectedTabPosition),
-      "1eedbceb": unref(selectedTabWidth),
-      "c715bc60": unref(selectedTabCenter),
-      "e8e3bca4": unref(hoveredTabCenter)
-    }));
-    const tabsNewList = ref([]);
-    const hoveredTab = ref(null);
-    const fixUnderlineLength = 12;
-    const skipUnwrap = { tabsNewList };
-    const isHovered = computed(
-      () => hoveredTab.value && hoveredTab.value !== props.selectedTab
-    );
-    const selectedTabPosition = computed(() => {
-      const selectedIndex = getSelectedTabIndex();
-      return tabsNewList.value[selectedIndex]?.offsetLeft + "px";
-    });
-    const getSelectedTabIndex = () => {
-      return props.tabsList.findIndex((tab) => tab.id === props.selectedTab);
-    };
-    const selectedTabWidth = computed(() => {
-      const selectedIndex = getSelectedTabIndex();
-      return tabsNewList.value[selectedIndex]?.clientWidth + "px";
-    });
-    const computeTabCenter = (hoveredIndex) => {
-      const left = tabsNewList.value[hoveredIndex]?.offsetLeft;
-      const width = tabsNewList.value[hoveredIndex]?.clientWidth;
-      const computedBorderWidth = parseFloat(left) + parseFloat(width) / 2 - fixUnderlineLength;
-      return computedBorderWidth.toString() + "px";
-    };
-    const selectedTabCenter = computed(() => {
-      const selectedIndex = getSelectedTabIndex();
-      return computeTabCenter(selectedIndex);
-    });
-    const getHoveredTabIndex = () => {
-      return props.tabsList.findIndex((tab) => tab.id === hoveredTab.value);
-    };
-    const hoveredTabCenter = computed(() => {
-      const hoveredIndex = getHoveredTabIndex();
-      return computeTabCenter(hoveredIndex);
-    });
-    const selectTab = (tab) => {
-      emit("update:selectedTab", tab.id);
-    };
-    const setHover = (tab) => {
-      if (tab === null)
-        return;
-      hoveredTab.value = tab["id"];
-    };
-    const clearHover = () => {
-      hoveredTab.value = null;
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("ul", {
-        class: normalizeClass(["tabs-wrap", [__props.size, __props.variant]]),
-        "data-testid": `${__props.testId}-${unref(TabsTestIdModifiers).WRAPPER}`
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabsList, (tab) => {
-          return openBlock(), createElementBlock("li", {
-            ref_for: true,
-            ref: skipUnwrap.tabsNewList,
-            key: tab.id,
-            class: normalizeClass(["tab-item", {
-              "disabled-tab": tab.disabled,
-              "selected-tab": tab.id === __props.selectedTab
-            }]),
-            "data-testid": `${__props.testId}-${unref(TabsTestIdModifiers).TAB}-${tab.id}`,
-            onClick: ($event) => selectTab(tab),
-            onMouseover: ($event) => setHover(tab),
-            onMouseleave: clearHover
-          }, [
-            renderSlot(_ctx.$slots, "default", { tab }, () => [
-              tab.iconName ? (openBlock(), createBlock(unref(Icon), {
-                key: 0,
-                name: tab.iconName,
-                class: normalizeClass(["tab-icon", {
-                  size: __props.size,
-                  "lone-icon": !tab.name
-                }])
-              }, null, 8, ["name", "class"])) : createCommentVNode("", true),
-              tab.name ? (openBlock(), createBlock(unref(Text), {
-                key: 1,
-                size: "sm",
-                strong: ""
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(tab.name), 1)
-                ]),
-                _: 2
-              }, 1024)) : createCommentVNode("", true)
-            ], true)
-          ], 42, _hoisted_2);
-        }), 128)),
-        _hoisted_3,
-        unref(isHovered) ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("", true)
-      ], 10, _hoisted_1);
-    };
-  }
-});
-var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c22c2836"]]);
-
-export { Tabs as default };

package/components/textArea/TextArea.vue.js

@@ -1,73 +0,0 @@
-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/toggle/Toggle.vue.js

@@ -1,105 +0,0 @@
-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/tooltip/TextWithTitleContent.vue.js

@@ -1,53 +0,0 @@
-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.js

@@ -1,101 +0,0 @@
-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 };

package/components/typography/Heading.vue.js

@@ -1,36 +0,0 @@
-import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, unref, normalizeClass, withCtx, renderSlot } from 'vue';
-import { HeaderTestIdModifiers } from '../../testids/index.vue.js';
-/* empty css                                                         */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
-import "../../Heading.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Heading",
-  props: {
-    isTruncated: { type: Boolean },
-    level: { default: "1" },
-    testId: { default: "" }
-  },
-  setup(__props) {
-    const props = __props;
-    const tag = computed(() => {
-      if (props.level === "label") {
-        return "label";
-      }
-      return `h${props.level}`;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(unref(tag)), {
-        class: normalizeClass(["heading", { truncate: __props.isTruncated }]),
-        "data-testid": `${__props.testId}-${unref(HeaderTestIdModifiers).HEADER}`
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ]),
-        _: 3
-      }, 8, ["class", "data-testid"]);
-    };
-  }
-});
-var Heading = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fe98da04"]]);
-
-export { Heading as default };

package/components/typography/Text.vue.js

@@ -1,32 +0,0 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from 'vue';
-import { TextTestIdModifiers } from '../../testids/index.vue.js';
-/* empty css                                                      */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
-import "../../Text.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = ["data-testid"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Text",
-  props: {
-    isTruncated: { type: Boolean },
-    strong: { type: Boolean },
-    size: { default: "md" },
-    testId: { default: "" }
-  },
-  setup(__props) {
-    const props = __props;
-    const sizeClass = computed(() => {
-      return `text-size-${props.size}`;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        class: normalizeClass(["text", { strong: __props.strong, [unref(sizeClass)]: true, truncate: __props.isTruncated }]),
-        "data-testid": `${__props.testId}-${unref(TextTestIdModifiers).TEXT}`
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 10, _hoisted_1);
-    };
-  }
-});
-var Text = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6659fd26"]]);
-
-export { Text as default };