fix(VsConfirm): change confirm buttons style (#340)

pubg · Feb 21, 2025 · 4fe2274 · 4fe2274
1 parent ba52a92
commit 4fe2274
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 27 deletions.
diff --git a/packages/vlossom/src/components/vs-confirmation/VsConfirm.scss 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
@@ -3,8 +3,12 @@
         <div class="vs-confirm-wrap">
             <slot />
             <div class="vs-confirm-buttons">
-                <vs-button ref="okRef" :style-set="plainStyleSet?.okButton" @click="ok" primary>{{ okText }}</vs-button>
-                <vs-button :style-set="plainStyleSet?.cancelButton" @click="cancel">{{ cancelText }}</vs-button>
+                <vs-button ref="okRef" :style-set="getButtonStyleSet(plainStyleSet?.okButton)" @click="ok" primary>
+                    {{ okText }}
+                </vs-button>
+                <vs-button :style-set="getButtonStyleSet(plainStyleSet?.cancelButton)" @click="cancel">
+                    {{ cancelText }}
+                </vs-button>
             </div>
         </div>
     </div>
@@ -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<VsConfirmStyleSet>(name, styleSet);
 
+        function getButtonStyleSet(buttonStyleSet: VsButtonStyleSet = {}) {
+            return { width: '12rem', ...buttonStyleSet };
+        }
+
         function ok() {
             const id = store.overlay.getLastOverlayId();
             store.overlay.run<boolean>(id, VS_CONFIRM_OK);
@@ -42,30 +51,9 @@ export default defineComponent({
             store.overlay.run<boolean>(id, VS_CONFIRM_CANCEL);
         }
 
-        return { plainStyleSet, ok, cancel };
+        return { plainStyleSet, getButtonStyleSet, ok, cancel };
     },
 });
 </script>
 
-<style lang="scss" scoped>
-.vs-confirm {
-    display: flex;
-    height: 100%;
-
-    .vs-confirm-wrap {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        flex: 1;
-        padding-top: 1.6rem;
-    }
-
-    .vs-confirm-buttons {
-        margin-top: 5rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-}
-</style>
+<style lang="scss" src="./VsConfirm.scss" />
diff --git 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<boolean> => {
         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]: () => {