From 8aedc31d724f53108a27ba109e2c0c04ae235052 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malte=20M=C3=BCller?= <malte@waf.gmbh>
Date: Tue, 4 Jun 2024 13:11:59 +0200
Subject: [PATCH] Compatibility with Kirby 4+

---
 src/ButtonField.vue | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/ButtonField.vue b/src/ButtonField.vue
index f9389f3..c90b3e6 100644
--- a/src/ButtonField.vue
+++ b/src/ButtonField.vue
@@ -3,18 +3,18 @@
 
         <div class="k-button-field-button-wrapper">
 
-            <button v-if="!isLoading" type="button" class="k-button-field-button k-button k-box" :data-theme="theme" @click="onClick">
-                <k-icon :type="icon" class="k-button-icon" />
+            <button v-if="!isLoading" type="button" data-size="sm" data-has-icon="true" data-has-text="true" class="k-button-field-button k-button k-box" :data-theme="theme ? theme : 'neutral'" data-variant="filled" @click="onClick">
+                <span class="k-button-icon"><k-icon :type="icon"/></span>
                 <span class="k-button-text">{{ text }}</span>
             </button>
             
-            <div v-if="isLoading && !hasError" type="button" class="k-button-field-button k-button k-button-disabled k-box" data-disabled="true">
-                <k-icon type="dots" class="k-button-icon" />
+            <div v-if="isLoading && !hasError" type="button" data-size="sm" data-has-icon="true" data-has-text="true" class="k-button k-button-disabled k-box" data-variant="filled" data-disabled="true">
+                <span class="k-button-icon"><k-icon :type="dots"/></span>
                 <span class="k-button-text">Please wait</span>
             </div>
             
-            <div v-if="hasError" type="button" class="k-button-field-button k-button k-button-disabled k-box" data-disabled="true" data-theme="negative">
-                <k-icon type="alert" class="k-button-icon" />
+            <div v-if="hasError" type="button" data-size="sm" data-has-icon="true" data-has-text="true" class="k-button k-button-disabled k-box" data-disabled="true" data-variant="filled" data-theme="negative">
+                <span class="k-button-icon"><k-icon :type="alert"/></span>
                 <span class="k-button-text">Error</span>
             </div>
 
@@ -43,14 +43,8 @@
         methods: {
             async onClick(){
                 if( this.open === true ){
-                    /*
-                    open url in new tab
-                    */
                     openUrlInNewTab( this );
                 } else {
-                    /*
-                    trigger webhook
-                    */
                     triggerWebhook( this );
                 }
             }
@@ -65,9 +59,9 @@
     }
 
     .k-button-field-button {
-        display: block;
+        display: flex;
+        justify-content: flex-start;
         width: 100%;
-        text-align: left;
     }
 
 </style>
\ No newline at end of file