0.8.3 • Published 2 years ago
@juno0424/hapi v0.8.3
HAPI Form Plugin
Wrapper of Alpine JS plugin for HAPI Form, works on Laravel API endpoint.
CDN
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/@juno0424/hapi@latest/dist/hapi.min.js"></script>
Usage
<script>
Hapi.form({
name: "",
endpoint: "",
redirectTo: "",
fileUpload: {
filepond: filepondObject,
el: '#files'
},
onSuccess(res) {},
onFailed(err) {}
});
</script>
- name – The name of the instance, to be matched with
x-data="name"
. - endpoint – The form endpoint URL generated from the backend.
- redirectTo – Location to be redirected after success. Eg: "/thank-you" or "https://example.com". (Optional)
- fileUpload
- filepond – Filepond object. (Filepond plugin required)
- el – Select
input
element if you're using normal upload.
- onSuccess() – On success event.
- onFailed() – On failed event.
Array data
Hapi.form({
fields: {
colors; [] // Example an empty array of colors
},
name: "",
endpoint: "",
});
Alpine.js data
Sometimes you might need to set data for Alpine.js, I got your back.
Hapi.form({
...
open: false,
});
Events
Success Event
When submission is success, Hapi will emit hapi:success
event.
Error Event
When submission has error, Hapi will emit hapi:error
event.
0.8.1
2 years ago
0.8.0
2 years ago
0.8.3
2 years ago
0.8.2
2 years ago
0.7.0
2 years ago
0.6.6
2 years ago
0.6.5
2 years ago
0.6.3
2 years ago
0.6.2
2 years ago
0.6.4
2 years ago
0.6.1
3 years ago
0.6.0
3 years ago
0.5.1
3 years ago
0.5.0
3 years ago
0.4.7
3 years ago
0.4.5
3 years ago
0.4.4
3 years ago
0.4.6
3 years ago
0.4.1
3 years ago
0.4.0
3 years ago
0.4.3
3 years ago
0.4.2
3 years ago
0.3.0
3 years ago
0.2.0
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago
0.0.3
3 years ago
0.0.1
3 years ago
0.0.2
3 years ago