@ironsource/shared-ui 1.4.0-rc.10

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

@@ -0,0 +1,20 @@
+import Input from './Input.vue';
+import { ExtractComponentProps } from '../../utils/extract-props';
+export type DollarPropsType = Omit<ExtractComponentProps<typeof Input>, 'type' | 'hideNumberArrows' | 'step'>;
+export interface DollarProps extends DollarPropsType {
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<DollarProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DollarProps>>> & {
+    "onUpdate:modelValue"?: (value: 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/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-b96666f4"]]);
+
+export { DollarInput as default };

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

@@ -0,0 +1,105 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    viewOnly?: boolean;
+    size?: 'sm' | 'lg';
+    label?: string;
+    labelDirection?: 'inside' | 'top' | 'left';
+    mandatory?: boolean;
+    feedbackHelpText?: string;
+    autoFocus?: boolean;
+    feedbackErrorText?: string;
+    type?: 'text' | 'number' | 'password';
+    hideNumberArrows?: boolean;
+    step?: number;
+    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';
+}>, {
+    modelValue: string;
+    placeholder: string;
+    disabled: boolean;
+    viewOnly: boolean;
+    size: string;
+    label: string;
+    labelDirection: string;
+    mandatory: boolean;
+    feedbackHelpText: string;
+    autoFocus: boolean;
+    feedbackErrorText: string;
+    type: string;
+    hideNumberArrows: boolean;
+    step: number;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+}>, {}, 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<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    viewOnly?: boolean;
+    size?: 'sm' | 'lg';
+    label?: string;
+    labelDirection?: 'inside' | 'top' | 'left';
+    mandatory?: boolean;
+    feedbackHelpText?: string;
+    autoFocus?: boolean;
+    feedbackErrorText?: string;
+    type?: 'text' | 'number' | 'password';
+    hideNumberArrows?: boolean;
+    step?: number;
+    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';
+}>, {
+    modelValue: string;
+    placeholder: string;
+    disabled: boolean;
+    viewOnly: boolean;
+    size: string;
+    label: string;
+    labelDirection: string;
+    mandatory: boolean;
+    feedbackHelpText: string;
+    autoFocus: boolean;
+    feedbackErrorText: string;
+    type: string;
+    hideNumberArrows: boolean;
+    step: number;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+}>>> & {
+    "onUpdate:modelValue"?: (value: string | number) => any;
+}, {
+    size: 'sm' | 'lg';
+    label: string;
+    type: 'text' | 'number' | 'password';
+    disabled: boolean;
+    modelValue: string | number;
+    placeholder: string;
+    mandatory: boolean;
+    autoFocus: boolean;
+    viewOnly: boolean;
+    labelDirection: 'inside' | 'top' | 'left';
+    feedbackHelpText: string;
+    feedbackErrorText: string;
+    hideNumberArrows: boolean;
+    step: number;
+    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';
+}>;
+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/input/Input.vue.js

@@ -0,0 +1,233 @@
+import { defineComponent, ref, computed, onMounted, nextTick, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, createElementVNode, renderSlot, mergeProps, withKeys, withModifiers } from 'vue';
+/* 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';
+import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
+/* empty css                                                                    *//* empty css                                                                */import IconButton from '../button/IconButton.vue.js';
+/* empty css                                                                      */import { useEditableContext } from '../table-cells/EditableContext.vue.js';
+import '@vueuse/core';
+/* empty css                                                                       *//* empty css                                                       */
+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 = /* @__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" }
+  },
+  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": __props.labelDirection === "left",
+          disabled: __props.disabled
+        })
+      }, [
+        __props.label && __props.labelDirection !== "inside" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["label-container", "direction-" + __props.labelDirection])
+        }, [
+          createVNode(unref(Text), { class: "label" }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.label), 1)
+            ]),
+            _: 1
+          }),
+          __props.mandatory ? (openBlock(), createBlock(unref(Text), {
+            key: 0,
+            size: "lg",
+            class: "mandatory"
+          }, {
+            default: withCtx(() => [
+              createTextVNode("*")
+            ]),
+            _: 1
+          })) : 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_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": unref(showLabelInside),
+            error: unref(api).error?.value || __props.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 ?? __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,
+            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),
+        __props.feedbackErrorText || __props.feedbackHelpText ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          createVNode(unref(Text), {
+            class: normalizeClass(__props.feedbackErrorText ? "error" : "help"),
+            size: "caption"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.feedbackErrorText || __props.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

@@ -0,0 +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 {
+}
+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<__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

@@ -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-da9d5486"]]);
+
+export { PasswordInput as default };

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

@@ -0,0 +1,20 @@
+import Input from './Input.vue';
+import { ExtractComponentProps } from '../../utils/extract-props';
+export type PercentagePropsType = Omit<ExtractComponentProps<typeof Input>, 'type' | 'hideNumberArrows'>;
+export interface PercentageProps extends PercentagePropsType {
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<PercentageProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<PercentageProps>>> & {
+    "onUpdate:modelValue"?: (value: 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/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-7247a0d5"]]);
+
+export { PercentageInput as default };