@ironsource/shared-ui 1.4.0-rc.10

package/components/tooltip/Tooltip.vue.js

@@ -0,0 +1,97 @@
+import { defineComponent, ref, useSlots, watch, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, createElementVNode, nextTick } from 'vue';
+import { Tooltip } from 'floating-vue';
+/* empty css                                                                     */import Text from '../typography/Text.vue.js';
+import TextWithTitleContent from './TextWithTitleContent.vue.js';
+/* 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 }
+  },
+  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,
+        "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: ""
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(textForDisplay.value), 1)
+              ]),
+              _: 1
+            })) : (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"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/components/tooltip/index.d.ts

@@ -0,0 +1,94 @@
+declare const TooltipTypes: () => 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;
+    };
+    delay: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    triggers: {
+        type: import("vue").PropType<("hover" | "click" | "focus" | "touch")[]>;
+    } & {
+        default: () => string[];
+    };
+    forceShowWithTruncate: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    placement: {
+        type: import("vue").PropType<"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">;
+    } & {
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+}, {}, 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;
+    };
+    delay: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    triggers: {
+        type: import("vue").PropType<("hover" | "click" | "focus" | "touch")[]>;
+    } & {
+        default: () => string[];
+    };
+    forceShowWithTruncate: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    placement: {
+        type: import("vue").PropType<"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">;
+    } & {
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+}>>, {
+    header: string;
+    text: string;
+    theme: 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";
+    disabled: boolean;
+}>[];
+export { default as Tooltip } from './Tooltip.vue';
+export { TooltipTypes };

package/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/components/tooltip/storybookComponents/CustomTooltip.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    args: unknown;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    args: unknown;
+}>>>, {}>;
+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;
+    };
+};

package/components/typography/Heading.vue.d.ts

@@ -0,0 +1,28 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    isTruncated?: boolean;
+    level?: '1' | '2' | '3' | '4' | '5' | '6' | 'label';
+}>, {
+    level: 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<{
+    isTruncated?: boolean;
+    level?: '1' | '2' | '3' | '4' | '5' | '6' | 'label';
+}>, {
+    level: string;
+}>>>, {
+    level: '1' | '2' | '3' | '4' | '5' | '6' | 'label';
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/typography/Heading.vue.js

@@ -0,0 +1,33 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, unref, 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 = /* @__PURE__ */ 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(unref(tag)), {
+        class: normalizeClass(["heading", { truncate: __props.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/components/typography/Text.vue.d.ts

@@ -0,0 +1,30 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    isTruncated?: boolean;
+    strong?: boolean;
+    size?: 'caption' | 'xs' | 'sm' | 'md' | 'lg';
+}>, {
+    size: 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<{
+    isTruncated?: boolean;
+    strong?: boolean;
+    size?: 'caption' | 'xs' | 'sm' | 'md' | 'lg';
+}>, {
+    size: string;
+}>>>, {
+    size: 'caption' | 'xs' | 'sm' | 'md' | 'lg';
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/typography/Text.vue.js

@@ -0,0 +1,28 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, 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 = /* @__PURE__ */ 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: __props.strong, [unref(sizeClass)]: true, truncate: __props.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/components/typography/index.d.ts

@@ -0,0 +1,50 @@
+declare const TypographyTypes: () => (import("vue").DefineComponent<{
+    level: {
+        type: import("vue").PropType<"label" | "1" | "2" | "3" | "4" | "5" | "6">;
+    } & {
+        default: string;
+    };
+    isTruncated: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    level: {
+        type: import("vue").PropType<"label" | "1" | "2" | "3" | "4" | "5" | "6">;
+    } & {
+        default: string;
+    };
+    isTruncated: {
+        type: import("vue").PropType<boolean>;
+    };
+}>>, {
+    level: "label" | "1" | "2" | "3" | "4" | "5" | "6";
+}> | import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<"md" | "sm" | "lg" | "caption" | "xs">;
+    } & {
+        default: string;
+    };
+    strong: {
+        type: import("vue").PropType<boolean>;
+    };
+    isTruncated: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<"md" | "sm" | "lg" | "caption" | "xs">;
+    } & {
+        default: string;
+    };
+    strong: {
+        type: import("vue").PropType<boolean>;
+    };
+    isTruncated: {
+        type: import("vue").PropType<boolean>;
+    };
+}>>, {
+    size: "md" | "sm" | "lg" | "caption" | "xs";
+}>)[];
+export { default as Heading } from './Heading.vue';
+export { default as Text } from './Text.vue';
+export { TypographyTypes };

package/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/composables/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useToggle';
+export * from './useSearch';
+export * from './useId';

package/composables/useId.d.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { MaybeRef } from '@vueuse/core';
+export type ElIdInjectionContext = {
+    prefix: number;
+    current: number;
+};
+export declare const ID_INJECTION_KEY: InjectionKey<ElIdInjectionContext>;
+export declare const useId: (deterministicId?: MaybeRef<string>) => Ref<string>;

package/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/composables/useIsFocusVisible.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+export interface UseIsFocusVisibleResult {
+    isFocusVisibleRef: Ref<boolean>;
+    onBlur: (event: any) => void;
+    onFocus: (event: any) => void;
+}
+export default function useIsFocusVisible(): UseIsFocusVisibleResult;

package/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/composables/useSearch.d.ts

@@ -0,0 +1,4 @@
+import { ComputedRef } from 'vue';
+export declare function useSearch({ searchAttribute, }: {
+    searchAttribute: string;
+}): ComputedRef<(option: unknown, query: string) => boolean>;

package/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/composables/useToggle.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'vue';
+export declare function useToggle({ initialValue, disabled, }?: {
+    initialValue?: boolean;
+    disabled?: boolean;
+}): [
+    Ref<boolean>,
+    (value?: boolean) => boolean,
+    (value?: boolean) => boolean
+];

package/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/consts/colors.d.ts

@@ -0,0 +1 @@
+export declare const COLORS: Record<string, string>;

package/consts/colors.vue.js

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

package/index.d.ts

@@ -0,0 +1,36 @@
+export * from '@/components/appTrigger';
+export * from '@/components/autocompleteDropdown';
+export * from '@/components/menuItem';
+export * from '@/components/menu';
+export * from '@/components/appIcon';
+export * from '@/components/switch';
+export * from '@/components/radioButton';
+export * from '@/components/snackbar';
+export * from '@/components/floatingToolbar';
+export * from '@/components/includeExclude';
+export * from '@/components/cssBaseline';
+export * from '@/composables/useId';
+export * from '@/components/emptyState';
+export * from '@/components/table';
+export * from '@/components/dialog';
+export * from '@/components/filtersPanel';
+export * from '@/components/filterDropdown';
+export * from '@/components/dropdown';
+export * from '@/components/tabs';
+export * from '@/components/button';
+export * from '@/components/checkbox';
+export * from '@/components/icon';
+export * from '@/components/search';
+export * from '@/components/skeleton';
+export * from '@/components/typography';
+export * from '@/components/popover';
+export * from '@/components/chip';
+export * from '@/components/toggle';
+export * from '@/components/tooltip';
+export * from '@/components/input';
+export * from '@/components/textArea';
+export * from '@/components/table-cells';
+export * from '@/composables/useToggle';
+export * from '@/composables/useSearch';
+export * from '@/components/dateRange';
+export * from '@/components/datePicker';