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

package/components/input/v3/index.js

@@ -0,0 +1,12 @@
+import o from "./Input.vue.js";
+import r from "./DollarInput.vue.js";
+import t from "./PercentageInput.vue.js";
+import p from "./PasswordInput.vue.js";
+const I = () => [o, r, t, p];
+export {
+  r as DollarInput,
+  o as Input,
+  I as InputTypes,
+  p as PasswordInput,
+  t as PercentageInput
+};

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

@@ -1,7 +1,7 @@
 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<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: string | number;
     placeholder?: string;
     disabled?: boolean;
@@ -51,9 +51,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     inlineErrorText: string;
     feedbackText: string;
     feedbackVariant: any;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {
+    manualFocus: () => 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;
@@ -114,18 +115,18 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     size: FieldSize;
     testId: string;
     disabled: boolean;
+    mandatory: boolean;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: TooltipPositions;
     modelValue: string | number;
     placeholder: string;
-    mandatory: boolean;
-    autoFocus: boolean;
-    prefix: string;
     viewOnly: boolean;
     labelDirection: LabelDirection;
+    autoFocus: boolean;
     hideNumberArrows: boolean;
     step: number;
-    hoverHelpText: string;
-    hoverHelpTextPlacement: TooltipPositions;
     onlyDigits: boolean;
+    prefix: string;
     suffix: string;
     maxLength: number;
     showApply: boolean;
@@ -133,6 +134,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     inlineErrorText: string;
     feedbackText: string;
     feedbackVariant: FeedbackVariant;
+}>, {
+    iconBefore?(_: {}): any;
+    iconAfter?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -145,7 +149,15 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };

package/components/input/v4/TextField.vue.js

@@ -1,240 +1,7 @@
-import { defineComponent, computed, ref, openBlock, createElementBlock, mergeProps, unref, createBlock, createCommentVNode, createElementVNode, normalizeClass, renderSlot, withCtx, createTextVNode, toDisplayString, withKeys, withModifiers, createVNode, pushScopeId, popScopeId } from 'vue';
-import Icon from '../../icon/v3/Icon.vue.js';
-import _sfc_main$1 from '../../tooltip/Tooltip.vue.js';
-import Typography from '../../typography/v4/Typography.vue.js';
-import { InputTestIdModifiers } from '../../../testids/index.vue.js';
-import { inputCommon } from '../common/Input.common.vue.js';
-import FieldLabel from '../../shared/FieldLabel.vue.js';
-import FieldHelpText from '../../shared/FieldHelpText.vue.js';
-import { useTestIdAttrs } from '../../../utils/testIds.vue.js';
-/* empty css                                                           */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
-
-import "../../../TextField.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _withScopeId = (n) => (pushScopeId("data-v-05d29f1a"), n = n(), popScopeId(), n);
-const _hoisted_1 = {
-  key: 0,
-  class: "icon-container icon-before"
+import e from "./TextField.vue2.js";
+/* empty css                */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../TextField.vue_vue_type_style_index_0_scoped_7aa32734_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-7aa32734"]]);
+export {
+  a as default
 };
-const _hoisted_2 = ["value", "placeholder", "disabled", "type", "step", "maxlength"];
-const _hoisted_3 = ["onClick"];
-const _hoisted_4 = {
-  key: 3,
-  class: "inline-error"
-};
-const _hoisted_5 = {
-  key: 6,
-  class: "icon-container icon-after"
-};
-const _hoisted_6 = {
-  key: 1,
-  class: "footer"
-};
-const _hoisted_7 = {
-  key: 1,
-  class: "max-length"
-};
-const _hoisted_8 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", { class: "max-length__divider" }, "/", -1));
-const __default__ = {
-  inheritAttrs: false
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "TextField",
-  props: {
-    modelValue: { default: "" },
-    placeholder: { default: "" },
-    disabled: { type: Boolean, default: false },
-    viewOnly: { type: Boolean, default: false },
-    size: { default: "small" },
-    label: { default: "" },
-    labelDirection: { default: "top" },
-    mandatory: { type: Boolean, default: false },
-    feedbackVariant: { default: null },
-    feedbackText: { default: "" },
-    autoFocus: { type: Boolean, default: false },
-    type: { default: "text" },
-    hideNumberArrows: { type: Boolean, default: false },
-    step: { default: 1 },
-    hoverHelpText: { default: "" },
-    hoverHelpTextPlacement: { default: "top" },
-    onlyDigits: { type: Boolean, default: false },
-    testId: { default: "" },
-    prefix: { default: "" },
-    suffix: { default: "" },
-    maxLength: { default: null },
-    showApply: { type: Boolean, default: false },
-    inlineError: { type: Boolean, default: false },
-    inlineErrorText: { default: "" }
-  },
-  emits: ["update:modelValue", "update:showApply"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const testIdAttrs = useTestIdAttrs(props.testId, InputTestIdModifiers);
-    const handleApplyClick = () => {
-      if (props.showApply) {
-        emit("update:showApply", false);
-      } else if (api?.confirmable) {
-        onConfirm();
-      }
-    };
-    const {
-      onConfirm,
-      onEnter,
-      inputRef,
-      isFocused,
-      showLabelInside,
-      api,
-      labelText,
-      sizeClass,
-      handleInput,
-      handleKeypress
-    } = inputCommon(props, emit);
-    const inputValue = computed(() => api.value?.value ?? props.modelValue);
-    const inputValueLength = computed(() => {
-      const valueString = inputValue.value || "";
-      return valueString.length;
-    });
-    const showPassword = ref(false);
-    const inputType = computed(() => {
-      if (showPassword.value && props.type === "password")
-        return "text";
-      return props.type;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({
-        class: {
-          "input-with-label-container": true,
-          "label-direction-left": __props.labelDirection === "left",
-          disabled: __props.disabled,
-          [`variant-${__props.feedbackVariant}`]: true
-        }
-      }, unref(testIdAttrs)[unref(InputTestIdModifiers).WRAPPER]), [
-        __props.label && __props.labelDirection !== "inside" ? (openBlock(), createBlock(FieldLabel, {
-          key: 0,
-          label: __props.label,
-          mandatory: __props.mandatory,
-          "hover-help-text": __props.hoverHelpText,
-          "hover-help-text-placement": __props.hoverHelpTextPlacement,
-          disabled: __props.disabled,
-          "test-id": __props.testId
-        }, null, 8, ["label", "mandatory", "hover-help-text", "hover-help-text-placement", "disabled", "test-id"])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass({
-            "input-container": true,
-            "label-inside": unref(showLabelInside),
-            focused: unref(isFocused)
-          })
-        }, [
-          _ctx.$slots["iconBefore"] ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            renderSlot(_ctx.$slots, "iconBefore", {}, void 0, true)
-          ])) : createCommentVNode("", true),
-          __props.prefix ? (openBlock(), createBlock(unref(Typography), {
-            key: 1,
-            class: "prefix-text",
-            variant: "body1"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(__props.prefix), 1)
-            ]),
-            _: 1
-          })) : createCommentVNode("", true),
-          createElementVNode("input", mergeProps({ ..._ctx.$attrs, ...unref(testIdAttrs)[unref(InputTestIdModifiers).FIELD] }, {
-            ref_key: "inputRef",
-            ref: inputRef,
-            value: unref(inputValue),
-            placeholder: unref(labelText),
-            disabled: __props.disabled || __props.viewOnly,
-            type: unref(inputType),
-            class: ["input", {
-              [unref(sizeClass)]: true,
-              "view-only": __props.viewOnly,
-              "label-inside": unref(showLabelInside),
-              "hide-arrows": __props.hideNumberArrows,
-              "input-type": __props.type
-            }],
-            step: __props.step,
-            maxlength: __props.maxLength,
-            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_2),
-          __props.showApply || unref(api)?.confirmable && !unref(api)?.error?.value ? (openBlock(), createElementBlock("div", {
-            key: 2,
-            class: "apply-button",
-            onClick: withModifiers(handleApplyClick, ["stop", "prevent"])
-          }, [
-            createVNode(unref(Icon), {
-              name: "check-v4",
-              "font-size": "md"
-            })
-          ], 8, _hoisted_3)) : createCommentVNode("", true),
-          __props.inlineError || unref(api)?.error?.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
-            createVNode(unref(_sfc_main$1), mergeProps({
-              disabled: !__props.inlineErrorText && !unref(api)?.error?.value,
-              text: __props.inlineErrorText || unref(api)?.error?.value,
-              "test-id": __props.testId
-            }, unref(testIdAttrs)[unref(InputTestIdModifiers).TOOLTIP]), {
-              default: withCtx(() => [
-                createVNode(unref(Icon), {
-                  name: "warning-circle",
-                  "font-size": "sm"
-                })
-              ]),
-              _: 1
-            }, 16, ["disabled", "text", "test-id"])
-          ])) : createCommentVNode("", true),
-          __props.suffix ? (openBlock(), createBlock(unref(Typography), {
-            key: 4,
-            class: "suffix-text",
-            variant: "body1"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(__props.suffix), 1)
-            ]),
-            _: 1
-          })) : createCommentVNode("", true),
-          __props.type === "password" ? (openBlock(), createElementBlock("div", mergeProps({
-            key: 5,
-            class: "password-visibility-toggle"
-          }, unref(testIdAttrs)[unref(InputTestIdModifiers).TOGGLE_PASSWORD], {
-            onClick: _cache[5] || (_cache[5] = ($event) => showPassword.value = !showPassword.value)
-          }), [
-            createVNode(unref(Icon), {
-              name: showPassword.value ? "eye-v4" : "eye-slash",
-              "font-size": "sm"
-            }, null, 8, ["name"])
-          ], 16)) : createCommentVNode("", true),
-          _ctx.$slots["iconAfter"] ? (openBlock(), createElementBlock("div", _hoisted_5, [
-            renderSlot(_ctx.$slots, "iconAfter", {}, void 0, true)
-          ])) : createCommentVNode("", true)
-        ], 2),
-        __props.feedbackText || __props.maxLength ? (openBlock(), createElementBlock("div", _hoisted_6, [
-          __props.feedbackText ? (openBlock(), createBlock(FieldHelpText, {
-            key: 0,
-            text: __props.feedbackText,
-            variant: __props.feedbackVariant,
-            "test-id": __props.testId
-          }, null, 8, ["text", "variant", "test-id"])) : createCommentVNode("", true),
-          __props.maxLength ? (openBlock(), createElementBlock("div", _hoisted_7, [
-            createVNode(unref(Typography), { variant: "caption" }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(inputValueLength)) + " ", 1),
-                _hoisted_8,
-                createTextVNode(" " + toDisplayString(__props.maxLength), 1)
-              ]),
-              _: 1
-            })
-          ])) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true)
-      ], 16);
-    };
-  }
-});
-var TextField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-05d29f1a"]]);
-
-export { TextField as default };

package/components/input/v4/TextField.vue2.js

@@ -0,0 +1,212 @@
+ import "../../../TextField.vue_vue_type_style_index_0_scoped_7aa32734_lang.css"; import { defineComponent as K, computed as k, ref as G, openBlock as a, createElementBlock as o, mergeProps as v, unref as t, createBlock as y, createCommentVNode as n, createElementVNode as g, normalizeClass as M, renderSlot as $, withCtx as h, createTextVNode as p, toDisplayString as x, withKeys as W, withModifiers as S, createVNode as u, pushScopeId as j, popScopeId as q } from "vue";
+import w from "../../icon/v3/Icon.vue.js";
+import "../../tooltip/Tooltip.vue2.js";
+import T from "../../typography/v4/Typography.vue.js";
+import { InputTestIdModifiers as f } from "../../../testids/index.js";
+import { inputCommon as J } from "../common/Input.common.js";
+import Q from "../../shared/FieldLabel.vue.js";
+import U from "../../shared/FieldHelpText.vue.js";
+import { useTestIdAttrs as X } from "../../../utils/testIds.js";
+import Y from "../../tooltip/Tooltip.vue.js";
+const Z = (e) => (j("data-v-7aa32734"), e = e(), q(), e), _ = {
+  key: 0,
+  class: "icon-container icon-before"
+}, ee = ["value", "placeholder", "disabled", "type", "step", "maxlength"], te = ["onClick"], le = {
+  key: 3,
+  class: "inline-error"
+}, ae = {
+  key: 6,
+  class: "icon-container icon-after"
+}, ne = {
+  key: 1,
+  class: "footer"
+}, ie = {
+  key: 1,
+  class: "max-length"
+}, oe = /* @__PURE__ */ Z(() => /* @__PURE__ */ g("span", { class: "max-length__divider" }, "/", -1)), se = {
+  inheritAttrs: !1
+}, xe = /* @__PURE__ */ K({
+  ...se,
+  __name: "TextField",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    viewOnly: { type: Boolean, default: !1 },
+    size: { default: "small" },
+    label: { default: "" },
+    labelDirection: { default: "top" },
+    mandatory: { type: Boolean, default: !1 },
+    feedbackVariant: { default: null },
+    feedbackText: { default: "" },
+    autoFocus: { type: Boolean, default: !1 },
+    type: { default: "text" },
+    hideNumberArrows: { type: Boolean, default: !1 },
+    step: { default: 1 },
+    hoverHelpText: { default: "" },
+    hoverHelpTextPlacement: { default: "top" },
+    onlyDigits: { type: Boolean, default: !1 },
+    testId: { default: "" },
+    prefix: { default: "" },
+    suffix: { default: "" },
+    maxLength: { default: null },
+    showApply: { type: Boolean, default: !1 },
+    inlineError: { type: Boolean, default: !1 },
+    inlineErrorText: { default: "" }
+  },
+  emits: ["update:modelValue", "update:showApply"],
+  setup(e, { expose: F, emit: I }) {
+    const d = e, c = X(d.testId, f), P = () => {
+      d.showApply ? I("update:showApply", !1) : s?.confirmable && z();
+    }, O = () => B.value.focus(), {
+      onConfirm: z,
+      onEnter: A,
+      inputRef: B,
+      isFocused: b,
+      showLabelInside: V,
+      api: s,
+      labelText: D,
+      sizeClass: N,
+      handleInput: C,
+      handleKeypress: E
+    } = J(d, I), L = k(() => s.value?.value ?? d.modelValue), H = k(() => (L.value || "").length), m = G(!1), R = k(() => m.value && d.type === "password" ? "text" : d.type);
+    return F({
+      manualFocus: O
+    }), (r, l) => (a(), o("div", v({
+      class: {
+        "input-with-label-container": !0,
+        disabled: e.disabled,
+        [`variant-${e.feedbackVariant}`]: !0
+      }
+    }, t(c)[t(f).WRAPPER]), [
+      e.label && e.labelDirection !== "inside" ? (a(), y(Q, {
+        key: 0,
+        label: e.label,
+        mandatory: e.mandatory,
+        "hover-help-text": e.hoverHelpText,
+        "hover-help-text-placement": e.hoverHelpTextPlacement,
+        disabled: e.disabled,
+        "test-id": e.testId
+      }, null, 8, ["label", "mandatory", "hover-help-text", "hover-help-text-placement", "disabled", "test-id"])) : n("", !0),
+      g("div", {
+        class: M({
+          "input-container": !0,
+          "label-inside": t(V),
+          focused: t(b)
+        })
+      }, [
+        r.$slots.iconBefore ? (a(), o("div", _, [
+          $(r.$slots, "iconBefore", {}, void 0, !0)
+        ])) : n("", !0),
+        e.prefix ? (a(), y(t(T), {
+          key: 1,
+          class: "prefix-text",
+          variant: "body1"
+        }, {
+          default: h(() => [
+            p(x(e.prefix), 1)
+          ]),
+          _: 1
+        })) : n("", !0),
+        g("input", v({ ...r.$attrs, ...t(c)[t(f).FIELD] }, {
+          ref_key: "inputRef",
+          ref: B,
+          value: t(L),
+          placeholder: t(D),
+          disabled: e.disabled || e.viewOnly,
+          type: t(R),
+          class: ["input", {
+            [t(N)]: !0,
+            "view-only": e.viewOnly,
+            "label-inside": t(V),
+            "hide-arrows": e.hideNumberArrows,
+            "input-type": e.type
+          }],
+          step: e.step,
+          maxlength: e.maxLength,
+          onInput: l[0] || (l[0] = //@ts-ignore
+          (...i) => t(C) && t(C)(...i)),
+          onFocus: l[1] || (l[1] = (i) => b.value = !0),
+          onBlur: l[2] || (l[2] = (i) => b.value = !1),
+          onKeyup: l[3] || (l[3] = W(S(
+            //@ts-ignore
+            (...i) => t(A) && t(A)(...i),
+            ["prevent"]
+          ), ["enter"])),
+          onKeypress: l[4] || (l[4] = //@ts-ignore
+          (...i) => t(E) && t(E)(...i))
+        }), null, 16, ee),
+        e.showApply || t(s)?.confirmable && !t(s)?.error?.value ? (a(), o("div", {
+          key: 2,
+          class: "apply-button",
+          onClick: S(P, ["stop", "prevent"])
+        }, [
+          u(t(w), {
+            name: "check-v4",
+            "font-size": "md"
+          })
+        ], 8, te)) : n("", !0),
+        e.inlineError || t(s)?.error?.value ? (a(), o("div", le, [
+          u(t(Y), v({
+            disabled: !e.inlineErrorText && !t(s)?.error?.value,
+            text: e.inlineErrorText || t(s)?.error?.value,
+            "test-id": e.testId
+          }, t(c)[t(f).TOOLTIP]), {
+            default: h(() => [
+              u(t(w), {
+                name: "warning-circle",
+                "font-size": "sm"
+              })
+            ]),
+            _: 1
+          }, 16, ["disabled", "text", "test-id"])
+        ])) : n("", !0),
+        e.suffix ? (a(), y(t(T), {
+          key: 4,
+          class: "suffix-text",
+          variant: "body1"
+        }, {
+          default: h(() => [
+            p(x(e.suffix), 1)
+          ]),
+          _: 1
+        })) : n("", !0),
+        e.type === "password" ? (a(), o("div", v({
+          key: 5,
+          class: "password-visibility-toggle"
+        }, t(c)[t(f).TOGGLE_PASSWORD], {
+          onClick: l[5] || (l[5] = (i) => m.value = !m.value)
+        }), [
+          u(t(w), {
+            name: m.value ? "eye-v4" : "eye-slash",
+            "font-size": "sm"
+          }, null, 8, ["name"])
+        ], 16)) : n("", !0),
+        r.$slots.iconAfter ? (a(), o("div", ae, [
+          $(r.$slots, "iconAfter", {}, void 0, !0)
+        ])) : n("", !0)
+      ], 2),
+      e.feedbackText || e.maxLength ? (a(), o("div", ne, [
+        e.feedbackText ? (a(), y(U, {
+          key: 0,
+          text: e.feedbackText,
+          variant: e.feedbackVariant,
+          "test-id": e.testId
+        }, null, 8, ["text", "variant", "test-id"])) : n("", !0),
+        e.maxLength ? (a(), o("div", ie, [
+          u(t(T), { variant: "caption" }, {
+            default: h(() => [
+              p(x(t(H)) + " ", 1),
+              oe,
+              p(" " + x(e.maxLength), 1)
+            ]),
+            _: 1
+          })
+        ])) : n("", !0)
+      ])) : n("", !0)
+    ], 16));
+  }
+});
+export {
+  xe as default
+};