@ironsource/shared-ui 2.1.3-rc.6 → 2.1.3-rc.7

package/FormCard.vue_vue_type_style_index_0_scoped_276bd901_lang.css

@@ -0,0 +1 @@
+.form-card[data-v-276bd901]{border-radius:var(--border-radius-sm);border:1px solid var(--common-divider);background:var(--background-default)}.card-header[data-v-276bd901]{display:flex;flex-direction:row;align-items:center;min-height:var(--spacing-700);border-radius:calc(var(--border-radius-sm) - 1px) calc(var(--border-radius-sm) - 1px) 0 0;color:var(--text-primary);background:var(--background-paper-elevation-0);padding:0 var(--spacing-300)}.card-header .skeleton-header[data-v-276bd901]{width:220px;height:20px}.card-content[data-v-276bd901]{padding:var(--spacing-300) var(--spacing-400)}.card-content--no-padding[data-v-276bd901]{padding:0}.form-actions[data-v-276bd901]{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;min-height:var(--spacing-700)}.form-action[data-v-276bd901]{margin-left:var(--spacing-100)}.content-skeleton-container[data-v-276bd901]{display:flex;flex-direction:column}.content-skeleton-container .skeleton-long[data-v-276bd901]{margin-bottom:24px;width:100%;max-width:896px;height:16px}.content-skeleton-container .skeleton-short[data-v-276bd901]{margin-bottom:24px;width:100%;max-width:436px;height:16px}

package/components/button/v4/ButtonV4.vue2.js

@@ -1 +1,90 @@
- import "../../../ButtonV4.vue_vue_type_style_index_0_scoped_38c0ed72_lang.css"; 
+ import "../../../ButtonV4.vue_vue_type_style_index_0_scoped_38c0ed72_lang.css"; import { defineComponent as N, computed as h, openBlock as a, createElementBlock as s, normalizeClass as i, createElementVNode as r, createBlock as f, unref as t, createCommentVNode as n, createVNode as c, withCtx as u, renderSlot as m, createTextVNode as z, toDisplayString as g } from "vue";
+import I from "../../typography/v4/Typography.vue.js";
+import y from "../../icon/v4/IconV4.vue.js";
+import b from "../../loader/v4/Loader.vue.js";
+const k = ["data-testid", "disabled"], v = { key: 0 }, V = /* @__PURE__ */ N({
+  __name: "ButtonV4",
+  props: {
+    variant: { default: "contained" },
+    color: { default: "primary" },
+    size: { default: "medium" },
+    loading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    testId: { default: "" },
+    content: { default: "" },
+    startIconName: { default: null },
+    endIconName: { default: null },
+    startIconType: { default: "regular" },
+    endIconType: { default: "regular" }
+  },
+  setup(e) {
+    const d = e, o = h(
+      () => d.size === "small" || d.size === "medium" ? 16 : 20
+    );
+    return (l, w) => (a(), s("button", {
+      class: i([[
+        e.size,
+        e.color,
+        e.variant,
+        { loading: e.loading },
+        {
+          "with-start-icon": !!e.startIconName,
+          "with-end-icon": !!e.endIconName
+        }
+      ], "button-wrap"]),
+      "data-testid": d.testId,
+      disabled: e.disabled
+    }, [
+      e.loading ? n("", !0) : (a(), s("span", v, [
+        r("div", {
+          class: i({
+            flex: e.startIconName || e.endIconName
+          })
+        }, [
+          e.startIconName ? (a(), f(t(y), {
+            key: 0,
+            name: e.startIconName,
+            size: `${t(o)}px`,
+            type: e.startIconType,
+            class: "start-icon"
+          }, null, 8, ["name", "size", "type"])) : n("", !0),
+          c(t(I), { variant: "button" }, {
+            default: u(() => [
+              m(l.$slots, "default", {}, () => [
+                z(g(e.content), 1)
+              ], !0)
+            ]),
+            _: 3
+          }),
+          e.endIconName ? (a(), f(t(y), {
+            key: 1,
+            name: e.endIconName,
+            size: `${t(o)}px`,
+            type: e.endIconType,
+            class: "end-icon"
+          }, null, 8, ["name", "size", "type"])) : n("", !0)
+        ], 2)
+      ])),
+      e.loading ? m(l.$slots, "loader", { key: 1 }, () => [
+        c(t(b), { "max-width": t(o) }, {
+          default: u(() => [
+            r("div", {
+              class: i({ "content-with-icon": e.startIconName || e.endIconName })
+            }, [
+              c(t(I), { variant: "button" }, {
+                default: u(() => [
+                  m(l.$slots, "default", {}, void 0, !0)
+                ]),
+                _: 3
+              })
+            ], 2)
+          ]),
+          _: 3
+        }, 8, ["max-width"])
+      ], !0) : n("", !0)
+    ], 10, k));
+  }
+});
+export {
+  V as default
+};

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

@@ -6,6 +6,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     cancelLabel?: string;
     saveLoading?: boolean;
     testId?: string;
+    isLoading?: boolean;
 }>, {
     title: string;
     noPadding: boolean;
@@ -14,6 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     saveLabel: string;
     saveLoading: boolean;
     testId: string;
+    isLoading: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     save: () => void;
     cancel: () => void;
@@ -25,6 +27,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     cancelLabel?: string;
     saveLoading?: boolean;
     testId?: string;
+    isLoading?: boolean;
 }>, {
     title: string;
     noPadding: boolean;
@@ -33,6 +36,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     saveLabel: string;
     saveLoading: boolean;
     testId: string;
+    isLoading: boolean;
 }>>> & {
     onCancel?: () => any;
     onSave?: () => any;
@@ -40,6 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     title: string;
     testId: string;
     actionButtons: boolean;
+    isLoading: boolean;
     noPadding: boolean;
     saveLabel: string;
     cancelLabel: string;

package/components/forms/FormCard.vue.js

@@ -1,7 +1,7 @@
 import o from "./FormCard.vue2.js";
-/* empty css               */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../FormCard.vue_vue_type_style_index_0_scoped_ad5e4be0_lang.css"; //*');
-const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-ad5e4be0"]]);
+/* empty css               */import _ from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../FormCard.vue_vue_type_style_index_0_scoped_276bd901_lang.css"; //*');
+const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-276bd901"]]);
 export {
   t as default
 };

package/components/forms/FormCard.vue2.js

@@ -1,10 +1,14 @@
- import "../../FormCard.vue_vue_type_style_index_0_scoped_ad5e4be0_lang.css"; import { defineComponent as g, openBlock as v, createElementBlock as T, createElementVNode as r, mergeProps as n, unref as e, renderSlot as s, createVNode as i, withCtx as c, createTextVNode as f, toDisplayString as u, createCommentVNode as B } from "vue";
-import N from "../typography/v4/Typography.vue.js";
-import p from "../button/v4/ButtonV4.vue.js";
+ import "../../FormCard.vue_vue_type_style_index_0_scoped_276bd901_lang.css"; import { defineComponent as T, openBlock as d, createElementBlock as c, createElementVNode as f, mergeProps as l, unref as e, renderSlot as u, createVNode as a, withCtx as m, createTextVNode as g, toDisplayString as v, createBlock as B, createCommentVNode as C } from "vue";
+import p from "../typography/v4/Typography.vue.js";
+import y from "../button/v4/ButtonV4.vue.js";
 import "../button/v4/IconButtonV4.vue.js";
-import { FormCardTestIdModifiers as a } from "../../testids/index.js";
-import { useTestIdAttrs as L } from "../../utils/testIds.js";
-const y = { class: "form-card" }, b = /* @__PURE__ */ g({
+import { FormCardTestIdModifiers as o } from "../../testids/index.js";
+import { useTestIdAttrs as N } from "../../utils/testIds.js";
+import i from "../skeleton/v4/SkeletonV4.vue.js";
+const b = { class: "form-card" }, h = {
+  key: 1,
+  class: "content-skeleton-container"
+}, z = /* @__PURE__ */ T({
   __name: "FormCard",
   props: {
     title: { default: "" },
@@ -13,62 +17,84 @@ const y = { class: "form-card" }, b = /* @__PURE__ */ g({
     saveLabel: { default: "Save" },
     cancelLabel: { default: "Cancel" },
     saveLoading: { type: Boolean, default: !1 },
-    testId: { default: "" }
+    testId: { default: "" },
+    isLoading: { type: Boolean, default: !1 }
   },
   emits: ["save", "cancel"],
-  setup(t, { emit: m }) {
-    const o = L(t.testId, a);
-    return (d, l) => (v(), T("div", null, [
-      r("div", y, [
-        r("header", n({ class: "card-header" }, e(o)[e(a).TITLE]), [
-          s(d.$slots, "header", {}, () => [
-            i(e(N), { variant: "h3" }, {
-              default: c(() => [
-                f(u(t.title), 1)
+  setup(t, { emit: k }) {
+    const n = N(t.testId, o);
+    return (r, s) => (d(), c("div", null, [
+      f("div", b, [
+        f("header", l({ class: "card-header" }, e(n)[e(o).TITLE]), [
+          t.isLoading ? (d(), B(e(i), {
+            key: 1,
+            type: "rectangle",
+            size: 20,
+            class: "skeleton-header"
+          })) : u(r.$slots, "header", { key: 0 }, () => [
+            a(e(p), { variant: "h3" }, {
+              default: m(() => [
+                g(v(t.title), 1)
               ]),
               _: 1
             })
           ], !0)
         ], 16),
-        r("div", n({
+        f("div", l({
           class: ["card-content", { "card-content--no-padding": t.noPadding }]
-        }, e(o)[e(a).CONTENT]), [
-          s(d.$slots, "default", {}, void 0, !0)
+        }, e(n)[e(o).CONTENT]), [
+          t.isLoading ? (d(), c("div", h, [
+            a(e(i), {
+              type: "rectangle",
+              size: 20,
+              class: "skeleton-long"
+            }),
+            a(e(i), {
+              class: "skeleton-short",
+              type: "rectangle"
+            }),
+            a(e(i), {
+              class: "skeleton-short",
+              type: "rectangle"
+            })
+          ])) : u(r.$slots, "default", { key: 0 }, void 0, !0)
         ], 16)
       ]),
-      t.actionButtons ? (v(), T("div", n({
+      t.actionButtons ? (d(), c("div", l({
         key: 0,
         class: "form-actions"
-      }, e(o)[e(a).ACTIONS]), [
-        s(d.$slots, "footer", {}, () => [
-          i(e(p), n({
+      }, e(n)[e(o).ACTIONS]), [
+        u(r.$slots, "footer", {}, () => [
+          a(e(y), l({
             class: "form-action",
             variant: "outlined",
             color: "default"
-          }, e(o)[e(a).CANCEL_BUTTON], {
-            onClick: l[0] || (l[0] = (C) => m("cancel"))
+          }, e(n)[e(o).CANCEL_BUTTON], {
+            disabled: t.isLoading,
+            onClick: s[0] || (s[0] = (L) => k("cancel"))
           }), {
-            default: c(() => [
-              f(u(t.cancelLabel), 1)
+            default: m(() => [
+              g(v(t.cancelLabel), 1)
             ]),
             _: 1
-          }, 16),
-          i(e(p), n({
+          }, 16, ["disabled"]),
+          a(e(y), l({
             class: "form-action",
             loading: t.saveLoading
-          }, e(o)[e(a).SAVE_BUTTON], {
-            onClick: l[1] || (l[1] = (C) => m("save"))
+          }, e(n)[e(o).SAVE_BUTTON], {
+            disabled: t.isLoading,
+            onClick: s[1] || (s[1] = (L) => k("save"))
           }), {
-            default: c(() => [
-              f(u(t.saveLabel), 1)
+            default: m(() => [
+              g(v(t.saveLabel), 1)
             ]),
             _: 1
-          }, 16, ["loading"])
+          }, 16, ["loading", "disabled"])
         ], !0)
-      ], 16)) : B("", !0)
+      ], 16)) : C("", !0)
     ]));
   }
 });
 export {
-  b as default
+  z as default
 };

package/components/forms/index.d.ts

@@ -158,6 +158,7 @@ declare const FormCardTypes: () => (({
             title: string;
             testId: string;
             actionButtons: boolean;
+            isLoading: boolean;
             noPadding: boolean;
             saveLabel: string;
             cancelLabel: string;
@@ -175,6 +176,10 @@ declare const FormCardTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             noPadding: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -194,7 +199,7 @@ declare const FormCardTypes: () => (({
         }>> & {
             onCancel?: () => any;
             onSave?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "testId" | "actionButtons" | "noPadding" | "saveLabel" | "cancelLabel" | "saveLoading">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "testId" | "actionButtons" | "isLoading" | "noPadding" | "saveLabel" | "cancelLabel" | "saveLoading">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -221,6 +226,10 @@ declare const FormCardTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             noPadding: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -247,6 +256,7 @@ declare const FormCardTypes: () => (({
             title: string;
             testId: string;
             actionButtons: boolean;
+            isLoading: boolean;
             noPadding: boolean;
             saveLabel: string;
             cancelLabel: string;
@@ -284,6 +294,10 @@ declare const FormCardTypes: () => (({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        isLoading: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         noPadding: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -320,6 +334,10 @@ declare const FormCardTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     noPadding: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -346,6 +364,7 @@ declare const FormCardTypes: () => (({
     title: string;
     testId: string;
     actionButtons: boolean;
+    isLoading: boolean;
     noPadding: boolean;
     saveLabel: string;
     cancelLabel: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.1.3-rc.6",
+  "version": "2.1.3-rc.7",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/FormCard.vue_vue_type_style_index_0_scoped_ad5e4be0_lang.css

@@ -1 +0,0 @@
-.form-card[data-v-ad5e4be0]{border-radius:var(--border-radius-sm);border:1px solid var(--common-divider);background:var(--background-default)}.card-header[data-v-ad5e4be0]{display:flex;flex-direction:row;align-items:center;min-height:var(--spacing-700);border-radius:calc(var(--border-radius-sm) - 1px) calc(var(--border-radius-sm) - 1px) 0 0;color:var(--text-primary);background:var(--background-paper-elevation-0);padding:0 var(--spacing-300)}.card-content[data-v-ad5e4be0]{padding:var(--spacing-300) var(--spacing-400)}.card-content--no-padding[data-v-ad5e4be0]{padding:0}.form-actions[data-v-ad5e4be0]{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;min-height:var(--spacing-700)}.form-action[data-v-ad5e4be0]{margin-left:var(--spacing-100)}