@ironsource/shared-ui 1.4.2-test.3 → 1.4.2-test.5

package/src/components/tabs/Tabs.vue.js

@@ -0,0 +1,125 @@
+import { defineComponent, useCssVars, ref, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, createBlock, unref, createCommentVNode, withCtx, createTextVNode, toDisplayString, pushScopeId, popScopeId, createElementVNode } from 'vue';
+import '../typography/Heading.vue.js';
+import Text from '../typography/Text.vue.js';
+import Icon from '../icon/Icon.vue.js';
+/* empty css                                                      */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+////import "../../Tabs.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _withScopeId = (n) => (pushScopeId("data-v-43f1459d"), n = n(), popScopeId(), n);
+const _hoisted_1 = ["onClick", "onMouseover"];
+const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "tabs-border-line" }, null, -1));
+const _hoisted_3 = {
+  key: 0,
+  class: "tabs-border-line-hover"
+};
+const fixUnderlineLength = 12;
+const _sfc_main = defineComponent({
+  __name: "Tabs",
+  props: {
+    tabsList: { default: () => [] },
+    selectedTab: {},
+    variant: { default: "fill" },
+    size: { default: "sm" }
+  },
+  emits: ["update:selectedTab"],
+  setup(__props, { emit }) {
+    const props = __props;
+    useCssVars((_ctx) => ({
+      "87ea7e12": selectedTabPosition.value,
+      "fb546e90": selectedTabWidth.value,
+      "b3e2e0ba": selectedTabCenter.value,
+      "2213a50a": hoveredTabCenter.value
+    }));
+    const tabsNewList = ref([]);
+    const hoveredTab = ref(null);
+    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", [_ctx.size, _ctx.variant]])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.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 === _ctx.selectedTab
+            }]),
+            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: _ctx.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_1);
+        }), 128)),
+        _hoisted_2,
+        isHovered.value ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43f1459d"]]);
+
+export { Tabs as default };

package/src/components/tabs/index.vue.js

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

package/src/components/textArea/TextArea.vue.js

@@ -0,0 +1,67 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createTextVNode, toDisplayString, createCommentVNode, createElementVNode } from 'vue';
+import '../typography/Heading.vue.js';
+import Text from '../typography/Text.vue.js';
+/* empty css                                                          */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+////import "../../TextArea.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = {
+  key: 0,
+  class: "label-container"
+};
+const _hoisted_2 = ["value", "placeholder", "disabled"];
+const _hoisted_3 = {
+  key: 1,
+  class: "extra-text-container"
+};
+const _sfc_main = defineComponent({
+  __name: "TextArea",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: false },
+    label: { default: "" },
+    feedbackHelpText: { default: "" },
+    feedbackErrorText: { 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: _ctx.disabled })
+      }, [
+        _ctx.label ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(unref(Text), { class: "label" }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.label), 1)
+            ]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true),
+        createElementVNode("textarea", {
+          class: "textarea",
+          value: _ctx.modelValue,
+          placeholder: _ctx.placeholder,
+          disabled: _ctx.disabled,
+          onInput: handleInput
+        }, null, 40, _hoisted_2),
+        _ctx.feedbackErrorText || _ctx.feedbackHelpText ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createVNode(unref(Text), {
+            class: normalizeClass({ [_ctx.feedbackErrorText ? "error" : "help"]: true }),
+            size: "caption"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.feedbackErrorText || _ctx.feedbackHelpText), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+var TextArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-78bc849c"]]);
+
+export { TextArea as default };

package/src/components/textArea/index.vue.js

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

package/src/components/toggle/Toggle.vue.js

@@ -0,0 +1,89 @@
+import { defineComponent, useCssVars, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, unref, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, pushScopeId, popScopeId } from 'vue';
+import '../typography/Heading.vue.js';
+import Text from '../typography/Text.vue.js';
+import { COLORS } from '../../consts/colors.vue.js';
+/* empty css                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+////import "../../Toggle.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _withScopeId = (n) => (pushScopeId("data-v-6627e5c5"), n = n(), popScopeId(), n);
+const _hoisted_1 = { class: "toggle-wrap" };
+const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "toggle-head" }, null, -1));
+const _hoisted_3 = [
+  _hoisted_2
+];
+const _hoisted_4 = ["disabled", "checked"];
+const _sfc_main = 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 },
+    color: { default: COLORS.PRIMARY_500 }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    useCssVars((_ctx) => ({
+      "a1fed734": _ctx.color
+    }));
+    const toggleValue = () => {
+      if (props.isDisabled)
+        return;
+      emit("update:modelValue", !props.modelValue);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", {
+            class: normalizeClass(["toggle-body", { "toggle-active": _ctx.modelValue, "toggle-disabled": _ctx.isDisabled }]),
+            onClick: toggleValue
+          }, _hoisted_3, 2),
+          createElementVNode("input", {
+            type: "checkbox",
+            disabled: _ctx.isDisabled,
+            checked: _ctx.modelValue,
+            class: "checkbox"
+          }, null, 8, _hoisted_4),
+          createVNode(unref(Text), {
+            size: "sm",
+            "is-truncated": "",
+            class: normalizeClass(["item-text", { "text-disabled": _ctx.isDisabled }])
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.modelValue ? _ctx.activeText : _ctx.inactiveText), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ]),
+        createElementVNode("div", null, [
+          _ctx.helperText ? (openBlock(), createBlock(unref(Text), {
+            key: 0,
+            size: "caption",
+            class: "helper-text"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.helperText), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          _ctx.errorText ? (openBlock(), createBlock(unref(Text), {
+            key: 1,
+            size: "caption",
+            class: normalizeClass(["error-text", { "error-and-help": !!_ctx.helperText }])
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.errorText), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+var Toggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6627e5c5"]]);
+
+export { Toggle as default };

package/src/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/src/components/tooltip/TextWithTitleContent.vue.js

@@ -0,0 +1,49 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, createTextVNode, toDisplayString } from 'vue';
+import '../typography/Heading.vue.js';
+import Text from '../typography/Text.vue.js';
+/* empty css                                                                      */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+////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 = defineComponent({
+  __name: "TextWithTitleContent",
+  props: {
+    text: {},
+    header: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(unref(Text), {
+            size: "md",
+            "is-truncated": false,
+            strong: ""
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.header), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          createVNode(unref(Text), {
+            size: "xs",
+            "is-truncated": false,
+            strong: ""
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.text), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+});
+var TextWithTitleContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5b51333e"]]);
+
+export { TextWithTitleContent as default };

package/src/components/tooltip/Tooltip.vue.js

@@ -0,0 +1,98 @@
+import { defineComponent, ref, useSlots, watch, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, createElementVNode, nextTick } from 'vue';
+import TextWithTitleContent from './TextWithTitleContent.vue.js';
+import '../typography/Heading.vue.js';
+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 = 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 }
+  },
+  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: _ctx.theme,
+        "no-auto-focus": "",
+        triggers: _ctx.triggers,
+        delay: { show: _ctx.delay, hide: 0 },
+        placement: _ctx.placement,
+        disabled: _ctx.disabled || _ctx.text && !textForDisplay.value,
+        "auto-hide": ""
+      }), {
+        popper: withCtx(() => [
+          renderSlot(_ctx.$slots, "tooltip", { text: textForDisplay.value }, () => [
+            !_ctx.header ? (openBlock(), createBlock(unref(Text), {
+              key: 0,
+              size: "sm",
+              "is-truncated": false,
+              strong: ""
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(textForDisplay.value), 1)
+              ]),
+              _: 1
+            })) : (openBlock(), createBlock(TextWithTitleContent, {
+              key: 1,
+              text: _ctx.text,
+              header: _ctx.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"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/src/components/tooltip/index.vue.js

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

package/src/components/typography/Heading.vue.js

@@ -0,0 +1,33 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+/* 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 = defineComponent({
+  __name: "Heading",
+  props: {
+    isTruncated: { type: Boolean },
+    level: { default: "1" }
+  },
+  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(tag.value), {
+        class: normalizeClass(["heading", { truncate: _ctx.isTruncated }])
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+});
+var Heading = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cc7b6ce8"]]);
+
+export { Heading as default };

package/src/components/typography/Text.vue.js

@@ -0,0 +1,28 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+/* 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 _sfc_main = defineComponent({
+  __name: "Text",
+  props: {
+    isTruncated: { type: Boolean },
+    strong: { type: Boolean },
+    size: { default: "md" }
+  },
+  setup(__props) {
+    const props = __props;
+    const sizeClass = computed(() => {
+      return `text-size-${props.size}`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(["text", { strong: _ctx.strong, [sizeClass.value]: true, truncate: _ctx.isTruncated }])
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+var Text = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5f640dd6"]]);
+
+export { Text as default };

package/src/components/typography/index.vue.js

@@ -0,0 +1,8 @@
+import Heading from './Heading.vue.js';
+export { default as Heading } from './Heading.vue.js';
+import Text from './Text.vue.js';
+export { default as Text } from './Text.vue.js';
+
+const TypographyTypes = () => [Heading, Text];
+
+export { TypographyTypes };

package/src/composables/useId.vue.js

@@ -0,0 +1,15 @@
+import { inject, computed, unref } from 'vue';
+
+const defaultIdInjection = {
+  prefix: Math.floor(Math.random() * 1e4),
+  current: 0
+};
+const ID_INJECTION_KEY = Symbol("elIdInjection");
+const useId = (deterministicId) => {
+  const idInjection = inject(ID_INJECTION_KEY, defaultIdInjection);
+  return computed(
+    () => unref(deterministicId) || `el-id-${idInjection.prefix}-${idInjection.current++}`
+  );
+};
+
+export { ID_INJECTION_KEY, useId };

package/src/composables/useIsFocusVisible.vue.js

@@ -0,0 +1,34 @@
+import { ref } from 'vue';
+
+function isFocusVisible(event) {
+  const { target } = event;
+  try {
+    return target.matches(":focus-visible");
+  } catch (error) {
+    console.info("browser does not support focus-visible");
+  }
+}
+function useIsFocusVisible() {
+  const isFocusVisibleRef = ref(false);
+  function handleBlurVisible() {
+    if (isFocusVisibleRef.value) {
+      isFocusVisibleRef.value = false;
+      return true;
+    }
+    return false;
+  }
+  function handleFocusVisible(event) {
+    if (isFocusVisible(event)) {
+      isFocusVisibleRef.value = true;
+      return true;
+    }
+    return false;
+  }
+  return {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible
+  };
+}
+
+export { useIsFocusVisible as default };

package/src/composables/useSearch.vue.js

@@ -0,0 +1,18 @@
+import { computed } from 'vue';
+
+function useSearch({
+  searchAttribute
+}) {
+  const onSearch = computed(() => {
+    return (option, query) => {
+      try {
+        return option[searchAttribute].search(new RegExp(query, "i")) >= 0;
+      } catch {
+        return false;
+      }
+    };
+  });
+  return onSearch;
+}
+
+export { useSearch };

package/src/composables/useToggle.vue.js

@@ -0,0 +1,27 @@
+import { ref } from 'vue';
+
+function useToggle({
+  initialValue,
+  disabled
+} = {}) {
+  const open = ref(initialValue);
+  const disabledRef = ref(disabled);
+  function disable(value) {
+    disabledRef.value = value ?? true;
+    return disabledRef.value;
+  }
+  function toggle(...args) {
+    if (disabledRef.value) {
+      return;
+    }
+    if (args.length && typeof args[0] !== "undefined") {
+      open.value = args[0];
+      return open.value;
+    }
+    open.value = !open.value;
+    return open.value;
+  }
+  return [open, toggle, disable];
+}
+
+export { useToggle };

package/src/consts/colors.vue.js

@@ -0,0 +1,7 @@
+const COLORS = {
+  PRIMARY_500: "#3083FF",
+  A: "#ffc134",
+  B: "#4f4ff5"
+};
+
+export { COLORS };