feat(NcDialogButton): Allow to return false from callback to keep d…

…ialog open

If the callback returns `false` then the click event will not be forwarded.
This could be usful if the click triggers a validation that fails and the user
should be able to fix the issue.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

src/components/NcDialogButton/NcDialogButton.vue

@@ -17,7 +17,8 @@ Dialog button component used by NcDialog in the actions slot to display the butt
  <template #icon>
  <!-- @slot Allow to set a custom icon for the button -->
  <slot name="icon">
- <NcIconSvgWrapper v-if="icon !== undefined" :svg="icon" />
+ <NcLoadingIcon v-if="isLoading" />
+ <NcIconSvgWrapper v-else-if="icon !== undefined" :svg="icon" />
  </slot>
  </template>
  </NcButton>
@@ -27,19 +28,23 @@ Dialog button component used by NcDialog in the actions slot to display the butt
 import { defineComponent } from 'vue'
 import NcButton from '../NcButton/index.js'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
+import NcLoadingIcon from '../NcLoadingIcon/index.js'
+import { ref } from 'vue';
 
 export default defineComponent({
  name: 'NcDialogButton',
 
  components: {
  NcButton,
  NcIconSvgWrapper,
+ NcLoadingIcon,
  },
 
  props: {
  /**
- * The function that will be called when the button is pressed
- * @type {() => void}
+ * The function that will be called when the button is pressed.
+ * If the function returns `false` the click is ignored and the dialog will not be closed.
+ * @type {() => void|false|Promise<void|false>}
  */
  callback: {
  type: Function,
@@ -99,16 +104,25 @@ export default defineComponent({
  emits: ['click'],
 
  setup(props, { emit }) {
+ const isLoading = ref(false)
+
  /**
  * Handle clicking the button
  * @param {MouseEvent} e The click event
  */
- const handleClick = (e) => {
- props.callback?.()
- emit('click', e)
+ const handleClick = async (e) => {
+ isLoading.value = true
+ try {
+ const response = await props.callback?.()
+ if (response !== false) {
+ emit('click', e)
+ }
+ } finally {
+ isLoading.value = false
+ }
  }
 
- return { handleClick }
+ return { handleClick, isLoading }
  },
 })
 </script>