@ironsource/shared-ui 2.1.11-rc.4 → 2.1.11-rc.40

package/components/chart/types.d.ts

@@ -1,5 +1,7 @@
 import { Ref } from 'vue';
 import { UseVirtualListItem } from '@vueuse/core';
+import { IconTypes } from '../icon/v4/Icon.types';
+import { ChartTypeRegistry, TooltipItem } from 'chart.js';
 export declare enum ChartType {
     Line = "line",
     Bar = "bar",
@@ -11,18 +13,30 @@ export type ChartDataSet = {
     id: string | number;
     label: string;
     data: ChartDataRecord[];
+    caption?: string;
     color?: string;
+    icon?: string;
+    iconType?: IconTypes;
 };
 export type ChartParsingConfig = {
     xAxisKey: string;
     yAxisKey: string;
 };
-export type ValueFormat = 'date' | 'dateLong' | 'number' | 'percent' | 'string';
+export type ValueFormat = 'date' | 'dateLong' | 'number' | 'percent' | 'string' | 'day';
 export type LegendItem = {
     id: string | number;
     label: string;
+    caption?: string;
     color?: string;
+    icon?: string;
+    iconType?: IconTypes;
 };
+export interface MyTooltipItem<T extends keyof ChartTypeRegistry = keyof ChartTypeRegistry> extends TooltipItem<T> {
+    dataset: {
+        icon?: string;
+        iconType?: IconTypes;
+    } & TooltipItem<T>['dataset'];
+}
 export type UseVirtualListResult = {
     list: Ref<UseVirtualListItem<LegendItem>[]>;
     containerProps: {

package/components/chart/utils/utils.js

@@ -1,11 +1,11 @@
-import { format as f } from "date-fns";
-import { formatNumber as m } from "./formatNumber.js";
+import { format as n } from "date-fns";
+import { formatNumber as d } from "./formatNumber.js";
 const p = (r, t, e) => {
   if (e === 0)
     return 0;
-  const n = t - r, o = n / e * 0.4;
-  return (n + o) / e;
-}, M = (r, t) => t === "number" ? m(r) : t === "date" ? f(new Date(r), "MMM dd") : t === "dateLong" ? f(new Date(r), "dd MMM yyyy") : String(r);
+  const f = t - r, o = f / e * 0.4;
+  return (f + o) / e;
+}, M = (r, t) => t === "day" ? n(new Date(r), "EEEE") : t === "number" ? d(r) : t === "date" ? n(new Date(r), "MMM dd") : t === "dateLong" ? n(new Date(r), "MMM dd, yyyy") : String(r);
 export {
   p as calcStepSize,
   M as formatValue

package/components/checkbox/v4/CheckboxV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./CheckboxV4.vue2.js";
 /* empty css                 */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../CheckboxV4.vue_vue_type_style_index_0_scoped_8e5b619a_lang.css"; //*');
-const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-8e5b619a"]]);
+// import "../../../CheckboxV4.vue_vue_type_style_index_0_scoped_af4ae3c3_lang.css"; //*');
+const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-af4ae3c3"]]);
 export {
-  c as default
+  t as default
 };

package/components/checkbox/v4/CheckboxV4.vue2.js

@@ -1,4 +1,4 @@
- import "../../../CheckboxV4.vue_vue_type_style_index_0_scoped_8e5b619a_lang.css"; import { defineComponent as D, openBlock as o, createElementBlock as f, mergeProps as a, unref as e, createElementVNode as u, Fragment as B, createBlock as n, createCommentVNode as c, withCtx as V, renderSlot as $, createTextVNode as F, toDisplayString as g, pushScopeId as A, popScopeId as T } from "vue";
+ import "../../../CheckboxV4.vue_vue_type_style_index_0_scoped_af4ae3c3_lang.css"; import { defineComponent as D, openBlock as o, createElementBlock as f, mergeProps as a, unref as e, createElementVNode as u, Fragment as B, createBlock as n, createCommentVNode as c, withCtx as V, renderSlot as $, createTextVNode as F, toDisplayString as g, pushScopeId as A, popScopeId as T } from "vue";
 import v from "../../typography/v4/Typography.vue.js";
 import L from "./icons/UncheckedState.vue.js";
 import N from "./icons/CheckedState.vue.js";
@@ -9,7 +9,7 @@ import K from "./icons/IndeterminateDisabledState.vue.js";
 import { CheckboxTestIdModifiers as i } from "../../../testids/index.js";
 import { checkboxCommon as R } from "../common/Checkbox.common.js";
 import { useTestIdAttrs as U } from "../../../utils/testIds.js";
-const M = (t) => (A("data-v-8e5b619a"), t = t(), T(), t), W = ["for"], j = { class: "checkboxes" }, q = ["id", "disabled", "checked", ".indeterminate"], z = /* @__PURE__ */ M(() => /* @__PURE__ */ u("span", { class: "checkbox__inner" }, null, -1)), G = { class: "states" }, le = /* @__PURE__ */ D({
+const M = (t) => (A("data-v-af4ae3c3"), t = t(), T(), t), W = ["for"], j = { class: "checkboxes" }, q = ["id", "disabled", "checked", ".indeterminate"], z = /* @__PURE__ */ M(() => /* @__PURE__ */ u("span", { class: "checkbox__inner" }, null, -1)), G = { class: "states" }, le = /* @__PURE__ */ D({
   __name: "CheckboxV4",
   props: {
     isChecked: { type: Boolean },

package/components/datePicker/v4/DatePickerV4.vue2.js

@@ -1,6 +1,6 @@
  import "../../../DatePickerV4.vue_vue_type_style_index_0_scoped_39e6c10c_lang.css"; import { defineComponent as g, openBlock as r, createElementBlock as i, unref as e, createElementVNode as D, renderSlot as v, createVNode as n, normalizeClass as I, createCommentVNode as P } from "vue";
 import y from "./DatePickerMonthV4.vue.js";
-import { DatePickerTestIdModifiers as u } from "../../../testids/index.js";
+import { DatePickerTestIdModifiers as m } from "../../../testids/index.js";
 import { dataPickerCommon as h } from "../common/DatePicker.common.js";
 import "../../dropdown/v4/DropdownV4.vue.js";
 import "../../dropdown/v4/DefaultDropdownTrigger.vue.js";
@@ -11,7 +11,8 @@ import "../../dropdown/v4/ButtonDropdownTrigger.vue.js";
 import w from "../../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
 import "../../dropdown/v4/TreeDropdown.vue.js";
 import "../../dropdown/v4/OptionV4.vue.js";
-const $ = ["id", "data-testid"], O = /* @__PURE__ */ g({
+import "../../dropdown/v4/ConditionalDropdown.vue.js";
+const $ = ["id", "data-testid"], S = /* @__PURE__ */ g({
   __name: "DatePickerV4",
   props: {
     uniqueId: { default: Date.now() },
@@ -22,7 +23,7 @@ const $ = ["id", "data-testid"], O = /* @__PURE__ */ g({
     testId: { default: "" }
   },
   emits: ["update:modelValue"],
-  setup(t, { emit: m }) {
+  setup(t, { emit: u }) {
     const s = t, {
       toggle: p,
       updateValue: f,
@@ -31,12 +32,12 @@ const $ = ["id", "data-testid"], O = /* @__PURE__ */ g({
       formattedValue: d,
       nearTheEdge: c,
       valueAsDate: k
-    } = h(s, m);
+    } = h(s, u);
     return (V, l) => (r(), i("div", {
       id: e(o),
       ref: "datePicker",
       class: "date-picker",
-      "data-testid": `${t.testId}-${e(u).WRAPPER}`
+      "data-testid": `${t.testId}-${e(m).WRAPPER}`
     }, [
       D("div", {
         ref: "buttonRef",
@@ -48,7 +49,7 @@ const $ = ["id", "data-testid"], O = /* @__PURE__ */ g({
             "start-icon-name": "calendar-blank",
             variant: "outlined",
             style: { marginRight: "10px" },
-            "test-id": `${t.testId}-${e(u).INPUT}`,
+            "test-id": `${t.testId}-${e(m).INPUT}`,
             open: e(a)
           }, null, 8, ["label", "test-id", "open"])
         ], !0)
@@ -70,5 +71,5 @@ const $ = ["id", "data-testid"], O = /* @__PURE__ */ g({
   }
 });
 export {
-  O as default
+  S as default
 };

package/components/dateRange/v4/DateRangeV4.vue.js

@@ -1,7 +1,7 @@
 import e from "./DateRangeV4.vue2.js";
 /* empty css                  */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_f81413ec_lang.css"; //*');
-const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-f81413ec"]]);
+// import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_309e5351_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-309e5351"]]);
 export {
   a as default
 };

package/components/dateRange/v4/DateRangeV4.vue2.js

@@ -1,7 +1,7 @@
- import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_f81413ec_lang.css"; import { defineComponent as J, openBlock as n, createElementBlock as i, unref as e, normalizeClass as r, createElementVNode as d, renderSlot as N, createVNode as s, withDirectives as v, Fragment as k, renderList as C, withCtx as l, createTextVNode as m, toDisplayString as g, createCommentVNode as P, vShow as $, normalizeStyle as Q, setBlockTracking as x } from "vue";
+ import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_309e5351_lang.css"; import { defineComponent as J, openBlock as n, createElementBlock as i, unref as e, normalizeClass as r, createElementVNode as d, renderSlot as N, createVNode as s, withDirectives as v, Fragment as k, renderList as C, withCtx as l, createTextVNode as m, toDisplayString as g, createCommentVNode as P, vShow as $, normalizeStyle as Q, setBlockTracking as x } from "vue";
 import X from "./CalendarMonthV4.vue.js";
 import { typeToName as Z, messagePerType as _ } from "../common/consts.common.js";
-import R from "../../button/v4/ButtonV4.vue.js";
+import E from "../../button/v4/ButtonV4.vue.js";
 import "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
 import "../../button/v4/ToggleButtonGroupAB.vue.js";
@@ -14,13 +14,14 @@ import "../../dropdown/v4/ButtonDropdownTrigger.vue.js";
 import ee from "../../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
 import "../../dropdown/v4/TreeDropdown.vue.js";
 import "../../dropdown/v4/OptionV4.vue.js";
+import "../../dropdown/v4/ConditionalDropdown.vue.js";
 import { DateRangeTestIdModifiers as o, DatePickerTestIdModifiers as te } from "../../../testids/index.js";
 import { dateRangeCommon as ae } from "../common/DateRange.common.js";
 import p from "../../typography/v4/Typography.vue.js";
 const de = ["id", "data-testid"], ne = ["data-testid"], ie = ["id", "data-testid"], se = {
   key: 0,
   class: "type-picker"
-}, oe = ["onClick"], le = ["data-testid"], re = ["id"], ue = ["id"], ce = ["onClick"], me = { class: "dropdown-rightTriangle" }, pe = ["data-testid"], ye = { class: "date-picker-calendar left-box" }, ge = { class: "buttons-cover" }, fe = { class: "range" }, he = { class: "text-container" }, Oe = /* @__PURE__ */ J({
+}, oe = ["onClick"], le = ["data-testid"], re = ["id"], ue = ["id"], ce = ["onClick"], me = { class: "dropdown-rightTriangle" }, pe = ["data-testid"], ye = { class: "date-picker-calendar left-box" }, ge = { class: "buttons-cover" }, fe = { class: "range" }, he = { class: "text-container" }, Le = /* @__PURE__ */ J({
   __name: "DateRangeV4",
   props: {
     range: null,
@@ -47,7 +48,7 @@ const de = ["id", "data-testid"], ne = ["data-testid"], ie = ["id", "data-testid
     "opened",
     "dismissed"
   ],
-  setup(t, { emit: E }) {
+  setup(t, { emit: R }) {
     const A = t, {
       datePicker: B,
       datePickerId: M,
@@ -72,7 +73,7 @@ const de = ["id", "data-testid"], ne = ["data-testid"], ie = ["id", "data-testid
       selectionChanged: j,
       toggle: b,
       isCompact: H
-    } = ae(A, E);
+    } = ae(A, R);
     return (D, u) => (n(), i("div", {
       id: e(M),
       ref_key: "datePicker",
@@ -93,7 +94,6 @@ const de = ["id", "data-testid"], ne = ["data-testid"], ie = ["id", "data-testid
             label: e(w),
             "start-icon-name": "calendar-blank",
             variant: "outlined",
-            style: { marginRight: "10px" },
             "test-id": `${t.testId}-${e(te).INPUT}`,
             open: e(h)
           }, null, 8, ["label", "test-id", "open"])
@@ -211,7 +211,7 @@ const de = ["id", "data-testid"], ne = ["data-testid"], ie = ["id", "data-testid
                   [$, e(q)]
                 ]),
                 u[1] || (x(-1), u[1] = d("div", { class: "buttons" }, [
-                  s(e(R), {
+                  s(e(E), {
                     id: "button-ok" + t.uniqueId,
                     size: "small",
                     class: "button",
@@ -229,7 +229,7 @@ const de = ["id", "data-testid"], ne = ["data-testid"], ie = ["id", "data-testid
                     ]),
                     _: 1
                   }, 8, ["id", "data-testid", "onClick"]),
-                  s(e(R), {
+                  s(e(E), {
                     id: "button-cancel" + t.uniqueId,
                     size: "small",
                     theme: "third",
@@ -261,5 +261,5 @@ const de = ["id", "data-testid"], ne = ["data-testid"], ie = ["id", "data-testid
   }
 });
 export {
-  Oe as default
+  Le as default
 };

package/components/dialog/v4/DialogV4.vue.d.ts

@@ -13,6 +13,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     closeOnClickOutside?: boolean;
     beforeClose?: (show: () => void) => void;
     showCloseButton?: boolean;
+    showCancelButton?: boolean;
+    showSaveButton?: boolean;
     showFooter?: boolean;
     saveButtonLabel?: string;
     saveButtonLoading?: boolean;
@@ -31,6 +33,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     closeDelay: number;
     closeOnClickOutside: boolean;
     showCloseButton: boolean;
+    showCancelButton: boolean;
+    showSaveButton: boolean;
     escapeToClose: boolean;
     beforeClose: any;
     showFooter: boolean;
@@ -60,6 +64,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     closeOnClickOutside?: boolean;
     beforeClose?: (show: () => void) => void;
     showCloseButton?: boolean;
+    showCancelButton?: boolean;
+    showSaveButton?: boolean;
     showFooter?: boolean;
     saveButtonLabel?: string;
     saveButtonLoading?: boolean;
@@ -78,6 +84,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     closeDelay: number;
     closeOnClickOutside: boolean;
     showCloseButton: boolean;
+    showCancelButton: boolean;
+    showSaveButton: boolean;
     escapeToClose: boolean;
     beforeClose: any;
     showFooter: boolean;
@@ -107,6 +115,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     closeOnClickOutside: boolean;
     beforeClose: (show: () => void) => void;
     showCloseButton: boolean;
+    showCancelButton: boolean;
+    showSaveButton: boolean;
     showFooter: boolean;
     saveButtonLabel: string;
     saveButtonLoading: boolean;

package/components/dialog/v4/DialogV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./DialogV4.vue2.js";
 /* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DialogV4.vue_vue_type_style_index_0_scoped_09c488cf_lang.css"; //*');
-const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-09c488cf"]]);
+// import "../../../DialogV4.vue_vue_type_style_index_0_scoped_c65df8d7_lang.css"; //*');
+const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-c65df8d7"]]);
 export {
-  t as default
+  c as default
 };

package/components/dialog/v4/DialogV4.vue2.js

@@ -1,22 +1,22 @@
- import "../../../DialogV4.vue_vue_type_style_index_0_scoped_09c488cf_lang.css"; import { defineComponent as A, openBlock as o, createBlock as c, Teleport as p, createVNode as b, Transition as w, withCtx as u, unref as e, createElementBlock as m, createElementVNode as C, mergeProps as s, renderSlot as k, createTextVNode as f, toDisplayString as B, createCommentVNode as d } from "vue";
-import { NOOP as I } from "@vue/shared";
-import T from "../../typography/v4/Typography.vue.js";
-import N from "../../button/v4/ButtonV4.vue.js";
+ import "../../../DialogV4.vue_vue_type_style_index_0_scoped_c65df8d7_lang.css"; import { defineComponent as L, openBlock as o, createBlock as d, Teleport as E, createVNode as A, Transition as I, withCtx as i, unref as e, createElementBlock as m, createElementVNode as y, mergeProps as u, renderSlot as k, createTextVNode as f, toDisplayString as B, createCommentVNode as l } from "vue";
+import { NOOP as S } from "@vue/shared";
+import b from "../../typography/v4/Typography.vue.js";
+import O from "../../button/v4/ButtonV4.vue.js";
 import V from "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
 import "../../button/v4/ToggleButtonGroupAB.vue.js";
-import { Reason as g } from "../common/Reason.js";
-import { dialogCommon as D } from "../common/Dialog.common.js";
-import { DialogTestIdModifiers as l } from "../../../testids/index.js";
-import { useTestIdAttrs as P } from "../../../utils/testIds.js";
-import { useMagicKeys as R, whenever as $ } from "@vueuse/core";
-const S = {
+import { Reason as h } from "../common/Reason.js";
+import { dialogCommon as p } from "../common/Dialog.common.js";
+import { DialogTestIdModifiers as a } from "../../../testids/index.js";
+import { useTestIdAttrs as D } from "../../../utils/testIds.js";
+import { useMagicKeys as P, whenever as R } from "@vueuse/core";
+const $ = {
   key: 0,
   class: "container light-theme-v4"
 }, F = { class: "title" }, U = {
   key: 1,
   class: "footer"
-}, Y = /* @__PURE__ */ A({
+}, Y = /* @__PURE__ */ L({
   __name: "DialogV4",
   props: {
     modelValue: { type: Boolean },
@@ -32,6 +32,8 @@ const S = {
     closeOnClickOutside: { type: Boolean, default: !1 },
     beforeClose: { type: Function, default: null },
     showCloseButton: { type: Boolean, default: !0 },
+    showCancelButton: { type: Boolean, default: !0 },
+    showSaveButton: { type: Boolean, default: !0 },
     showFooter: { type: Boolean, default: !0 },
     saveButtonLabel: { default: "Save" },
     saveButtonLoading: { type: Boolean, default: !1 },
@@ -41,111 +43,113 @@ const S = {
     testId: { default: "" }
   },
   emits: ["update:modelValue", "open", "close", "save", "cancel"],
-  setup(t, { emit: v }) {
-    const i = t, { escape: L } = R(), a = P(i.testId, l), { visible: h, handleClose: y } = D(i, v);
-    $(L, () => {
-      h.value && i.escapeToClose && !i.saveButtonLoading && y(g.Escape);
+  setup(t, { emit: C }) {
+    const r = t, { escape: w } = P(), n = D(r.testId, a), { visible: T, handleClose: v } = p(r, C);
+    R(w, () => {
+      T.value && r.escapeToClose && !r.saveButtonLoading && v(h.Escape);
     });
-    const E = () => {
-      const { closeOnClickOutside: r, saveButtonLoading: n } = i;
-      r && !n ? y(g.Backdrop) : I();
+    const N = () => {
+      const { closeOnClickOutside: c, saveButtonLoading: s } = r;
+      c && !s ? v(h.Backdrop) : S();
     };
-    return (r, n) => (o(), c(p, {
+    return (c, s) => (o(), d(E, {
       to: "body",
       disabled: !t.appendToBody
     }, [
-      b(w, null, {
-        default: u(() => [
-          e(h) ? (o(), m("div", S, [
-            C("div", s({
+      A(I, null, {
+        default: i(() => [
+          e(T) ? (o(), m("div", $, [
+            y("div", u({
               class: ["dialog", [`dialog--${t.size}`]]
-            }, e(a)[e(l).WRAPPER]), [
-              t.title || t.subtitle || t.showCloseButton ? (o(), m("header", s({
+            }, e(n)[e(a).WRAPPER]), [
+              t.title || t.subtitle || t.showCloseButton ? (o(), m("header", u({
                 key: 0,
                 class: "header"
-              }, e(a)[e(l).HEADER]), [
-                C("div", F, [
-                  k(r.$slots, "header", {}, () => [
-                    t.title ? (o(), c(e(T), {
+              }, e(n)[e(a).HEADER]), [
+                y("div", F, [
+                  k(c.$slots, "header", {}, () => [
+                    t.title ? (o(), d(e(b), {
                       key: 0,
                       variant: "h3"
                     }, {
-                      default: u(() => [
+                      default: i(() => [
                         f(B(t.title), 1)
                       ]),
                       _: 1
-                    })) : d("", !0),
-                    t.subtitle ? (o(), c(e(T), {
+                    })) : l("", !0),
+                    t.subtitle ? (o(), d(e(b), {
                       key: 1,
                       class: "subtitle",
                       variant: "body1"
                     }, {
-                      default: u(() => [
+                      default: i(() => [
                         f(B(t.subtitle), 1)
                       ]),
                       _: 1
-                    })) : d("", !0)
+                    })) : l("", !0)
                   ], !0)
                 ]),
-                t.showCloseButton ? (o(), c(e(V), s({
+                t.showCloseButton ? (o(), d(e(V), u({
                   key: 0,
                   class: "close-button",
                   "icon-name": "x",
                   disabled: t.saveButtonLoading
-                }, e(a)[e(l).ACTION_CLOSE], {
-                  onClick: n[0] || (n[0] = (O) => e(y)(e(g).CloseButton))
-                }), null, 16, ["disabled"])) : d("", !0)
-              ], 16)) : d("", !0),
-              C("div", s({ class: "content" }, e(a)[e(l).CONTENT]), [
-                k(r.$slots, "default", {}, () => [
-                  t.content ? (o(), c(e(T), {
+                }, e(n)[e(a).ACTION_CLOSE], {
+                  onClick: s[0] || (s[0] = (g) => e(v)(e(h).CloseButton))
+                }), null, 16, ["disabled"])) : l("", !0)
+              ], 16)) : l("", !0),
+              y("div", u({ class: "content" }, e(n)[e(a).CONTENT]), [
+                k(c.$slots, "default", {}, () => [
+                  t.content ? (o(), d(e(b), {
                     key: 0,
                     variant: "body1"
                   }, {
-                    default: u(() => [
+                    default: i(() => [
                       f(B(t.content), 1)
                     ]),
                     _: 1
-                  })) : d("", !0)
+                  })) : l("", !0)
                 ], !0)
               ], 16),
               t.showFooter ? (o(), m("footer", U, [
-                C("div", s({ class: "action-buttons" }, e(a)[e(l).ACTION_BUTTONS_WRAPPER]), [
-                  k(r.$slots, "footer", {}, () => [
-                    b(e(N), s({
+                y("div", u({ class: "action-buttons" }, e(n)[e(a).ACTION_BUTTONS_WRAPPER]), [
+                  k(c.$slots, "footer", {}, () => [
+                    t.showCancelButton ? (o(), d(e(O), u({
+                      key: 0,
                       class: "form-action",
                       variant: "outlined",
                       color: t.cancelButtonColor,
                       disabled: t.saveButtonLoading
-                    }, e(a)[e(l).CANCEL_BUTTON], {
-                      onClick: n[1] || (n[1] = (O) => v("cancel"))
+                    }, e(n)[e(a).CANCEL_BUTTON], {
+                      onClick: s[1] || (s[1] = (g) => C("cancel"))
                     }), {
-                      default: u(() => [
+                      default: i(() => [
                         f(B(t.cancelButtonLabel), 1)
                       ]),
                       _: 1
-                    }, 16, ["color", "disabled"]),
-                    b(e(N), s({
+                    }, 16, ["color", "disabled"])) : l("", !0),
+                    t.showSaveButton ? (o(), d(e(O), u({
+                      key: 1,
                       class: "form-action",
                       loading: t.saveButtonLoading,
                       color: t.saveButtonColor
-                    }, e(a)[e(l).SAVE_BUTTON], {
-                      onClick: n[2] || (n[2] = (O) => v("save"))
+                    }, e(n)[e(a).SAVE_BUTTON], {
+                      onClick: s[2] || (s[2] = (g) => C("save"))
                     }), {
-                      default: u(() => [
+                      default: i(() => [
                         f(B(t.saveButtonLabel), 1)
                       ]),
                       _: 1
-                    }, 16, ["loading", "color"])
+                    }, 16, ["loading", "color"])) : l("", !0)
                   ], !0)
                 ], 16)
-              ])) : d("", !0)
+              ])) : l("", !0)
             ], 16),
-            t.showBackdrop ? (o(), m("div", s({
+            t.showBackdrop ? (o(), m("div", u({
               key: 0,
               class: "dialog-backdrop"
-            }, e(a)[e(l).BACKDROP], { onClick: E }), null, 16)) : d("", !0)
-          ])) : d("", !0)
+            }, e(n)[e(a).BACKDROP], { onClick: N }), null, 16)) : l("", !0)
+          ])) : l("", !0)
         ]),
         _: 3
       })

package/components/dialog/v4/index.d.ts

@@ -17,6 +17,8 @@ declare const DialogTypes: () => ({
             closeOnClickOutside: boolean;
             beforeClose: (show: () => void) => void;
             showCloseButton: boolean;
+            showCancelButton: boolean;
+            showSaveButton: boolean;
             showFooter: boolean;
             saveButtonLabel: string;
             saveButtonLoading: boolean;
@@ -80,6 +82,14 @@ declare const DialogTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            showCancelButton: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            showSaveButton: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             showFooter: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -110,7 +120,7 @@ declare const DialogTypes: () => ({
             onCancel?: () => any;
             onOpen?: () => any;
             onSave?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "testId" | "size" | "content" | "subtitle" | "appendToBody" | "closeDelay" | "openDelay" | "escapeToClose" | "showBackdrop" | "closeOnClickOutside" | "beforeClose" | "showCloseButton" | "showFooter" | "saveButtonLabel" | "saveButtonLoading" | "saveButtonColor" | "cancelButtonLabel" | "cancelButtonColor">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "testId" | "size" | "content" | "subtitle" | "appendToBody" | "closeDelay" | "openDelay" | "escapeToClose" | "showBackdrop" | "closeOnClickOutside" | "beforeClose" | "showCloseButton" | "showCancelButton" | "showSaveButton" | "showFooter" | "saveButtonLabel" | "saveButtonLoading" | "saveButtonColor" | "cancelButtonLabel" | "cancelButtonColor">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -181,6 +191,14 @@ declare const DialogTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            showCancelButton: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            showSaveButton: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             showFooter: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -231,6 +249,8 @@ declare const DialogTypes: () => ({
             closeOnClickOutside: boolean;
             beforeClose: (show: () => void) => void;
             showCloseButton: boolean;
+            showCancelButton: boolean;
+            showSaveButton: boolean;
             showFooter: boolean;
             saveButtonLabel: string;
             saveButtonLoading: boolean;
@@ -314,6 +334,14 @@ declare const DialogTypes: () => ({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        showCancelButton: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        showSaveButton: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         showFooter: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -405,6 +433,14 @@ declare const DialogTypes: () => ({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    showCancelButton: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    showSaveButton: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     showFooter: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -455,6 +491,8 @@ declare const DialogTypes: () => ({
     closeOnClickOutside: boolean;
     beforeClose: (show: () => void) => void;
     showCloseButton: boolean;
+    showCancelButton: boolean;
+    showSaveButton: boolean;
     showFooter: boolean;
     saveButtonLabel: string;
     saveButtonLoading: boolean;