@ironsource/shared-ui 1.4.2-test.4 → 1.4.2-test.6

package/components/input/Input.vue.js

@@ -1,6 +1,236 @@
-import o from "./Input.vue2.js";
-/* empty css            */import t from "../../_virtual/_plugin-vue_export-helper.js";
-const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-b49b2b32"]]);
-export {
-  _ as default
+import { defineComponent, ref, computed, onMounted, nextTick, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, createElementVNode, renderSlot, mergeProps, withKeys, withModifiers } from 'vue';
+import '../typography/Heading.vue.js';
+import Text from '../typography/Text.vue.js';
+import Icon from '../icon/Icon.vue.js';
+import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
+import '../button/Button.vue.js';
+import IconButton from '../button/IconButton.vue.js';
+import '../button/ScrollButton.vue.js';
+import '../table-cells/Editable.vue.js';
+import { useEditableContext } from '../table-cells/EditableContext.vue.js';
+/* empty css                                                       */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../Input.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = { class: "info-icon-wrapper" };
+const _hoisted_2 = {
+  key: 0,
+  class: "icon-container icon-before"
 };
+const _hoisted_3 = ["value", "placeholder", "disabled", "type", "step", "onKeyup"];
+const _hoisted_4 = {
+  key: 1,
+  class: "icon-container icon-after"
+};
+const _hoisted_5 = { key: 2 };
+const _hoisted_6 = { key: 3 };
+const _hoisted_7 = {
+  key: 1,
+  class: "extra-text-container"
+};
+const __default__ = {
+  inheritAttrs: false
+};
+const _sfc_main = defineComponent({
+  ...__default__,
+  __name: "Input",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: false },
+    viewOnly: { type: Boolean, default: false },
+    size: { default: "lg" },
+    label: { default: "" },
+    labelDirection: { default: "top" },
+    mandatory: { type: Boolean, default: false },
+    feedbackHelpText: { default: "" },
+    autoFocus: { type: Boolean, default: false },
+    feedbackErrorText: { default: "" },
+    type: { default: "text" },
+    hideNumberArrows: { type: Boolean, default: false },
+    step: { default: 1 },
+    hoverHelpText: { default: "" },
+    hoverHelpTextPlacement: { default: "top" }
+  },
+  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);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass({
+          "input-with-label-container": true,
+          "label-direction-left": _ctx.labelDirection === "left",
+          disabled: _ctx.disabled
+        })
+      }, [
+        _ctx.label && _ctx.labelDirection !== "inside" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["label-container", "direction-" + _ctx.labelDirection])
+        }, [
+          createVNode(unref(Text), { class: "label" }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.label), 1)
+            ]),
+            _: 1
+          }),
+          _ctx.mandatory ? (openBlock(), createBlock(unref(Text), {
+            key: 0,
+            size: "lg",
+            class: "mandatory"
+          }, {
+            default: withCtx(() => [
+              createTextVNode("*")
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          _ctx.hoverHelpText ? (openBlock(), createBlock(unref(_sfc_main$1), {
+            key: 1,
+            triggers: ["hover"],
+            text: _ctx.hoverHelpText,
+            placement: _ctx.hoverHelpTextPlacement,
+            size: "xs",
+            strong: true
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1, [
+                createVNode(unref(Icon), {
+                  class: "info-icon",
+                  name: "info",
+                  "font-size": "sm"
+                })
+              ])
+            ]),
+            _: 1
+          }, 8, ["text", "placement"])) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass({
+            "input-container": true,
+            "label-inside": showLabelInside.value,
+            error: unref(api).error?.value || _ctx.feedbackErrorText,
+            focused: isFocused.value
+          })
+        }, [
+          _ctx.$slots["iconBefore"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            renderSlot(_ctx.$slots, "iconBefore", {}, void 0, true)
+          ])) : createCommentVNode("", true),
+          createElementVNode("input", mergeProps(_ctx.$attrs, {
+            ref_key: "inputRef",
+            ref: inputRef,
+            value: unref(api).value?.value ?? _ctx.modelValue,
+            placeholder: labelText.value,
+            disabled: _ctx.disabled || _ctx.viewOnly,
+            type: _ctx.type,
+            class: ["input", {
+              [sizeClass.value]: true,
+              "view-only": _ctx.viewOnly,
+              "label-inside": showLabelInside.value,
+              "hide-arrows": _ctx.hideNumberArrows,
+              "input-type": _ctx.type
+            }],
+            step: _ctx.step,
+            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"])
+          }), null, 16, _hoisted_3),
+          _ctx.$slots["iconAfter"] ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            renderSlot(_ctx.$slots, "iconAfter", {}, void 0, true)
+          ])) : createCommentVNode("", true),
+          unref(api)?.confirmable && !unref(api)?.error?.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            createVNode(unref(IconButton), {
+              class: "confirm-icon",
+              theme: "secondary",
+              variant: "colorized",
+              onClick: withModifiers(onConfirm, ["stop", "prevent"])
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(Icon), {
+                  name: "check-bold",
+                  "font-size": "sm"
+                })
+              ]),
+              _: 1
+            }, 8, ["onClick"])
+          ])) : createCommentVNode("", true),
+          unref(api)?.error?.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            createVNode(unref(_sfc_main$1), {
+              text: unref(api)?.error?.value
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(IconButton), {
+                  class: "error-icon",
+                  theme: "secondary",
+                  variant: "colorized"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(Icon), {
+                      name: "error",
+                      "font-size": "sm"
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["text"])
+          ])) : createCommentVNode("", true)
+        ], 2),
+        _ctx.feedbackErrorText || _ctx.feedbackHelpText ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          createVNode(unref(Text), {
+            class: normalizeClass(_ctx.feedbackErrorText ? "error" : "help"),
+            size: "caption"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.feedbackErrorText || _ctx.feedbackHelpText), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3e4dac7b"]]);
+
+export { Input as default };

package/components/input/PasswordInput.vue.d.ts

@@ -1,233 +1,20 @@
 import Input from './Input.vue';
 import { ExtractComponentProps } from '../../utils/extract-props';
 export type PasswordPropsType = Omit<ExtractComponentProps<typeof Input>, 'type' | 'hideNumberArrows' | 'step'>;
-export interface PasswordProps extends PasswordPropsType {
+export interface PasswordProps extends /* @vue-ignore */ PasswordPropsType {
 }
-declare const _default: import("vue").DefineComponent<{
-    size: {
-        type: import("vue").PropType<"sm" | "lg">;
-    };
-    label: {
-        type: import("vue").PropType<string>;
-    };
-    style: {
-        type: import("vue").PropType<unknown>;
-    };
-    class: {
-        type: import("vue").PropType<unknown>;
-    };
-    placeholder: {
-        type: import("vue").PropType<string>;
-    };
-    key: {
-        type: import("vue").PropType<string | number | symbol>;
-    };
-    ref: {
-        type: import("vue").PropType<import("vue").VNodeRef>;
-    };
-    ref_for: {
-        type: import("vue").PropType<boolean>;
-    };
-    ref_key: {
-        type: import("vue").PropType<string>;
-    };
-    onVnodeBeforeMount: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    onVnodeMounted: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    onVnodeBeforeUpdate: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    onVnodeUpdated: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    onVnodeBeforeUnmount: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    onVnodeUnmounted: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-    };
-    modelValue: {
-        type: import("vue").PropType<string | number>;
-    };
-    "onUpdate:modelValue": {
-        type: import("vue").PropType<(value: string | number) => any>;
-    };
-    mandatory: {
-        type: import("vue").PropType<boolean>;
-    };
-    autoFocus: {
-        type: import("vue").PropType<boolean>;
-    };
-    viewOnly: {
-        type: import("vue").PropType<boolean>;
-    };
-    labelDirection: {
-        type: import("vue").PropType<"top" | "left" | "inside">;
-    };
-    feedbackHelpText: {
-        type: import("vue").PropType<string>;
-    };
-    feedbackErrorText: {
-        type: import("vue").PropType<string>;
-    };
-    hoverHelpText: {
-        type: import("vue").PropType<string>;
-    };
-    hoverHelpTextPlacement: {
-        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">;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<PasswordProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: import("vue").PropType<"sm" | "lg">;
-    };
-    label: {
-        type: import("vue").PropType<string>;
-    };
-    style: {
-        type: import("vue").PropType<unknown>;
-    };
-    class: {
-        type: import("vue").PropType<unknown>;
-    };
-    placeholder: {
-        type: import("vue").PropType<string>;
-    };
-    key: {
-        type: import("vue").PropType<string | number | symbol>;
-    };
-    ref: {
-        type: import("vue").PropType<import("vue").VNodeRef>;
-    };
-    ref_for: {
-        type: import("vue").PropType<boolean>;
-    };
-    ref_key: {
-        type: import("vue").PropType<string>;
-    };
-    onVnodeBeforeMount: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    onVnodeMounted: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    onVnodeBeforeUpdate: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    onVnodeUpdated: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    onVnodeBeforeUnmount: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    onVnodeUnmounted: {
-        type: import("vue").PropType<((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>) => void)[]>;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-    };
-    modelValue: {
-        type: import("vue").PropType<string | number>;
-    };
-    "onUpdate:modelValue": {
-        type: import("vue").PropType<(value: string | number) => any>;
-    };
-    mandatory: {
-        type: import("vue").PropType<boolean>;
-    };
-    autoFocus: {
-        type: import("vue").PropType<boolean>;
-    };
-    viewOnly: {
-        type: import("vue").PropType<boolean>;
-    };
-    labelDirection: {
-        type: import("vue").PropType<"top" | "left" | "inside">;
-    };
-    feedbackHelpText: {
-        type: import("vue").PropType<string>;
-    };
-    feedbackErrorText: {
-        type: import("vue").PropType<string>;
-    };
-    hoverHelpText: {
-        type: import("vue").PropType<string>;
-    };
-    hoverHelpTextPlacement: {
-        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">;
-    };
-}>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<PasswordProps>>> & {
     "onUpdate:modelValue"?: (value: string | number) => any;
-}, {}>;
+}, {}, {}>;
 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/input/PasswordInput.vue.js

@@ -1,6 +1,42 @@
-import o from "./PasswordInput.vue2.js";
-/* empty css                    */import t from "../../_virtual/_plugin-vue_export-helper.js";
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-5a43fdb1"]]);
-export {
-  s as default
-};
+import { defineComponent, ref, openBlock, createBlock, mergeProps, withCtx, createVNode, unref, createTextVNode, toDisplayString } from 'vue';
+import Input from './Input.vue.js';
+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 "../../PasswordInput.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _sfc_main = defineComponent({
+  __name: "PasswordInput",
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const isPasswordVisible = ref(false);
+    const togglePasswordVisibility = () => {
+      isPasswordVisible.value = !isPasswordVisible.value;
+    };
+    const reEmitUpdateEvent = (value) => emit("update:modelValue", value);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Input, mergeProps(props, {
+        type: isPasswordVisible.value ? "text" : "password",
+        "onUpdate:modelValue": reEmitUpdateEvent
+      }), {
+        iconAfter: withCtx(() => [
+          createVNode(unref(Text), {
+            class: "password-visibility",
+            size: "xs",
+            onClick: togglePasswordVisibility
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(isPasswordVisible.value ? "Hide" : "Show"), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16, ["type"]);
+    };
+  }
+});
+var PasswordInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2ae4974c"]]);
+
+export { PasswordInput as default };