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

package/components/includeExclude/index.vue.js

@@ -1,26 +1,26 @@
-import e from "./IncludeExclude.vue.vue.js";
-import r from "./IncludeExcludeDragDrop.vue.vue.js";
-import o from "./IncludeExcludeOption.vue.vue.js";
-import l from "./IncludeExcludeOptionDraggable.vue.vue.js";
-import c from "./IncludeExcludeAppTrigger.vue.vue.js";
-import d from "./IncludeExcludeAppHeader.vue.vue.js";
-import p from "./IncludeExcludeChipFilter.vue.vue.js";
-const I = () => [
-  e,
-  r,
-  o,
-  l,
-  c,
-  d,
-  p
+import IncludeExclude from './IncludeExclude.vue.js';
+export { default as IncludeExclude } from './IncludeExclude.vue.js';
+import IncludeExcludeDragDrop from './IncludeExcludeDragDrop.vue.js';
+export { default as IncludeExcludeDragDrop } from './IncludeExcludeDragDrop.vue.js';
+import IncludeExcludeOption from './IncludeExcludeOption.vue.js';
+export { default as IncludeExcludeOption } from './IncludeExcludeOption.vue.js';
+import IncludeExcludeOptionDraggable from './IncludeExcludeOptionDraggable.vue.js';
+export { default as IncludeExcludeOptionDraggable } from './IncludeExcludeOptionDraggable.vue.js';
+import IncludeExcludeAppTrigger from './IncludeExcludeAppTrigger.vue.js';
+export { default as IncludeExcludeAppTrigger } from './IncludeExcludeAppTrigger.vue.js';
+import IncludeExcludeAppHeader from './IncludeExcludeAppHeader.vue.js';
+export { default as IncludeExcludeAppHeader } from './IncludeExcludeAppHeader.vue.js';
+import IncludeExcludeChipFilter from './IncludeExcludeChipFilter.vue.js';
+export { default as IncludeExcludeChipFilter } from './IncludeExcludeChipFilter.vue.js';
+
+const IncludeExcludeTypes = () => [
+  IncludeExclude,
+  IncludeExcludeDragDrop,
+  IncludeExcludeOption,
+  IncludeExcludeOptionDraggable,
+  IncludeExcludeAppTrigger,
+  IncludeExcludeAppHeader,
+  IncludeExcludeChipFilter
 ];
-export {
-  e as IncludeExclude,
-  d as IncludeExcludeAppHeader,
-  c as IncludeExcludeAppTrigger,
-  p as IncludeExcludeChipFilter,
-  r as IncludeExcludeDragDrop,
-  o as IncludeExcludeOption,
-  l as IncludeExcludeOptionDraggable,
-  I as IncludeExcludeTypes
-};
+
+export { IncludeExcludeTypes };

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

@@ -1,40 +1,72 @@
-import { ref as u, computed as l, onMounted as C, nextTick as h } from "vue";
-/* empty css                              */import { useEditableContext as y } from "../../table-cells/EditableContext.vue.js";
-import "@vueuse/core";
-/* empty css                                   */import { REGEX_NUMBER_INPUT as E } from "../../../consts/regex.vue.js";
-const p = (t, s) => {
-  const n = y(), c = () => {
-    n.onClose?.();
-  }, f = () => {
-    n?.confirmable && !n?.error?.value && n.onClose?.();
-  }, o = u(null), a = u(!1), i = l(() => t.label && t.labelDirection === "inside" && !a.value);
-  C(async () => {
-    await h(), !(!t.autoFocus && !n.focusable) && o.value && o.value.focus();
+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;
   });
-  const m = l(() => {
-    if (i.value) {
-      let e = t.label;
-      return t.mandatory && (e += " *"), e;
+  onMounted(async () => {
+    await nextTick();
+    if (!props.autoFocus && !api.focusable) {
+      return;
     }
-    return t.placeholder;
-  }), d = l(() => `input-size-${t.size}`), b = (e) => {
-    n.onChange?.(e.target.value), s("update:modelValue", e.target.value);
-  }, r = ".";
-  return {
-    onConfirm: c,
-    onEnter: f,
-    inputRef: o,
-    isFocused: a,
-    showLabelInside: i,
-    api: n,
-    labelText: m,
-    sizeClass: d,
-    handleInput: b,
-    handleKeypress: (e) => {
-      t.onlyDigits && (e.key.match(E) ? e.key === r && t.modelValue.toString().includes(r) && e.preventDefault() : e.preventDefault());
+    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 {
-  p as inputCommon
-};
+
+export { inputCommon };

package/components/input/v3/DollarInput.vue.js

@@ -0,0 +1,37 @@
+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 "../../../DollarInput.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _sfc_main = defineComponent({
+  __name: "DollarInput",
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const reEmitUpdateEvent = (value) => emit("update:modelValue", value);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Input, mergeProps(props, {
+        type: "number",
+        "hide-number-arrows": true,
+        "onUpdate:modelValue": reEmitUpdateEvent
+      }), {
+        iconBefore: withCtx(() => [
+          createVNode(unref(Text), {
+            class: "dollar-sign",
+            size: "sm"
+          }, {
+            default: withCtx(() => [
+              createTextVNode("$")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+var DollarInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4dd325c2"]]);
+
+export { DollarInput as default };

package/components/input/v3/Input.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: string | number;
     placeholder?: string;
     disabled?: boolean;
@@ -97,9 +97,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hoverHelpText: string;
     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;
-}>, {
-    iconBefore?(_: {}): any;
-    iconAfter?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -112,15 +109,7 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+    } : P[K];
 };

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

@@ -0,0 +1,221 @@
+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";
+const _hoisted_1 = ["data-testid"];
+const _hoisted_2 = ["data-testid"];
+const _hoisted_3 = { class: "info-icon-wrapper" };
+const _hoisted_4 = {
+  key: 0,
+  class: "icon-container icon-before"
+};
+const _hoisted_5 = ["value", "placeholder", "disabled", "type", "step", "data-testid"];
+const _hoisted_6 = {
+  key: 1,
+  class: "icon-container icon-after"
+};
+const _hoisted_7 = { key: 2 };
+const _hoisted_8 = { key: 3 };
+const _hoisted_9 = ["data-testid"];
+const __default__ = {
+  inheritAttrs: false
+};
+const _sfc_main = /* @__PURE__ */ 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" },
+    onlyDigits: { type: Boolean, default: false },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const {
+      onConfirm,
+      onEnter,
+      inputRef,
+      isFocused,
+      showLabelInside,
+      api,
+      labelText,
+      sizeClass,
+      handleInput,
+      handleKeypress
+    } = inputCommon(props, emit);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass({
+          "input-with-label-container": true,
+          "label-direction-left": __props.labelDirection === "left",
+          disabled: __props.disabled
+        }),
+        "data-testid": `${__props.testId}-${unref(InputTestIdModifiers).WRAPPER}`
+      }, [
+        __props.label && __props.labelDirection !== "inside" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["label-container", "direction-" + __props.labelDirection]),
+          "data-testid": `${__props.testId}-${unref(InputTestIdModifiers).LABEL_CONTAINER}`
+        }, [
+          createVNode(unref(Text), {
+            class: "label",
+            "data-testid": `${__props.testId}-${unref(InputTestIdModifiers).LABEL_TEXT}`
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.label), 1)
+            ]),
+            _: 1
+          }, 8, ["data-testid"]),
+          __props.mandatory ? (openBlock(), createBlock(unref(Text), {
+            key: 0,
+            size: "lg",
+            class: "mandatory",
+            "data-testid": `${__props.testId}-${unref(InputTestIdModifiers).MANDATORY}`
+          }, {
+            default: withCtx(() => [
+              createTextVNode("*")
+            ]),
+            _: 1
+          }, 8, ["data-testid"])) : createCommentVNode("", true),
+          __props.hoverHelpText ? (openBlock(), createBlock(unref(_sfc_main$1), {
+            key: 1,
+            triggers: ["hover"],
+            text: __props.hoverHelpText,
+            placement: __props.hoverHelpTextPlacement,
+            size: "xs",
+            strong: true
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_3, [
+                createVNode(unref(Icon), {
+                  class: "info-icon",
+                  name: "info",
+                  "font-size": "sm"
+                })
+              ])
+            ]),
+            _: 1
+          }, 8, ["text", "placement"])) : createCommentVNode("", true)
+        ], 10, _hoisted_2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass({
+            "input-container": true,
+            "label-inside": unref(showLabelInside),
+            error: unref(api).error?.value || __props.feedbackErrorText,
+            focused: unref(isFocused)
+          })
+        }, [
+          _ctx.$slots["iconBefore"] ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            renderSlot(_ctx.$slots, "iconBefore", {}, void 0, true)
+          ])) : createCommentVNode("", true),
+          createElementVNode("input", mergeProps(_ctx.$attrs, {
+            ref_key: "inputRef",
+            ref: inputRef,
+            value: unref(api).value?.value ?? __props.modelValue,
+            placeholder: unref(labelText),
+            disabled: __props.disabled || __props.viewOnly,
+            type: __props.type,
+            class: ["input", {
+              [unref(sizeClass)]: true,
+              "view-only": __props.viewOnly,
+              "label-inside": unref(showLabelInside),
+              "hide-arrows": __props.hideNumberArrows,
+              "input-type": __props.type
+            }],
+            step: __props.step,
+            "data-testid": `${__props.testId}-${unref(InputTestIdModifiers).FIELD}`,
+            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)
+          ])) : createCommentVNode("", true),
+          unref(api)?.confirmable && !unref(api)?.error?.value ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            createVNode(unref(IconButton), {
+              class: "confirm-icon",
+              theme: "secondary",
+              variant: "colorized",
+              onClick: withModifiers(unref(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_8, [
+            createVNode(unref(_sfc_main$1), {
+              text: unref(api)?.error?.value,
+              "data-testid": `${__props.testId}-${unref(InputTestIdModifiers).TOOLTIP}`
+            }, {
+              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", "data-testid"])
+          ])) : createCommentVNode("", true)
+        ], 2),
+        __props.feedbackErrorText || __props.feedbackHelpText ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "extra-text-container",
+          "data-testid": `${__props.testId}-${unref(InputTestIdModifiers).EXTRA_TEXT}`
+        }, [
+          createVNode(unref(Text), {
+            class: normalizeClass(__props.feedbackErrorText ? "error" : "help"),
+            size: "caption"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.feedbackErrorText || __props.feedbackHelpText), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ], 8, _hoisted_9)) : createCommentVNode("", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a28e3446"]]);
+
+export { Input as default };

package/components/input/v3/PasswordInput.vue.js

@@ -0,0 +1,41 @@
+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 "../../../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-3e2d0e84"]]);
+
+export { PasswordInput as default };

package/components/input/v3/PercentageInput.vue.js

@@ -0,0 +1,37 @@
+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 "../../../PercentageInput.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _sfc_main = defineComponent({
+  __name: "PercentageInput",
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const reEmitUpdateEvent = (value) => emit("update:modelValue", value);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Input, mergeProps(props, {
+        type: "number",
+        "hide-number-arrows": true,
+        "onUpdate:modelValue": reEmitUpdateEvent
+      }), {
+        iconAfter: withCtx(() => [
+          createVNode(unref(Text), {
+            class: "percentage-sign",
+            size: "sm"
+          }, {
+            default: withCtx(() => [
+              createTextVNode("%")
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+var PercentageInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f4c461c4"]]);
+
+export { PercentageInput as default };