@signal24/vue-foundation 4.3.2 → 4.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.3.2",
+    "version": "4.3.4",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "bin": {

package/src/components/modal.vue

@@ -1,7 +1,7 @@
 <template>
     <Teleport to="#vf-modal-target">
         <div :id="id" class="vf-overlay vf-modal-wrap" :class="props.class" ref="overlay">
-            <form action="." class="vf-modal" :class="{ scrolls }" @submit.prevent="$emit('formSubmit')">
+            <form action="." class="vf-modal" :class="{ scrolls }" @submit.prevent="$emit('formSubmit')" ref="form">
                 <div v-if="$slots.header" class="vf-modal-header">
                     <slot name="header" />
                     <i v-if="props.closeX" class="close" @click="closeParent"></i>
@@ -20,6 +20,7 @@
 <script lang="ts" setup>
 import { getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue';
 
+import { maskForm, unmaskForm } from '../helpers/mask';
 import { removeModalInjectionByInternalInstance } from './modal-container';
 
 const instance = getCurrentInstance();
@@ -33,8 +34,10 @@ const props = defineProps<{
 }>();
 
 defineEmits(['formSubmit']);
+defineExpose({ mask, unmask });
 
 const overlay = ref<HTMLElement>();
+const form = ref<HTMLFormElement>();
 
 onMounted(() => {
     document.body.classList.add('vf-modal-open');
@@ -71,6 +74,14 @@ function handleEscapeKey(e: KeyboardEvent) {
 function closeParent() {
     removeModalInjectionByInternalInstance(instance!);
 }
+
+function mask() {
+    maskForm(form.value!);
+}
+
+function unmask() {
+    unmaskForm(form.value!);
+}
 </script>
 
 <style lang="scss">

package/src/helpers/mask.ts

@@ -61,7 +61,7 @@ export function maskForm(formOrCmp: Element | AnyComponentPublicInstance, button
     form.classList.add('vf-masked');
 
     const buttonEl = (
-        buttonSelector instanceof Element ? buttonSelector : form.querySelectorAll(buttonSelector ?? 'button:not([disabled])')[0]
+        buttonSelector instanceof Element ? buttonSelector : form.querySelectorAll(buttonSelector ?? 'button:not([disabled]):not([type="button"])')[0]
     ) as HTMLElement;
     const originalButtonHtml = buttonEl.tagName === 'INPUT' ? (buttonEl as HTMLInputElement).value : buttonEl.innerHTML;
     buttonEl.setAttribute('disabled', 'disabled');

package/src/helpers/openapi.ts

@@ -65,6 +65,8 @@ export function installApiClientInterceptors({ apiClient, onRequest, onError, Ca
                     if (err.status === 422) {
                         return reject(new UserError(err.body.error));
                     }
+
+                    err.message = `${err.body.error} (${err.status})`;
                 }
                 if (onError) {
                     const handlerResult = onError(err, options);