Skip to content

Commit 8e93771

Browse files
xidedixxidedix
committed
refactor(Forms): add missing features
1 parent 26796fb commit 8e93771

File tree

1 file changed

+136
-122
lines changed

1 file changed

+136
-122
lines changed

‎src/views/base/Forms.vue

Lines changed: 136 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,14 @@
9494
<div slot="header">
9595
<strong>Basic Form</strong> Elements
9696
</div>
97+
<b-form>
9798
<b-form-group
9899
description="Let us know your full name."
99100
label="Enter your name"
100101
label-for="basicName"
101102
:label-cols="3"
102103
:horizontal="true">
103-
<b-form-input id="basicName" type="text"></b-form-input>
104+
<b-form-input id="basicName" type="text" autocomplete="name"></b-form-input>
104105
</b-form-group>
105106
<b-form-group
106107
label="Static"
@@ -129,15 +130,15 @@
129130
label-for="basicEmail"
130131
:label-cols="3"
131132
:horizontal="true">
132-
<b-form-input id="basicEmail" type="email" placeholder="Enter your email"></b-form-input>
133+
<b-form-input id="basicEmail" type="email" placeholder="Enter your email" autocomplete="email"></b-form-input>
133134
</b-form-group>
134135
<b-form-group
135136
description="Please enter a complex password"
136137
label="Password Input"
137138
label-for="basicPassword"
138139
:label-cols="3"
139140
:horizontal="true">
140-
<b-form-input id="basicPassword" type="password" placeholder="Enter your password"></b-form-input>
141+
<b-form-input id="basicPassword" type="password" placeholder="Enter your password" autocomplete="current-password"></b-form-input>
141142
</b-form-group>
142143
<b-form-group
143144
label="Disabled Input"
@@ -388,6 +389,7 @@
388389
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
389390
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
390391
</div>
392+
</b-form>
391393
</b-card>
392394
<b-card>
393395
<div slot="header">
@@ -398,7 +400,7 @@
398400
<label class="mr-sm-2" for="inlineInput1">Name: </label>
399401
<b-input id="inlineInput1" type="text" placeholder="Jane Doe"></b-input>
400402
<label class="mx-sm-2" for="inlineInput2">Email: </label>
401-
<b-input id="inlineInput2" type="email" placeholder="[email protected]"></b-input>
403+
<b-input id="inlineInput2" type="email" placeholder="[email protected]" autocomplete="email"></b-input>
402404
</b-form>
403405
<div slot="footer">
404406
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
@@ -411,47 +413,51 @@
411413
<div slot="header">
412414
<strong>Horizontal</strong> Form
413415
</div>
414-
<b-form-group
415-
label="Email"
416-
label-for="horizEmail"
417-
description="Please enter your email."
418-
:label-cols="3"
419-
:horizontal="true">
420-
<b-form-input id="horizEmail" type="email" placeholder="Enter Email.."></b-form-input>
421-
</b-form-group>
422-
<b-form-group
423-
label="Password"
424-
label-for="horizPass"
425-
description="Please enter your password."
426-
:label-cols="3"
427-
:horizontal="true">
428-
<b-form-input id="horizPass" type="password" placeholder="Enter Password.."></b-form-input>
429-
</b-form-group>
430-
<div slot="footer">
431-
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
432-
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
433-
</div>
416+
<b-form>
417+
<b-form-group
418+
label="Email"
419+
label-for="horizEmail"
420+
description="Please enter your email."
421+
:label-cols="3"
422+
:horizontal="true">
423+
<b-form-input id="horizEmail" type="email" placeholder="Enter Email.." autocomplete="username email"></b-form-input>
424+
</b-form-group>
425+
<b-form-group
426+
label="Password"
427+
label-for="horizPass"
428+
description="Please enter your password."
429+
:label-cols="3"
430+
:horizontal="true">
431+
<b-form-input id="horizPass" type="password" placeholder="Enter Password.." autocomplete="current-password"></b-form-input>
432+
</b-form-group>
433+
<div slot="footer">
434+
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
435+
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
436+
</div>
437+
</b-form>
434438
</b-card>
435439
<b-card>
436440
<div slot="header">
437441
<strong>Normal</strong> Form
438442
</div>
439-
<b-form-group validated
440-
label="Email"
441-
label-for="normalEmail"
442-
description="Please enter your email.">
443-
<b-form-input id="normalEmail" type="email" placeholder="Enter Email.." required></b-form-input>
444-
</b-form-group>
445-
<b-form-group validated
446-
label="Password"
447-
label-for="normalPass"
448-
description="Please enter your password.">
449-
<b-form-input id="normalPass" type="password" placeholder="Enter Password.." required></b-form-input>
450-
</b-form-group>
451-
<div slot="footer">
452-
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
453-
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
454-
</div>
443+
<b-form>
444+
<b-form-group validated
445+
label="Email"
446+
label-for="normalEmail"
447+
description="Please enter your email.">
448+
<b-form-input id="normalEmail" type="email" placeholder="Enter Email.." required autocomplete="email"></b-form-input>
449+
</b-form-group>
450+
<b-form-group validated
451+
label="Password"
452+
label-for="normalPass"
453+
description="Please enter your password.">
454+
<b-form-input id="normalPass" type="password" placeholder="Enter Password.." required autocomplete="current-password"></b-form-input>
455+
</b-form-group>
456+
<div slot="footer">
457+
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
458+
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
459+
</div>
460+
</b-form>
455461
</b-card>
456462
<b-card no-body :no-block="true">
457463
<div slot="header">
@@ -617,7 +623,7 @@
617623
</b-form-group>
618624
<b-form-group>
619625
<b-input-group>
620-
<b-form-input type="email" placeholder="Email"></b-form-input>
626+
<b-form-input type="email" placeholder="Email" autocomplete="email"></b-form-input>
621627
<b-input-group-append><b-input-group-text><i class="fa fa-envelope-o"></i></b-input-group-text></b-input-group-append>
622628
</b-input-group>
623629
</b-form-group>
@@ -654,7 +660,7 @@
654660
</b-form-group>
655661
<b-form-group>
656662
<b-input-group>
657-
<b-form-input type="email" placeholder="Email"></b-form-input>
663+
<b-form-input type="email" placeholder="Email" autocomplete="email"></b-form-input>
658664
<!-- Attach Right button -->
659665
<b-input-group-append>
660666
<b-button variant="primary">Submit</b-button>
@@ -667,7 +673,7 @@
667673
<b-input-group-prepend>
668674
<b-button variant="primary"><i class="fa fa-facebook"></i></b-button>
669675
</b-input-group-prepend>
670-
<b-form-input type="email" placeholder="Email"></b-form-input>
676+
<b-form-input type="email" placeholder="Email" autocomplete="email"></b-form-input>
671677
<!-- Attach Left button -->
672678
<b-input-group-append>
673679
<b-button variant="primary"><i class="fa fa-twitter"></i></b-button>
@@ -859,92 +865,98 @@
859865
<div slot="header">
860866
Example Form
861867
</div>
862-
<b-form-group>
863-
<b-input-group>
864-
<b-input-group-prepend><b-input-group-text>Username</b-input-group-text></b-input-group-prepend>
865-
<b-form-input type="text"></b-form-input>
866-
<b-input-group-append><b-input-group-text><i class="fa fa-user"></i></b-input-group-text></b-input-group-append>
867-
</b-input-group>
868-
</b-form-group>
869-
<b-form-group>
870-
<b-input-group>
871-
<b-input-group-prepend><b-input-group-text>Email</b-input-group-text></b-input-group-prepend>
872-
<b-form-input type="email"></b-form-input>
873-
<b-input-group-append><b-input-group-text><i class="fa fa-envelope"></i></b-input-group-text></b-input-group-append>
874-
</b-input-group>
875-
</b-form-group>
876-
<b-form-group>
877-
<b-input-group>
878-
<b-input-group-prepend><b-input-group-text>Password</b-input-group-text></b-input-group-prepend>
879-
<b-form-input type="password"></b-form-input>
880-
<b-input-group-append><b-input-group-text><i class="fa fa-asterisk"></i></b-input-group-text></b-input-group-append>
881-
</b-input-group>
882-
</b-form-group>
883-
<div class="form-group form-actions">
884-
<b-button type="submit" size="sm" variant="primary">Submit</b-button>
885-
</div>
868+
<b-form>
869+
<b-form-group>
870+
<b-input-group>
871+
<b-input-group-prepend><b-input-group-text>Username</b-input-group-text></b-input-group-prepend>
872+
<b-form-input type="text"></b-form-input>
873+
<b-input-group-append><b-input-group-text><i class="fa fa-user"></i></b-input-group-text></b-input-group-append>
874+
</b-input-group>
875+
</b-form-group>
876+
<b-form-group>
877+
<b-input-group>
878+
<b-input-group-prepend><b-input-group-text>Email</b-input-group-text></b-input-group-prepend>
879+
<b-form-input type="email" autocomplete="email"></b-form-input>
880+
<b-input-group-append><b-input-group-text><i class="fa fa-envelope"></i></b-input-group-text></b-input-group-append>
881+
</b-input-group>
882+
</b-form-group>
883+
<b-form-group>
884+
<b-input-group>
885+
<b-input-group-prepend><b-input-group-text>Password</b-input-group-text></b-input-group-prepend>
886+
<b-form-input type="password" autocomplete="current-password"></b-form-input>
887+
<b-input-group-append><b-input-group-text><i class="fa fa-asterisk"></i></b-input-group-text></b-input-group-append>
888+
</b-input-group>
889+
</b-form-group>
890+
<div class="form-group form-actions">
891+
<b-button type="submit" size="sm" variant="primary">Submit</b-button>
892+
</div>
893+
</b-form>
886894
</b-card>
887895
</b-col>
888896
<b-col sm="4">
889897
<b-card>
890898
<div slot="header">
891899
Example Form
892900
</div>
893-
<b-form-group>
894-
<b-input-group>
895-
<b-form-input type="text" placeholder="Username"></b-form-input>
896-
<b-input-group-append><b-input-group-text><i class="fa fa-user"></i></b-input-group-text></b-input-group-append>
897-
</b-input-group>
898-
</b-form-group>
899-
<b-form-group>
900-
<b-input-group>
901-
<b-form-input type="email" placeholder="Email"></b-form-input>
902-
<b-input-group-append><b-input-group-text><i class="fa fa-envelope"></i></b-input-group-text></b-input-group-append>
903-
</b-input-group>
904-
</b-form-group>
905-
<b-form-group>
906-
<b-input-group>
907-
<b-form-input type="password" placeholder="Password"></b-form-input>
908-
<b-input-group-append><b-input-group-text><i class="fa fa-asterisk"></i></b-input-group-text></b-input-group-append>
909-
</b-input-group>
910-
</b-form-group>
911-
<div class="form-group form-actions">
912-
<b-button type="submit" class="btn btn-sm btn-secondary">Submit</b-button>
913-
</div>
901+
<b-form>
902+
<b-form-group>
903+
<b-input-group>
904+
<b-form-input type="text" placeholder="Username"></b-form-input>
905+
<b-input-group-append><b-input-group-text><i class="fa fa-user"></i></b-input-group-text></b-input-group-append>
906+
</b-input-group>
907+
</b-form-group>
908+
<b-form-group>
909+
<b-input-group>
910+
<b-form-input type="email" placeholder="Email" autocomplete="email"></b-form-input>
911+
<b-input-group-append><b-input-group-text><i class="fa fa-envelope"></i></b-input-group-text></b-input-group-append>
912+
</b-input-group>
913+
</b-form-group>
914+
<b-form-group>
915+
<b-input-group>
916+
<b-form-input type="password" placeholder="Password" autocomplete="current-password"></b-form-input>
917+
<b-input-group-append><b-input-group-text><i class="fa fa-asterisk"></i></b-input-group-text></b-input-group-append>
918+
</b-input-group>
919+
</b-form-group>
920+
<div class="form-group form-actions">
921+
<b-button type="submit" class="btn btn-sm btn-secondary">Submit</b-button>
922+
</div>
923+
</b-form>
914924
</b-card>
915925
</b-col>
916926
<b-col sm="4">
917927
<b-card>
918928
<div slot="header">
919929
Example Form
920930
</div>
921-
<b-form-group>
922-
<b-input-group>
923-
<b-input-group-prepend>
924-
<b-input-group-text><i class="fa fa-user"></i></b-input-group-text>
925-
</b-input-group-prepend>
926-
<b-form-input type="text" placeholder="Username"></b-form-input>
927-
</b-input-group>
928-
</b-form-group>
929-
<b-form-group>
930-
<b-input-group>
931-
<b-input-group-prepend>
932-
<b-input-group-text><i class="fa fa-envelope"></i></b-input-group-text>
933-
</b-input-group-prepend>
934-
<b-form-input type="email" placeholder="Email"></b-form-input>
935-
</b-input-group>
936-
</b-form-group>
937-
<b-form-group>
938-
<b-input-group>
939-
<b-input-group-prepend>
940-
<b-input-group-text><i class="fa fa-asterisk"></i></b-input-group-text>
941-
</b-input-group-prepend>
942-
<b-form-input type="password" placeholder="Password"></b-form-input>
943-
</b-input-group>
944-
</b-form-group>
945-
<div class="form-group form-actions">
946-
<b-button type="submit" size="sm" variant="success">Submit</b-button>
947-
</div>
931+
<b-form>
932+
<b-form-group>
933+
<b-input-group>
934+
<b-input-group-prepend>
935+
<b-input-group-text><i class="fa fa-user"></i></b-input-group-text>
936+
</b-input-group-prepend>
937+
<b-form-input type="text" placeholder="Username"></b-form-input>
938+
</b-input-group>
939+
</b-form-group>
940+
<b-form-group>
941+
<b-input-group>
942+
<b-input-group-prepend>
943+
<b-input-group-text><i class="fa fa-envelope"></i></b-input-group-text>
944+
</b-input-group-prepend>
945+
<b-form-input type="email" placeholder="Email" autocomplete="email"></b-form-input>
946+
</b-input-group>
947+
</b-form-group>
948+
<b-form-group>
949+
<b-input-group>
950+
<b-input-group-prepend>
951+
<b-input-group-text><i class="fa fa-asterisk"></i></b-input-group-text>
952+
</b-input-group-prepend>
953+
<b-form-input type="password" placeholder="Password" autocomplete="current-password"></b-form-input>
954+
</b-input-group>
955+
</b-form-group>
956+
<div class="form-group form-actions">
957+
<b-button type="submit" size="sm" variant="success">Submit</b-button>
958+
</div>
959+
</b-form>
948960
</b-card>
949961
</b-col>
950962
</b-row>
@@ -973,7 +985,7 @@
973985
<b-input-group-prepend>
974986
<b-input-group-text>@</b-input-group-text>
975987
</b-input-group-prepend>
976-
<b-form-input id="elementsEmail" type="email"></b-form-input>
988+
<b-form-input id="elementsEmail" type="email" autocomplete="email"></b-form-input>
977989
</b-input-group>
978990
</b-form-group>
979991
<b-form-group label="Appended text" label-for="elementsAppend" description="Here's some help text">
@@ -1039,10 +1051,12 @@ export default {
10391051
</script>
10401052

10411053
<style scoped>
1042-
.fade-enter-active, .fade-leave-active {
1043-
transition: opacity .5s;
1044-
}
1045-
.fade-enter, .fade-leave-to {
1046-
opacity: 0;
1047-
}
1054+
.fade-enter-active,
1055+
.fade-leave-active {
1056+
transition: opacity 0.5s;
1057+
}
1058+
.fade-enter,
1059+
.fade-leave-to {
1060+
opacity: 0;
1061+
}
10481062
</style>

0 commit comments

Comments
 (0)