Skip to content

Commit 620043e

Browse files
ahmet-ertanahmet-ertan
committed
Hover effect test
1 parent 50610ae commit 620043e

File tree

8 files changed

+567
-276
lines changed

8 files changed

+567
-276
lines changed

‎dist/v-form-builder.common.js

Lines changed: 190 additions & 96 deletions
Large diffs are not rendered by default.

‎dist/v-form-builder.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/v-form-builder.umd.js

Lines changed: 190 additions & 96 deletions
Large diffs are not rendered by default.

‎dist/v-form-builder.umd.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/index.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
88
<title>Vue-Form-Builder v2.1.0 - github.com/sethsandaru</title>
99

10-
<link rel="stylesheet" href="./css/bootstrap-4.3.1.min.css">
11-
<link rel="stylesheet" href="./css/v-form-builder.css" />
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
11+
<link rel="stylesheet" href="./css/v-form-builder.css" />
1212
</head>
1313
<body>
1414
<noscript>
1515
<strong>We're sorry but form doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
1616
</noscript>
1717
<div id="app"></div>
1818
<!-- built files will be auto injected -->
19+
20+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
21+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
22+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
1923
</body>
2024
</html>

‎src/views/renderer/ControlView.vue

Lines changed: 75 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -39,34 +39,54 @@
3939

4040

4141
<div v-else class="control-view">
42-
<!-- render the label, readonly should show the label -->
43-
<ControlLabel
44-
v-show="control.isShowLabel || readOnly"
45-
:control="control"
46-
:read-only="readOnly"
47-
/>
42+
<div v-if="!isHidden">
43+
<!-- render the label, readonly should show the label -->
44+
<ControlLabel
45+
v-show="control.isShowLabel || readOnly"
46+
:control="control"
47+
:read-only="readOnly"
48+
/>
4849

49-
<!-- render the exact field -->
50-
<component
51-
v-if="!readOnly"
52-
v-model="valueContainer[controlName]"
53-
:is="controlComponent"
54-
:control="control"
55-
:value-container="valueContainer"
56-
:class="validationErrorClasses"
57-
/>
58-
<p
59-
v-else
60-
v-text="valueContainer[controlName]"
61-
/>
62-
<!-- validation error -->
63-
<template v-if="hasValidationError">
64-
<div v-for="(mess, i) in validationErrorMessages"
65-
:key="i"
66-
v-text="mess"
67-
:class="styles.FORM.ERROR_MESSAGE"
68-
></div>
69-
</template>
50+
<!-- render the exact field -->
51+
<component
52+
v-model="valueContainer[controlName]"
53+
:is="controlComponent"
54+
:control="control"
55+
:value-container="valueContainer"
56+
:class="validationErrorClasses"
57+
:isReadOnly="isDisabled"
58+
/>
59+
<!-- <p
60+
v-else
61+
v-text="valueContainer[controlName]"
62+
/> -->
63+
<!-- validation error -->
64+
<template v-if="hasValidationError">
65+
<div v-for="(mess, i) in validationErrorMessages"
66+
:key="i"
67+
v-text="mess"
68+
:class="styles.FORM.ERROR_MESSAGE"
69+
></div>
70+
</template>
71+
</div>
72+
</div>
73+
74+
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
75+
<div class="modal-dialog modal-dialog-centered">
76+
<div class="modal-content">
77+
<div class="modal-header">
78+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
79+
<span aria-hidden="true">&times;</span>
80+
</button>
81+
</div>
82+
<div class="modal-body">
83+
<h5>Kontrollerde değişiklik yapabilmeniz için ilgili bölümün ayarını değiştirmelisiniz!</h5>
84+
</div>
85+
<div class="modal-footer">
86+
<button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
87+
</div>
88+
</div>
89+
</div>
7090
</div>
7191
</div>
7292
</template>
@@ -104,6 +124,10 @@
104124
currentStep: {
105125
type: String,
106126
required: true
127+
},
128+
sectionConfig: {
129+
type: String,
130+
required: false
107131
}
108132
},
109133
data () {
@@ -116,6 +140,10 @@
116140
},
117141
methods:{
118142
changeConfig(config, controlId) {
143+
if((config !== this.sectionConfig) && (this.sectionConfig == 'read-only' || this.sectionConfig == 'hidden')) {
144+
$('#staticBackdrop').modal('show')
145+
return false
146+
}
119147
if(this.control.uniqueId == controlId) {
120148
this.currentConfig = config
121149
// this.control.permission[this.currentStep] = config // Deployda bu satır kaldırılacak !!!
@@ -175,7 +203,7 @@
175203
this.isConfigurable = true
176204
}
177205
178-
if(this.control.permission[this.currentStep]) {
206+
if(this.control.permission[this.currentStep] && (this.sectionConfig != 'read-only' && this.sectionConfig != 'hidden')) {
179207
this.currentConfig = this.control.permission[this.currentStep]
180208
}
181209
},
@@ -202,6 +230,25 @@
202230
this.isDisabled = false
203231
this.isHidden = false
204232
}
233+
},
234+
sectionConfig:{
235+
immediate: true,
236+
handler(val) {
237+
if(val == 'read-only') {
238+
this.isDisabled = true
239+
this.isHidden = false
240+
}
241+
else if(val == 'hidden') {
242+
this.isDisabled = false
243+
this.isHidden = true
244+
}
245+
else {
246+
this.isDisabled = false
247+
this.isHidden = false
248+
}
249+
250+
this.changeConfig(val, this.control.uniqueId)
251+
}
205252
}
206253
},
207254
}

‎src/views/renderer/section-views/NormalSectionView.vue

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -20,28 +20,32 @@
2020
:validation-errors="validationErrors"
2121
:read-only="readOnly"
2222
:current-step="currentStep"
23+
:sectionConfig="section.permission[currentStep]"
2324
@changeControlPermission="changeControlPermission"
2425
/>
2526
</div>
2627
</div>
2728
<div class="normal-section" v-else>
28-
<div class="headline-block" v-show="section.isShowHeadline">
29-
<h2 :class="section.headlineAdditionalClass" v-text="section.headline"></h2>
30-
<p :class="section.subHeadlineAdditionalClass" v-text="section.subHeadline"></p>
31-
</div>
29+
<div v-if="!isHidden">
30+
<div class="headline-block" v-show="section.isShowHeadline">
31+
<h2 :class="section.headlineAdditionalClass" v-text="section.headline"></h2>
32+
<p :class="section.subHeadlineAdditionalClass" v-text="section.subHeadline"></p>
33+
</div>
3234

33-
<div :class="containerClasses">
34-
<ControlView
35-
v-for="controlId in section.controls"
36-
:key="controlId"
37-
:control="controls[controlId]"
38-
:parent-id="section.uniqueId"
39-
:value-container="valueContainer"
40-
:validation-errors="validationErrors"
41-
:read-only="readOnly"
42-
:current-step="currentStep"
43-
@changeControlPermission="changeControlPermission"
44-
/>
35+
<div :class="containerClasses">
36+
<ControlView
37+
v-for="controlId in section.controls"
38+
:key="controlId"
39+
:control="controls[controlId]"
40+
:parent-id="section.uniqueId"
41+
:value-container="valueContainer"
42+
:validation-errors="validationErrors"
43+
:read-only="readOnly"
44+
:current-step="currentStep"
45+
:sectionConfig="section.permission[currentStep]"
46+
@changeControlPermission="changeControlPermission"
47+
/>
48+
</div>
4549
</div>
4650
</div>
4751
</template>
@@ -63,7 +67,9 @@
6367
data () {
6468
return {
6569
currentSectionConfig: "",
66-
isConfigurable: false
70+
isConfigurable: false,
71+
isDisabled: false,
72+
isHidden: false
6773
}
6874
},
6975
methods: {
@@ -74,10 +80,11 @@
7480
changeConfig(config, sectionId) {
7581
if(this.section.uniqueId == sectionId) {
7682
this.currentSectionConfig = config
77-
// this.section.permission[this.currentStep] = config // Deployda bu satır kaldırılacak !!!
83+
this.section.permission[this.currentStep] = config // Deployda bu satır kaldırılacak !!!
7884
}
7985
// console.log(this.control);
8086
this.$emit('changeSectionPermission',sectionId,this.currentStep,config)
87+
8188
}
8289
},
8390
@@ -90,20 +97,20 @@
9097
this.currentSectionConfig = ""
9198
}
9299
},
93-
// currentConfig: function(val) {
94-
// if(val == 'read-only') {
95-
// this.isDisabled = true
96-
// this.isHidden = false
97-
// }
98-
// else if(val == 'hidden') {
99-
// this.isDisabled = false
100-
// this.isHidden = true
101-
// }
102-
// else {
103-
// this.isDisabled = false
104-
// this.isHidden = false
105-
// }
106-
// }
100+
currentSectionConfig: function(val) {
101+
if(val == 'read-only') {
102+
this.isDisabled = true
103+
this.isHidden = false
104+
}
105+
else if(val == 'hidden') {
106+
this.isDisabled = false
107+
this.isHidden = true
108+
}
109+
else {
110+
this.isDisabled = false
111+
this.isHidden = false
112+
}
113+
},
107114
},
108115
109116
mounted(){
@@ -113,7 +120,7 @@
113120
}
114121
115122
if(this.section.permission[this.currentStep]) {
116-
this.currentConfig = this.section.permission[this.currentStep]
123+
this.currentSectionConfig = this.section.permission[this.currentStep]
117124
}
118125
},
119126

‎src/views/renderer/section-views/ToggleableSectionView.vue

Lines changed: 62 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="toggleable-section withHover">
2+
<div v-if="isConfigurable" class="toggleable-section withHover">
33
<div class="headline-block hover-section">
44
<h2 :class="section.headlineAdditionalClass">
55
<!-- chevron icon to show/hide -->
@@ -38,12 +38,55 @@
3838
:validation-errors="validationErrors"
3939
:read-only="readOnly"
4040
:current-step="currentStep"
41+
:sectionConfig="section.permission[currentStep]"
4142
@changeControlPermission="changeControlPermission"
4243
/>
4344
</div>
4445
</transition>
4546

4647
</div>
48+
<div v-else class="toggleable-section">
49+
<div v-if="!isHidden">
50+
<div class="headline-block">
51+
<h2 :class="section.headlineAdditionalClass">
52+
<!-- chevron icon to show/hide -->
53+
<span class="toggle-item"
54+
v-html="isVisible ? iconClose : iconOpen"
55+
@click="isVisible = !isVisible">
56+
</span>
57+
58+
<!-- headline -->
59+
<span v-text="section.headline"
60+
v-show="section.isShowHeadline">
61+
</span>
62+
63+
<!-- subheadline -->
64+
<small :class="[section.subHeadlineAdditionalClass, 'toggleable-sub-headline']"
65+
v-text="section.subHeadline"
66+
v-show="section.isShowHeadline">
67+
</small>
68+
</h2>
69+
</div>
70+
71+
<!-- Rows - BLock it for animation -->
72+
<transition name="slide">
73+
<div v-show="isVisible" :class="containerClasses">
74+
<ControlView
75+
v-for="controlId in section.controls"
76+
:key="controlId"
77+
:control="controls[controlId]"
78+
:parent-id="section.uniqueId"
79+
:value-container="valueContainer"
80+
:validation-errors="validationErrors"
81+
:read-only="readOnly"
82+
:current-step="currentStep"
83+
:sectionConfig="section.permission[currentStep]"
84+
@changeControlPermission="changeControlPermission"
85+
/>
86+
</div>
87+
</transition>
88+
</div>
89+
</div>
4790
</template>
4891

4992
<script>
@@ -56,7 +99,9 @@
5699
data () {
57100
return {
58101
currentSectionConfig: "",
59-
isConfigurable: false
102+
isConfigurable: false,
103+
isHidden: false,
104+
isDisabled: false
60105
}
61106
},
62107
methods: {
@@ -82,20 +127,20 @@
82127
this.currentSectionConfig = ""
83128
}
84129
},
85-
// currentConfig: function(val) {
86-
// if(val == 'read-only') {
87-
// this.isDisabled = true
88-
// this.isHidden = false
89-
// }
90-
// else if(val == 'hidden') {
91-
// this.isDisabled = false
92-
// this.isHidden = true
93-
// }
94-
// else {
95-
// this.isDisabled = false
96-
// this.isHidden = false
97-
// }
98-
// }
130+
currentSectionConfig: function(val) {
131+
if(val == 'read-only') {
132+
this.isDisabled = true
133+
this.isHidden = false
134+
}
135+
else if(val == 'hidden') {
136+
this.isDisabled = false
137+
this.isHidden = true
138+
}
139+
else {
140+
this.isDisabled = false
141+
this.isHidden = false
142+
}
143+
}
99144
},
100145
101146
mounted(){
@@ -105,7 +150,7 @@
105150
}
106151
107152
if(this.section.permission[this.currentStep]) {
108-
this.currentConfig = this.section.permission[this.currentStep]
153+
this.currentSectionConfig = this.section.permission[this.currentStep]
109154
}
110155
}
111156
}

0 commit comments

Comments
 (0)