diff --git a/packages/vlossom/src/components/vs-confirmation/VsConfirm.scss b/packages/vlossom/src/components/vs-confirmation/VsConfirm.scss
new file mode 100644
index 00000000..78b796ad
--- /dev/null
+++ b/packages/vlossom/src/components/vs-confirmation/VsConfirm.scss
@@ -0,0 +1,20 @@
+.vs-confirm {
+ display: flex;
+ height: 100%;
+
+ .vs-confirm-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ padding-top: 2.4rem;
+ }
+
+ .vs-confirm-buttons {
+ margin-top: 3.6rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
diff --git a/packages/vlossom/src/components/vs-confirmation/VsConfirm.vue b/packages/vlossom/src/components/vs-confirmation/VsConfirm.vue
index c1b32ce4..1cebf2a7 100644
--- a/packages/vlossom/src/components/vs-confirmation/VsConfirm.vue
+++ b/packages/vlossom/src/components/vs-confirmation/VsConfirm.vue
@@ -3,8 +3,12 @@
- {{ okText }}
- {{ cancelText }}
+
+ {{ okText }}
+
+
+ {{ cancelText }}
+
@@ -18,6 +22,7 @@ import { useStyleSet } from '@/composables';
import VsButton from '@/components/vs-button/VsButton.vue';
import type { VsConfirmStyleSet } from './types';
+import type { VsButtonStyleSet } from '@/components/vs-button/types';
const name = VsComponent.VsConfirm;
export default defineComponent({
@@ -32,6 +37,10 @@ export default defineComponent({
const { styleSet } = toRefs(props);
const { plainStyleSet } = useStyleSet(name, styleSet);
+ function getButtonStyleSet(buttonStyleSet: VsButtonStyleSet = {}) {
+ return { width: '12rem', ...buttonStyleSet };
+ }
+
function ok() {
const id = store.overlay.getLastOverlayId();
store.overlay.run(id, VS_CONFIRM_OK);
@@ -42,30 +51,9 @@ export default defineComponent({
store.overlay.run(id, VS_CONFIRM_CANCEL);
}
- return { plainStyleSet, ok, cancel };
+ return { plainStyleSet, getButtonStyleSet, ok, cancel };
},
});
-
+
diff --git a/packages/vlossom/src/plugins/confirm-plugin/confirm-plugin.ts b/packages/vlossom/src/plugins/confirm-plugin/confirm-plugin.ts
index f9139c35..2648c225 100644
--- a/packages/vlossom/src/plugins/confirm-plugin/confirm-plugin.ts
+++ b/packages/vlossom/src/plugins/confirm-plugin/confirm-plugin.ts
@@ -8,7 +8,7 @@ import { useContentRenderer } from '@/composables';
export const confirmPlugin: ConfirmPlugin = {
open: (content: string | Component, confirmOptions: ConfirmOptions = {}): Promise => {
return new Promise((resolve) => {
- const { okText, cancelText, size = 'xs', callbacks = {}, styleSet, props } = confirmOptions;
+ const { okText, cancelText, callbacks = {}, styleSet, props } = confirmOptions;
const { getRenderedContent } = useContentRenderer();
const modalId = modalPlugin.open({
...confirmOptions,
@@ -21,7 +21,6 @@ export const confirmPlugin: ConfirmPlugin = {
},
},
),
- size,
callbacks: {
...callbacks,
[VS_CONFIRM_OK]: () => {