Merge pull request #484 from aziontech/fix/button-state

fix: delete and create loading state

Author: robsongajunior

apps/storybook/src/stories/components/buttons/ButtonCreate.stories.js

@@ -32,6 +32,10 @@ export default {
       control: 'boolean',
       description: 'Whether the button is outlined'
     },
+    loading: {
+      control: 'boolean',
+      description: 'Whether the button shows loading state'
+    },
     disabled: {
       control: 'boolean',
       description: 'Whether the button is disabled'
@@ -86,6 +90,14 @@ export const Disabled = {
   }
 };
 
+export const Loading = {
+  args: {
+    label: 'Creating...',
+    loading: true,
+    size: 'large'
+  }
+};
+
 export const Secondary = {
   args: {
     label: 'Create New',

apps/storybook/src/stories/components/buttons/ButtonDelete.stories.js

@@ -32,6 +32,10 @@ export default {
       control: 'boolean',
       description: 'Whether the button is outlined'
     },
+    loading: {
+      control: 'boolean',
+      description: 'Whether the button shows loading state'
+    },
     disabled: {
       control: 'boolean',
       description: 'Whether the button is disabled'
@@ -70,6 +74,14 @@ export const Disabled = {
   }
 };
 
+export const Loading = {
+  args: {
+    label: 'Deleting...',
+    loading: true,
+    size: ''
+  }
+};
+
 export const WithCustomIcon = {
   args: {
     label: 'Delete',

packages/webkit/src/components/buttons/button-create/button-create.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue'
 import Button from 'primevue/button'
 
 const props = defineProps({
@@ -9,12 +10,16 @@ const props = defineProps({
   severity: { type: String, default: 'primary' },
   size: { type: String, default: '' },
   outlined: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false }
 })
 
 const emit = defineEmits(['click'])
 
+const computedDisabled = computed(() => props.disabled || props.loading)
+
 const handleClick = () => {
+  if (computedDisabled.value) return
   emit('click')
 }
 </script>
@@ -27,7 +32,8 @@ const handleClick = () => {
     :severity="severity"
     :size="size"
     :outlined="outlined"
-    :disabled="disabled"
+    :disabled="computedDisabled"
+    :loading="loading"
     :aria-label="label"
     :data-testid="data-testid"
     @click="handleClick"

packages/webkit/src/components/buttons/button-delete/button-delete.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue'
 import Button from 'primevue/button'
 
 const props = defineProps({
@@ -9,12 +10,16 @@ const props = defineProps({
   severity: { type: String, default: 'danger' },
   size: { type: String, default: '' },
   outlined: { type: Boolean, default: true },
+  loading: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false }
 })
 
 const emit = defineEmits(['click'])
 
+const computedDisabled = computed(() => props.disabled || props.loading)
+
 const handleClick = () => {
+  if (computedDisabled.value) return
   emit('click')
 }
 </script>
@@ -27,7 +32,8 @@ const handleClick = () => {
     :severity="severity"
     :size="size"
     :outlined="outlined"
-    :disabled="disabled"
+    :disabled="computedDisabled"
+    :loading="loading"
     :aria-label="label"
     :data-testid="data-testid"
     @click="handleClick"