Skip to content

Commit 11aebe2

Browse files
xidedixxidedix
committed
feat(Forms): add transition to card-header-action btn-close 
1 parent 81839ee commit 11aebe2

File tree

2 files changed

+96
-79
lines changed

2 files changed

+96
-79
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
## [vue](./README.md) version `changelog`
22

33
##### `v2.0.0-alpha.0`
4-
- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
4+
- refactor: separation of concerns - (CoreUI template/components) for use CoreUI as npm module
55
- refactor: project structure change
66
- refactor: moved to [vuejs-templates](http://vuejs-templates.github.io/webpack/)
77
- chore: moved to [Semantic Versioning](https://semver.org/)
88
- refactor: move to [CoreUI-Vue](https://github.com/coreui/coreui-vue) components `v2`
99
- refactor: rename containers
1010
- refactor(Colors): view layout, sub-components
1111
- refactor(Switches): move to `Switch component v2`
12+
- refactor(Cards): add transition to card-header-action `btn-close`
13+
- refactor(Cards): add collapse to card-header-action `btn-minimize`
14+
- refactor(Forms): add transition to card-header-action `btn-close`
1215

1316
other:
1417

‎src/views/base/Forms.vue‎

Lines changed: 92 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -555,20 +555,22 @@
555555
<strong>Validation feedback</strong> Form
556556
</div>
557557
<b-card-body>
558-
<b-form-group>
559-
<label class="col-form-label" for="inputIsValid">Input is valid</label>
560-
<input type="text" class="form-control is-valid" id="inputIsValid">
561-
<b-form-valid-feedback>
562-
Input is valid.
563-
</b-form-valid-feedback>
564-
</b-form-group>
565-
<b-form-group>
566-
<label class="col-form-label" for="inputIsInvalid">Input is invalid</label>
567-
<input type="text" class="form-control is-invalid" id="inputIsInvalid">
568-
<b-form-invalid-feedback>
569-
Please provide a valid information.
570-
</b-form-invalid-feedback>
571-
</b-form-group>
558+
<b-form>
559+
<b-form-group validated>
560+
<label class="col-form-label" for="inputIsValid">Input is valid</label>
561+
<input type="text" class="form-control is-valid" id="inputIsValid">
562+
<b-form-valid-feedback>
563+
Input is valid.
564+
</b-form-valid-feedback>
565+
</b-form-group>
566+
<b-form-group>
567+
<label class="col-form-label" for="inputIsInvalid">Input is invalid</label>
568+
<input type="text" class="form-control is-invalid" id="inputIsInvalid">
569+
<b-form-invalid-feedback>
570+
Please provide a valid information.
571+
</b-form-invalid-feedback>
572+
</b-form-group>
573+
</b-form>
572574
</b-card-body>
573575
</b-card>
574576
</b-col>
@@ -948,70 +950,72 @@
948950
</b-row>
949951
<b-row>
950952
<b-col lg="12">
951-
<b-card no-body>
952-
<div slot="header">
953-
<i class="fa fa-edit"></i> Form Elements
954-
<div class="card-header-actions">
955-
<b-link href="#" class="card-header-action btn-setting">
956-
<i class="icon-settings"></i>
957-
</b-link>
958-
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
959-
<i class="icon-arrow-up"></i>
960-
</b-link>
961-
<b-link href="#" class="card-header-action btn-close">
962-
<i class="icon-close"></i>
963-
</b-link>
964-
</div>
965-
</div>
966-
<b-collapse id="collapse1" visible>
967-
<b-card-body>
968-
<b-form-group label="Prepended text" label-for="elementsEmail" description="Here's some help text">
969-
<b-input-group>
970-
<b-input-group-prepend>
971-
<b-input-group-text>@</b-input-group-text>
972-
</b-input-group-prepend>
973-
<b-form-input id="elementsEmail" type="email"></b-form-input>
974-
</b-input-group>
975-
</b-form-group>
976-
<b-form-group label="Appended text" label-for="elementsAppend" description="Here's some help text">
977-
<b-input-group>
978-
<b-form-input id="elementsAppend" type="text"></b-form-input>
979-
<b-input-group-append><b-input-group-text>.00</b-input-group-text></b-input-group-append>
980-
</b-input-group>
981-
</b-form-group>
982-
<b-form-group label="Append and prepend" label-for="elementsPrependAppend" description="Here's some help text">
983-
<b-input-group>
984-
<b-input-group-prepend>
985-
<b-input-group-text>$</b-input-group-text>
986-
</b-input-group-prepend>
987-
<b-form-input id="elementsPrependAppend" type="text"></b-form-input>
988-
<b-input-group-append><b-input-group-text>.00</b-input-group-text></b-input-group-append>
989-
</b-input-group>
990-
</b-form-group>
991-
<b-form-group label="Append with button" label-for="elementsAppendButton" description="Here's some help text">
992-
<b-input-group>
993-
<b-form-input id="elementsAppendButton" type="text"></b-form-input>
994-
<b-input-group-append>
995-
<b-button variant="primary">Go!</b-button>
996-
</b-input-group-append>
997-
</b-input-group>
998-
</b-form-group>
999-
<b-form-group label="Two-buttons append" label-for="elementsTwoButtons">
1000-
<b-input-group>
1001-
<b-form-input id="elementsTwoButtons" type="text"></b-form-input>
1002-
<b-input-group-append>
1003-
<b-button variant="primary">Search</b-button>
1004-
<b-button variant="danger">Options</b-button>
1005-
</b-input-group-append>
1006-
</b-input-group>
1007-
</b-form-group>
1008-
<div class="form-actions">
1009-
<b-button type="submit" variant="primary">Save changes</b-button>
1010-
<b-button type="button" variant="secondary">Cancel</b-button>
953+
<transition name="fade">
954+
<b-card no-body v-if="show">
955+
<div slot="header">
956+
<i class="fa fa-edit"></i> Form Elements
957+
<div class="card-header-actions">
958+
<b-link href="#" class="card-header-action btn-setting">
959+
<i class="icon-settings"></i>
960+
</b-link>
961+
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
962+
<i class="icon-arrow-up"></i>
963+
</b-link>
964+
<b-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
965+
<i class="icon-close"></i>
966+
</b-link>
1011967
</div>
1012-
</b-card-body>
1013-
</b-collapse>
1014-
</b-card>
968+
</div>
969+
<b-collapse id="collapse1" visible>
970+
<b-card-body>
971+
<b-form-group label="Prepended text" label-for="elementsEmail" description="Here's some help text">
972+
<b-input-group>
973+
<b-input-group-prepend>
974+
<b-input-group-text>@</b-input-group-text>
975+
</b-input-group-prepend>
976+
<b-form-input id="elementsEmail" type="email"></b-form-input>
977+
</b-input-group>
978+
</b-form-group>
979+
<b-form-group label="Appended text" label-for="elementsAppend" description="Here's some help text">
980+
<b-input-group>
981+
<b-form-input id="elementsAppend" type="text"></b-form-input>
982+
<b-input-group-append><b-input-group-text>.00</b-input-group-text></b-input-group-append>
983+
</b-input-group>
984+
</b-form-group>
985+
<b-form-group label="Append and prepend" label-for="elementsPrependAppend" description="Here's some help text">
986+
<b-input-group>
987+
<b-input-group-prepend>
988+
<b-input-group-text>$</b-input-group-text>
989+
</b-input-group-prepend>
990+
<b-form-input id="elementsPrependAppend" type="text"></b-form-input>
991+
<b-input-group-append><b-input-group-text>.00</b-input-group-text></b-input-group-append>
992+
</b-input-group>
993+
</b-form-group>
994+
<b-form-group label="Append with button" label-for="elementsAppendButton" description="Here's some help text">
995+
<b-input-group>
996+
<b-form-input id="elementsAppendButton" type="text"></b-form-input>
997+
<b-input-group-append>
998+
<b-button variant="primary">Go!</b-button>
999+
</b-input-group-append>
1000+
</b-input-group>
1001+
</b-form-group>
1002+
<b-form-group label="Two-buttons append" label-for="elementsTwoButtons">
1003+
<b-input-group>
1004+
<b-form-input id="elementsTwoButtons" type="text"></b-form-input>
1005+
<b-input-group-append>
1006+
<b-button variant="primary">Search</b-button>
1007+
<b-button variant="danger">Options</b-button>
1008+
</b-input-group-append>
1009+
</b-input-group>
1010+
</b-form-group>
1011+
<div class="form-actions">
1012+
<b-button type="submit" variant="primary">Save changes</b-button>
1013+
<b-button type="button" variant="secondary">Cancel</b-button>
1014+
</div>
1015+
</b-card-body>
1016+
</b-collapse>
1017+
</b-card>
1018+
</transition>
10151019
</b-col>
10161020
</b-row>
10171021
</div>
@@ -1022,7 +1026,8 @@ export default {
10221026
name: 'forms',
10231027
data () {
10241028
return {
1025-
selected: [] // Must be an array reference!
1029+
selected: [], // Must be an array reference!
1030+
show: true
10261031
}
10271032
},
10281033
methods: {
@@ -1032,3 +1037,12 @@ export default {
10321037
}
10331038
}
10341039
</script>
1040+
1041+
<style scoped>
1042+
.fade-enter-active, .fade-leave-active {
1043+
transition: opacity .5s;
1044+
}
1045+
.fade-enter, .fade-leave-to {
1046+
opacity: 0;
1047+
}
1048+
</style>

0 commit comments

Comments
 (0)