@ironsource/shared-ui 2.0.2-rc.4 → 2.1.0-rc.0

package/FormRow.vue_vue_type_style_index_0_scoped_8daca9c2_lang.css

@@ -0,0 +1 @@
+.form-row[data-v-8daca9c2]{display:flex;height:auto;gap:1.5rem;align-items:center}.form-row .label-container[data-v-8daca9c2]{display:flex;min-height:1.75rem;height:100%;width:12.875rem;align-items:center;gap:.25rem;flex-shrink:0}.form-row .label-container .mandatory[data-v-8daca9c2]{color:var(--error-main);padding-top:.1875rem}.form-row .content[data-v-8daca9c2]{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;width:100%}

package/components/forms/FormContainer.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/forms/FormField.vue.d.ts

@@ -0,0 +1,24 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    validationPath: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    validationPath: string;
+}>>>, {}>, {
+    default?(_: {
+        validationPath: string;
+    }): 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;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/forms/index.d.ts

@@ -0,0 +1,73 @@
+import FormField from './FormField.vue';
+import { useFormValidation } from './validation/utils/useFormValidation';
+export type * from './validation/utils/types';
+declare const FormFieldTypes: () => (({
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            validationPath: {
+                type: import("vue").PropType<string>;
+                required: true;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            validationPath: {
+                type: import("vue").PropType<string>;
+                required: true;
+            };
+        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        validationPath: {
+            type: import("vue").PropType<string>;
+            required: true;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    validationPath: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {
+            validationPath: string;
+        }): any;
+    };
+})) | (<T_1 extends object>({ formState, formValidationSchema, }: import("./validation/utils/types").UseFormValidationType<T_1>) => import("./validation/utils/types").UseFormValidationReponseType<T_1>))[];
+export { FormField, useFormValidation, FormFieldTypes };

package/components/forms/validation/utils/scrollToElemets.d.ts

@@ -0,0 +1,3 @@
+import { ValidationErrorsType } from './types';
+export declare const scrollToElementByClass: (elementClass: string, index?: number) => void;
+export declare const scrollToFirstInvalidElement: <T>(validationErrors: Partial<Record<keyof T, string>>) => void;

package/components/forms/validation/utils/types.d.ts

@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+import * as yup from 'yup';
+export type ValidationErrorsType<T> = Partial<Record<keyof T, string>>;
+export type ValidationStateType<T> = {
+    isValid: boolean;
+    errors: ValidationErrorsType<T>;
+};
+export declare enum ScrollToAttributes {
+    ID = "id",
+    CLASS = "class",
+    DATA_TESTID = "data-testid"
+}
+type ScrollToElementsSchemaRecordType = Partial<Record<ScrollToAttributes, string>>;
+export type FormValidationScrollElementsSchemaType<T> = Partial<Record<keyof T, ScrollToElementsSchemaRecordType>>;
+export type FormValidationSchemaYupType<T> = Record<keyof T, yup.AnySchema<any, any, any, any>>;
+export type UseFormValidationType<T> = {
+    formState: T;
+    formValidationSchema: FormValidationSchemaYupType<T>;
+};
+export type UseFormValidationReponseType<T> = {
+    validationErrors: ValidationErrorsType<T>;
+    isValid: Ref<boolean>;
+    validate: (formRef?: Ref<HTMLElement>) => void;
+};
+export {};

package/components/forms/validation/utils/useConvertErrorsSchema.d.ts

@@ -0,0 +1 @@
+export declare const convertFlatToNested: (flatObject: any) => {};

package/components/forms/validation/utils/useFormValidation.d.ts

@@ -0,0 +1,3 @@
+import { FormValidationSchemaYupType, ValidationStateType, UseFormValidationType, UseFormValidationReponseType } from './types';
+export declare const yupValidation: <T>(schema: FormValidationSchemaYupType<T>, formState: T) => ValidationStateType<T>;
+export declare const useFormValidation: <T extends object>({ formState, formValidationSchema, }: UseFormValidationType<T>) => UseFormValidationReponseType<T>;

package/components/layout/FormRow.vue.d.ts

@@ -19,7 +19,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     mandatory: boolean;
     testId: string;
 }>, {
-    content?(_: {}): any;
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/layout/FormRow.vue.js

@@ -1,7 +1,7 @@
 import o from "./FormRow.vue2.js";
 /* empty css              */import _ from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../FormRow.vue_vue_type_style_index_0_scoped_54a11bf8_lang.css"; //*');
-const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-54a11bf8"]]);
+// import "../../FormRow.vue_vue_type_style_index_0_scoped_8daca9c2_lang.css"; //*');
+const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-8daca9c2"]]);
 export {
-  p as default
+  t as default
 };

package/components/layout/FormRow.vue2.js

@@ -1,5 +1,5 @@
- import "../../FormRow.vue_vue_type_style_index_0_scoped_54a11bf8_lang.css"; import { defineComponent as c, openBlock as t, createElementBlock as i, createElementVNode as a, createVNode as m, unref as o, withCtx as n, createTextVNode as l, toDisplayString as u, createBlock as f, createCommentVNode as r, renderSlot as y } from "vue";
-import d from "../typography/v4/Typography.vue.js";
+ import "../../FormRow.vue_vue_type_style_index_0_scoped_8daca9c2_lang.css"; import { defineComponent as c, openBlock as t, createElementBlock as i, createElementVNode as a, createVNode as m, unref as o, withCtx as l, createTextVNode as d, toDisplayString as u, createBlock as f, createCommentVNode as r, renderSlot as y } from "vue";
+import n from "../typography/v4/Typography.vue.js";
 const p = {
   key: 0,
   class: "form-row"
@@ -16,24 +16,24 @@ const p = {
         "data-testid": e.testId,
         class: "label-container"
       }, [
-        m(o(d), { variant: "inputLabel" }, {
-          default: n(() => [
-            l(u(e.label), 1)
+        m(o(n), { variant: "inputLabel" }, {
+          default: l(() => [
+            d(u(e.label), 1)
           ]),
           _: 1
         }),
-        e.mandatory ? (t(), f(o(d), {
+        e.mandatory ? (t(), f(o(n), {
           key: 0,
           class: "mandatory"
         }, {
-          default: n(() => [
-            l("*")
+          default: l(() => [
+            d("*")
           ]),
           _: 1
         })) : r("", !0)
       ], 8, _),
       a("div", h, [
-        y(s.$slots, "content", {}, void 0, !0)
+        y(s.$slots, "default", {}, void 0, !0)
       ])
     ])) : r("", !0);
   }

package/components/layout/index.d.ts

@@ -514,7 +514,7 @@ declare const FormCardTypes: () => (({
     testId: string;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
-        content?(_: {}): any;
+        default?(_: {}): any;
     };
 })))[];
 export { FormRow, FormCard, CardPanel, FoldableSection, FormCardTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.0.2-rc.4",
+  "version": "2.1.0-rc.0",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
@@ -60,7 +60,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vue": "^3.2.31",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "^4.1.0",
+    "yup": "^1.3.3"
   },
   "peerDependencies": {
     "@vueuse/core": "^8.7.5",
@@ -217,7 +218,8 @@
     "./typography": "./components/typography/v4/index.js",
     "./themeWrapper": "./components/ThemeWrapper/index.js",
     "./inlineCopy": "./components/inlineCopy/index.js",
-    "./appHeader": "./components/appHeader/index.js"
+    "./appHeader": "./components/appHeader/index.js",
+    "./forms": "./components/forms/index.js"
   },
   "typesVersions": {
     "*": {
@@ -424,6 +426,9 @@
       ],
       "appHeader": [
         "./components/appHeader/index.d.ts"
+      ],
+      "forms": [
+        "./components/forms/index.d.ts"
       ]
     }
   },

package/FormRow.vue_vue_type_style_index_0_scoped_54a11bf8_lang.css

@@ -1 +0,0 @@
-.form-row[data-v-54a11bf8]{display:flex;height:auto;gap:1.5rem;align-items:center}.form-row .label-container[data-v-54a11bf8]{display:flex;min-height:1.75rem;height:100%;width:12.875rem;align-items:center;gap:.25rem;flex-shrink:0}.form-row .label-container .mandatory[data-v-54a11bf8]{color:var(--error-main);padding-top:.1875rem}.form-row .content[data-v-54a11bf8]{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;width:100%}