Skip to content

Commit 9ee6a4a

Browse files
filipKovachevfilipKovachev
committed
add form submit kb
1 parent 6dfbe7e commit 9ee6a4a

File tree

5 files changed

+279
-0
lines changed

5 files changed

+279
-0
lines changed

‎knowledge-base/examples/spinner-inside-submit-button/FormContent.vue‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<template>
2+
<div>
3+
<link
4+
rel="stylesheet"
5+
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
6+
/>
7+
8+
<k-form @submit="handleSubmit">
9+
<form-element :style="{ maxWidth: '650px' }">
10+
<fieldset class="k-form-fieldset">
11+
<legend class="k-form-legend">Please fill in the fields:</legend>
12+
13+
<div class="mb-3">
14+
<field name="firstName" component="myTemplate" label="First name">
15+
<template v-slot:myTemplate="{ props }">
16+
<forminput
17+
v-bind="props"
18+
@change="props.onChange"
19+
@blur="props.onBlur"
20+
@focus="props.onFocus"
21+
/>
22+
</template>
23+
</field>
24+
</div>
25+
26+
<div class="mb-3">
27+
<field name="lastName" component="myTemplate" label="Last name">
28+
<template v-slot:myTemplate="{ props }">
29+
<forminput
30+
v-bind="props"
31+
@change="props.onChange"
32+
@blur="props.onBlur"
33+
@focus="props.onFocus"
34+
/>
35+
</template>
36+
</field>
37+
</div>
38+
39+
<div class="mb-3">
40+
<field
41+
name="email"
42+
type="email"
43+
component="myTemplate"
44+
label="Email"
45+
:validator="emailValidator"
46+
>
47+
<template v-slot:myTemplate="{ props }">
48+
<forminput
49+
v-bind="props"
50+
@change="props.onChange"
51+
@blur="props.onBlur"
52+
@focus="props.onFocus"
53+
/>
54+
</template>
55+
</field>
56+
</div>
57+
</fieldset>
58+
59+
<div class="k-form-buttons">
60+
<!-- 3. Spinner icon + disable logic -->
61+
<kbutton
62+
type="submit"
63+
:disabled="disabled"
64+
:icon-class="disabled ? 'fa fa-spinner fa-spin' : ''"
65+
>
66+
Submit
67+
</kbutton>
68+
<kbutton type="button" @click="clear">Clear</kbutton>
69+
</div>
70+
</form-element>
71+
</k-form>
72+
</div>
73+
</template>
74+
75+
<script>
76+
import { Form, Field, FormElement } from '@progress/kendo-vue-form';
77+
import FormInput from './FormInput.vue';
78+
import { Button } from '@progress/kendo-vue-buttons';
79+
80+
const emailRegex = /\S+@\S+\.\S+/;
81+
const emailValidator = (value) =>
82+
emailRegex.test(value) ? '' : 'Please enter a valid email.';
83+
84+
export default {
85+
name: 'MyForm',
86+
components: {
87+
'k-form': Form,
88+
field: Field,
89+
'form-element': FormElement,
90+
forminput: FormInput,
91+
kbutton: Button,
92+
},
93+
inject: {
94+
kendoForm: { default: {} },
95+
},
96+
data() {
97+
return {
98+
disabled: false,
99+
emailValidator,
100+
};
101+
},
102+
methods: {
103+
handleSubmit(dataItem) {
104+
this.disabled = true;
105+
106+
setTimeout(() => {
107+
this.disabled = false;
108+
}, 2000);
109+
},
110+
clear() {
111+
this.kendoForm.onFormReset();
112+
},
113+
},
114+
};
115+
</script>
116+
117+
<style scoped>
118+
.k-error {
119+
color: red;
120+
font-size: 12px;
121+
}
122+
</style>

‎knowledge-base/examples/spinner-inside-submit-button/FormInput.vue‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<fieldwrapper>
3+
<klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
4+
{{label}}
5+
</klabel>
6+
<div class="k-form-field-wrap">
7+
<kinput :style="{ width: '230px' }"
8+
:valid="valid"
9+
:id="id"
10+
:value="value"
11+
:disabled="disabled"
12+
:placeholder="placeholder"
13+
@input="handleChange"
14+
@blur="handleBlur"
15+
@focus="handleFocus"
16+
/>
17+
<error v-if="showValidationMessage">
18+
{{validationMessage}}
19+
</error>
20+
<hint v-else>{{hint}}</hint>
21+
</div>
22+
</fieldwrapper>
23+
</template>
24+
<script>
25+
import { FieldWrapper } from "@progress/kendo-vue-form";
26+
import { Error, Hint, Label } from "@progress/kendo-vue-labels";
27+
import { Input } from "@progress/kendo-vue-inputs";
28+
export default {
29+
props: {
30+
optional: Boolean,
31+
disabled: Boolean,
32+
placeholder: String,
33+
touched: Boolean,
34+
label: String,
35+
validationMessage: String,
36+
hint: String,
37+
id: String,
38+
valid: Boolean,
39+
value: {
40+
type: String,
41+
default: ''
42+
}
43+
},
44+
components: {
45+
fieldwrapper: FieldWrapper,
46+
error: Error,
47+
hint: Hint,
48+
klabel: Label,
49+
kinput: Input
50+
},
51+
computed: {
52+
showValidationMessage() {
53+
return this.$props.touched && this.$props.validationMessage;
54+
},
55+
showHint() {
56+
return !this.showValidationMessage && this.$props.hint;
57+
},
58+
hintId() {
59+
return this.showHint ? `${this.$props.id}_hint` : "";
60+
},
61+
errorId() {
62+
return this.showValidationMessage ? `${this.$props.id}_error` : "";
63+
}
64+
},
65+
emits: {
66+
input: null,
67+
change: null,
68+
blur: null,
69+
focus: null
70+
},
71+
methods: {
72+
handleChange(e){
73+
this.$emit('change', e);
74+
},
75+
handleBlur(e){
76+
this.$emit('blur', e);
77+
},
78+
handleFocus(e){
79+
this.$emit('focus', e);
80+
}
81+
}
82+
}
83+
</script>
84+

‎knowledge-base/examples/spinner-inside-submit-button/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './main.vue'
3+
4+
createApp(App).mount('#app')

‎knowledge-base/examples/spinner-inside-submit-button/main.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<k-form
3+
@submit="handleSubmit">
4+
<formcontent />
5+
</k-form>
6+
</template>
7+
8+
<script>
9+
import { Form } from "@progress/kendo-vue-form";
10+
import FormContent from './FormContent.vue';
11+
12+
export default {
13+
components: {
14+
'k-form': Form,
15+
'formcontent': FormContent
16+
},
17+
methods: {
18+
handleSubmit (dataItem) {
19+
alert(JSON.stringify(dataItem, null, 2));
20+
}
21+
}
22+
};
23+
24+
</script>

‎knowledge-base/spinner-inside-submit-button.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: Add a Spinner Inside The Form Submit Button
3+
description: An example on how to visualise a spinner inside the form submit button after the Form is submitted
4+
type: how-to
5+
page_title: Add a Spinner Inside The Form Submit Button on Submit - Kendo UI Vue Native Form
6+
slug: spinner-inside-submit-button
7+
position:
8+
tags: form, button, submit
9+
res_type: kb
10+
category: knowledge-base
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td>Product Version</td>
19+
<td>6.3.0</td>
20+
</tr>
21+
<tr>
22+
<td>Product</td>
23+
<td>Progress® Kendo UI for Vue Native</td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
28+
## Description
29+
30+
I want to visualise a spinner icon once the Form has been submitted.
31+
32+
## Solution
33+
34+
This can be achieved by using the iconClass props and conditionally changing the className to that of a spinner or loader based on the disabled variable.
35+
36+
### Runnable example
37+
38+
{% meta id:index height:500 %}
39+
{% embed_file spinner-inside-submit-button/main.vue preview %}
40+
{% embed_file spinner-inside-submit-button/FormContent.vue %}
41+
{% embed_file spinner-inside-submit-button/FormInput.vue %}
42+
{% embed_file spinner-inside-submit-button/main.js %}
43+
{% endmeta %}
44+
45+

0 commit comments

Comments
 (0)