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

package/components/input/common/Input.common.vue.js

@@ -0,0 +1,72 @@
+import { ref, computed, onMounted, nextTick } from 'vue';
+/* empty css                                                                     */import { useEditableContext } from '../../table-cells/EditableContext.vue.js';
+import '@vueuse/core';
+/* empty css                                                                          */import { REGEX_NUMBER_INPUT } from '../../../consts/regex.vue.js';
+
+const inputCommon = (props, emit) => {
+  const api = useEditableContext();
+  const onConfirm = () => {
+    api.onClose?.();
+  };
+  const onEnter = () => {
+    if (api?.confirmable && !api?.error?.value) {
+      api.onClose?.();
+    }
+  };
+  const inputRef = ref(null);
+  const isFocused = ref(false);
+  const showLabelInside = computed(() => {
+    return props.label && props.labelDirection === "inside" && !isFocused.value;
+  });
+  onMounted(async () => {
+    await nextTick();
+    if (!props.autoFocus && !api.focusable) {
+      return;
+    }
+    if (!inputRef.value) {
+      return;
+    }
+    inputRef.value.focus();
+  });
+  const labelText = computed(() => {
+    if (showLabelInside.value) {
+      let label = props.label;
+      if (props.mandatory) {
+        label += " *";
+      }
+      return label;
+    }
+    return props.placeholder;
+  });
+  const sizeClass = computed(() => {
+    return `input-size-${props.size}`;
+  });
+  const handleInput = (event) => {
+    api.onChange?.(event.target.value);
+    emit("update:modelValue", event.target.value);
+  };
+  const DECIMAL_POINT = ".";
+  const handleKeypress = (event) => {
+    if (props.onlyDigits) {
+      if (!event.key.match(REGEX_NUMBER_INPUT)) {
+        event.preventDefault();
+      } else if (event.key === DECIMAL_POINT && props.modelValue.toString().includes(DECIMAL_POINT)) {
+        event.preventDefault();
+      }
+    }
+  };
+  return {
+    onConfirm,
+    onEnter,
+    inputRef,
+    isFocused,
+    showLabelInside,
+    api,
+    labelText,
+    sizeClass,
+    handleInput,
+    handleKeypress
+  };
+};
+
+export { inputCommon };

package/components/input/{DollarInput.vue.d.ts → v3/DollarInput.vue.d.ts}

@@ -1,5 +1,5 @@
 import Input from './Input.vue';
-import { ExtractComponentProps } from '../../utils/extract-props';
+import { ExtractComponentProps } from '@/utils/extract-props';
 export type DollarPropsType = Omit<ExtractComponentProps<typeof Input>, 'type' | 'hideNumberArrows' | 'step'>;
 export interface DollarProps extends DollarPropsType {
 }

package/components/input/{DollarInput.vue.js → v3/DollarInput.vue.js}

@@ -1,9 +1,9 @@
 import { defineComponent, openBlock, createBlock, mergeProps, withCtx, createVNode, unref, createTextVNode } from 'vue';
 import Input from './Input.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 _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../../typography/Text.vue.js';
 /* empty css                                                             */
-import "../../DollarInput.vue_vue_type_style_index_0_scoped_true_lang.css";
+import "../../../DollarInput.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _sfc_main = defineComponent({
   __name: "DollarInput",
   emits: ["update:modelValue"],
@@ -32,6 +32,6 @@ const _sfc_main = defineComponent({
     };
   }
 });
-var DollarInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b96666f4"]]);
+var DollarInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4dd325c2"]]);
 
 export { DollarInput as default };

package/components/input/{Input.vue.js → v3/Input.vue.js}

@@ -1,15 +1,13 @@
-import { defineComponent, ref, computed, onMounted, nextTick, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, createElementVNode, renderSlot, mergeProps, withKeys, withModifiers } from 'vue';
-import { InputTestIdModifiers } 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 IconButton from '../button/v3/IconButton.vue.js';
-import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
-/* empty css                                                                         */import { useEditableContext } from '../table-cells/EditableContext.vue.js';
-import '@vueuse/core';
-/* empty css                                                                       */import { REGEX_NUMBER_INPUT } from '../../consts/regex.vue.js';
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, createElementVNode, renderSlot, mergeProps, withKeys, withModifiers } from 'vue';
+import { InputTestIdModifiers } 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/v3/Icon.vue.js';
+/* empty css                                                                      */import IconButton from '../../button/v3/IconButton.vue.js';
+import _sfc_main$1 from '../../tooltip/Tooltip.vue.js';
+/* empty css                                                                            */import { inputCommon } from '../common/Input.common.vue.js';
 /* empty css                                                       */
-import "../../Input.vue_vue_type_style_index_0_scoped_true_lang.css";
+import "../../../Input.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _hoisted_1 = ["data-testid"];
 const _hoisted_2 = ["data-testid"];
 const _hoisted_3 = { class: "info-icon-wrapper" };
@@ -17,7 +15,7 @@ const _hoisted_4 = {
   key: 0,
   class: "icon-container icon-before"
 };
-const _hoisted_5 = ["value", "placeholder", "disabled", "type", "step", "data-testid", "onKeyup"];
+const _hoisted_5 = ["value", "placeholder", "disabled", "type", "step", "data-testid"];
 const _hoisted_6 = {
   key: 1,
   class: "icon-container icon-after"
@@ -54,57 +52,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit }) {
     const props = __props;
-    const onConfirm = (e) => {
-      api.onClose?.();
-    };
-    const onEnter = () => {
-      if (api?.confirmable && !api?.error?.value) {
-        api.onClose?.();
-      }
-    };
-    const inputRef = ref(null);
-    const isFocused = ref(false);
-    const showLabelInside = computed(() => {
-      return props.label && props.labelDirection === "inside" && !isFocused.value;
-    });
-    const api = useEditableContext();
-    onMounted(async () => {
-      await nextTick();
-      if (!props.autoFocus && !api.focusable) {
-        return;
-      }
-      if (!inputRef.value) {
-        return;
-      }
-      inputRef.value.focus();
-    });
-    const labelText = computed(() => {
-      if (showLabelInside.value) {
-        let label = props.label;
-        if (props.mandatory) {
-          label += " *";
-        }
-        return label;
-      }
-      return props.placeholder;
-    });
-    const sizeClass = computed(() => {
-      return `input-size-${props.size}`;
-    });
-    const handleInput = (event) => {
-      api.onChange?.(event.target.value);
-      emit("update:modelValue", event.target.value);
-    };
-    const DECIMAL_POINT = ".";
-    const handleKeypress = (event) => {
-      if (props.onlyDigits) {
-        if (!event.key.match(REGEX_NUMBER_INPUT)) {
-          event.preventDefault();
-        } else if (event.key === DECIMAL_POINT && props.modelValue.toString().includes(DECIMAL_POINT)) {
-          event.preventDefault();
-        }
-      }
-    };
+    const {
+      onConfirm,
+      onEnter,
+      inputRef,
+      isFocused,
+      showLabelInside,
+      api,
+      labelText,
+      sizeClass,
+      handleInput,
+      handleKeypress
+    } = inputCommon(props, emit);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass({
@@ -164,7 +123,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "input-container": true,
             "label-inside": unref(showLabelInside),
             error: unref(api).error?.value || __props.feedbackErrorText,
-            focused: isFocused.value
+            focused: unref(isFocused)
           })
         }, [
           _ctx.$slots["iconBefore"] ? (openBlock(), createElementBlock("div", _hoisted_4, [
@@ -186,11 +145,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }],
             step: __props.step,
             "data-testid": `${__props.testId}-${unref(InputTestIdModifiers).FIELD}`,
-            onInput: handleInput,
-            onFocus: _cache[0] || (_cache[0] = ($event) => isFocused.value = true),
-            onBlur: _cache[1] || (_cache[1] = ($event) => isFocused.value = false),
-            onKeyup: withKeys(withModifiers(onEnter, ["prevent"]), ["enter"]),
-            onKeypress: handleKeypress
+            onInput: _cache[0] || (_cache[0] = (...args) => unref(handleInput) && unref(handleInput)(...args)),
+            onFocus: _cache[1] || (_cache[1] = ($event) => isFocused.value = true),
+            onBlur: _cache[2] || (_cache[2] = ($event) => isFocused.value = false),
+            onKeyup: _cache[3] || (_cache[3] = withKeys(withModifiers(
+              (...args) => unref(onEnter) && unref(onEnter)(...args),
+              ["prevent"]
+            ), ["enter"])),
+            onKeypress: _cache[4] || (_cache[4] = (...args) => unref(handleKeypress) && unref(handleKeypress)(...args))
           }), null, 16, _hoisted_5),
           _ctx.$slots["iconAfter"] ? (openBlock(), createElementBlock("div", _hoisted_6, [
             renderSlot(_ctx.$slots, "iconAfter", {}, void 0, true)
@@ -200,7 +162,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: "confirm-icon",
               theme: "secondary",
               variant: "colorized",
-              onClick: withModifiers(onConfirm, ["stop", "prevent"])
+              onClick: withModifiers(unref(onConfirm), ["stop", "prevent"])
             }, {
               default: withCtx(() => [
                 createVNode(unref(Icon), {
@@ -254,6 +216,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6e6469d3"]]);
+var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a28e3446"]]);
 
 export { Input as default };

package/components/input/{PasswordInput.vue.d.ts → v3/PasswordInput.vue.d.ts}

@@ -1,5 +1,5 @@
 import Input from './Input.vue';
-import { ExtractComponentProps } from '../../utils/extract-props';
+import { ExtractComponentProps } from '@/utils/extract-props';
 export type PasswordPropsType = Omit<ExtractComponentProps<typeof Input>, 'type' | 'hideNumberArrows' | 'step'>;
 export interface PasswordProps extends PasswordPropsType {
 }

package/components/input/{PasswordInput.vue.js → v3/PasswordInput.vue.js}

@@ -1,9 +1,9 @@
 import { defineComponent, ref, openBlock, createBlock, mergeProps, withCtx, createVNode, unref, createTextVNode, toDisplayString } from 'vue';
 import Input from './Input.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 _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../../typography/Text.vue.js';
 /* empty css                                                               */
-import "../../PasswordInput.vue_vue_type_style_index_0_scoped_true_lang.css";
+import "../../../PasswordInput.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _sfc_main = defineComponent({
   __name: "PasswordInput",
   emits: ["update:modelValue"],
@@ -36,6 +36,6 @@ const _sfc_main = defineComponent({
     };
   }
 });
-var PasswordInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-da9d5486"]]);
+var PasswordInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3e2d0e84"]]);
 
 export { PasswordInput as default };

package/components/input/{PercentageInput.vue.d.ts → v3/PercentageInput.vue.d.ts}

@@ -1,5 +1,5 @@
 import Input from './Input.vue';
-import { ExtractComponentProps } from '../../utils/extract-props';
+import { ExtractComponentProps } from '@/utils/extract-props';
 export type PercentagePropsType = Omit<ExtractComponentProps<typeof Input>, 'type' | 'hideNumberArrows'>;
 export interface PercentageProps extends PercentagePropsType {
 }

package/components/input/{PercentageInput.vue.js → v3/PercentageInput.vue.js}

@@ -1,9 +1,9 @@
 import { defineComponent, openBlock, createBlock, mergeProps, withCtx, createVNode, unref, createTextVNode } from 'vue';
 import Input from './Input.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 _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../../typography/Text.vue.js';
 /* empty css                                                                 */
-import "../../PercentageInput.vue_vue_type_style_index_0_scoped_true_lang.css";
+import "../../../PercentageInput.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _sfc_main = defineComponent({
   __name: "PercentageInput",
   emits: ["update:modelValue"],
@@ -32,6 +32,6 @@ const _sfc_main = defineComponent({
     };
   }
 });
-var PercentageInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7247a0d5"]]);
+var PercentageInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f4c461c4"]]);
 
 export { PercentageInput as default };

package/components/input/{index.d.ts → v3/index.d.ts}

@@ -84,7 +84,7 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
         default: string;
     };
     hoverHelpTextPlacement: {
-        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">;
+        type: import("vue").PropType<"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">;
     } & {
         default: string;
     };
@@ -177,7 +177,7 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
         default: string;
     };
     hoverHelpTextPlacement: {
-        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">;
+        type: import("vue").PropType<"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">;
     } & {
         default: string;
     };
@@ -205,7 +205,7 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
     hideNumberArrows: boolean;
     step: number;
     hoverHelpText: string;
-    hoverHelpTextPlacement: "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";
+    hoverHelpTextPlacement: "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";
     onlyDigits: boolean;
 }> | import("vue").DefineComponent<{
     ref: {
@@ -319,7 +319,7 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
     };
     hoverHelpTextPlacement: {
-        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">;
+        type: import("vue").PropType<"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">;
     };
     onlyDigits: {
         type: import("vue").PropType<boolean>;
@@ -438,7 +438,7 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
     };
     hoverHelpTextPlacement: {
-        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">;
+        type: import("vue").PropType<"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">;
     };
     onlyDigits: {
         type: import("vue").PropType<boolean>;

package/components/input/v4/TextField.types.d.ts

@@ -0,0 +1,6 @@
+export declare const FIELD_SIZES: readonly ["small", "medium", "large"];
+export type FieldSize = (typeof FIELD_SIZES)[number];
+export declare const LABEL_DIRECTIONS: readonly ["inside", "top"];
+export type LabelDirection = (typeof LABEL_DIRECTIONS)[number];
+export declare const FIELD_TYPES: readonly ["text", "number", "password"];
+export type FieldType = (typeof FIELD_TYPES)[number];

package/components/input/v4/TextField.vue.d.ts

@@ -0,0 +1,151 @@
+import { TooltipPositions } from '@/components/tooltip/Tooltip.types';
+import { LabelDirection, FieldSize, FieldType } from './TextField.types';
+import { FeedbackVariant } from '@/components/shared/commonTypes';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    viewOnly?: boolean;
+    size?: FieldSize;
+    label?: string;
+    labelDirection?: LabelDirection;
+    mandatory?: boolean;
+    feedbackVariant?: FeedbackVariant;
+    feedbackText?: string;
+    autoFocus?: boolean;
+    type?: FieldType;
+    hideNumberArrows?: boolean;
+    step?: number;
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: TooltipPositions;
+    onlyDigits?: boolean;
+    testId?: string;
+    prefix?: string;
+    suffix?: string;
+    maxLength?: number;
+    showApply?: boolean;
+    inlineError?: boolean;
+    inlineErrorText?: string;
+}>, {
+    modelValue: string;
+    placeholder: string;
+    disabled: boolean;
+    viewOnly: boolean;
+    size: string;
+    label: string;
+    labelDirection: string;
+    mandatory: boolean;
+    autoFocus: boolean;
+    type: string;
+    hideNumberArrows: boolean;
+    step: number;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+    onlyDigits: boolean;
+    testId: string;
+    prefix: string;
+    suffix: string;
+    maxLength: any;
+    showApply: boolean;
+    inlineError: boolean;
+    inlineErrorText: string;
+    feedbackText: string;
+    feedbackVariant: any;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => void;
+} & {
+    "update:showApply": (value: boolean) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    viewOnly?: boolean;
+    size?: FieldSize;
+    label?: string;
+    labelDirection?: LabelDirection;
+    mandatory?: boolean;
+    feedbackVariant?: FeedbackVariant;
+    feedbackText?: string;
+    autoFocus?: boolean;
+    type?: FieldType;
+    hideNumberArrows?: boolean;
+    step?: number;
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: TooltipPositions;
+    onlyDigits?: boolean;
+    testId?: string;
+    prefix?: string;
+    suffix?: string;
+    maxLength?: number;
+    showApply?: boolean;
+    inlineError?: boolean;
+    inlineErrorText?: string;
+}>, {
+    modelValue: string;
+    placeholder: string;
+    disabled: boolean;
+    viewOnly: boolean;
+    size: string;
+    label: string;
+    labelDirection: string;
+    mandatory: boolean;
+    autoFocus: boolean;
+    type: string;
+    hideNumberArrows: boolean;
+    step: number;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+    onlyDigits: boolean;
+    testId: string;
+    prefix: string;
+    suffix: string;
+    maxLength: any;
+    showApply: boolean;
+    inlineError: boolean;
+    inlineErrorText: string;
+    feedbackText: string;
+    feedbackVariant: any;
+}>>> & {
+    "onUpdate:modelValue"?: (value: string | number) => any;
+    "onUpdate:showApply"?: (value: boolean) => any;
+}, {
+    type: FieldType;
+    label: string;
+    size: FieldSize;
+    testId: string;
+    disabled: boolean;
+    modelValue: string | number;
+    placeholder: string;
+    mandatory: boolean;
+    autoFocus: boolean;
+    prefix: string;
+    viewOnly: boolean;
+    labelDirection: LabelDirection;
+    hideNumberArrows: boolean;
+    step: number;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: TooltipPositions;
+    onlyDigits: boolean;
+    suffix: string;
+    maxLength: number;
+    showApply: boolean;
+    inlineError: boolean;
+    inlineErrorText: string;
+    feedbackText: string;
+    feedbackVariant: FeedbackVariant;
+}>;
+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];
+};