Skip to content

Commit 11344c4

Browse files
icebobicebob
authored
Merge pull request #72 from lionel-bijaoui/lb_renaming
rename dateTime to dateTimePicker and slider to rangeSlider
2 parents fea94c1 + 42c42b0 commit 11344c4

File tree

7 files changed

+116
-67
lines changed

7 files changed

+116
-67
lines changed

‎dev/schema.js‎

Lines changed: 89 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ module.exports = {
136136
type: "input",
137137
inputType: "range",
138138
label: "Range",
139-
model: "range",
139+
model: "age",
140140
styleClasses: "half-width"
141141
},
142142
{
@@ -149,7 +149,7 @@ module.exports = {
149149
{
150150
type: "input",
151151
inputType: "checkbox",
152-
label: "Checkbox",
152+
label: "Checkbox (show useless)",
153153
model: "checkbox",
154154
styleClasses: "half-width"
155155
},
@@ -159,48 +159,55 @@ module.exports = {
159159
label: "Search USELESS",
160160
model: "search",
161161
placeholder: "Entrez un mot-clef",
162-
styleClasses: "half-width"
162+
styleClasses: "half-width",
163+
visible(model){return model.checkbox}
163164
},
164165
{
165166
type: "input",
166167
inputType: "radio",
167168
label: "radio USELESS",
168169
model: "radio",
169-
styleClasses: "half-width"
170+
styleClasses: "half-width",
171+
visible(model){return model.checkbox}
170172
},
171173
{
172174
type: "input",
173175
inputType: "file",
174176
label: "File USELESS",
175177
model: "file",
178+
visible(model){return model.checkbox}
176179
},
177180
{
178181
type: "input",
179182
inputType: "image",
180183
label: "Image USELESS",
181184
model: "image",
182-
styleClasses: "half-width"
185+
styleClasses: "half-width",
186+
visible(model){return model.checkbox}
183187
},
184188
{
185189
type: "input",
186190
inputType: "button",
187191
label: "Button USELESS",
188192
model: "button",
189-
styleClasses: "half-width"
193+
styleClasses: "half-width",
194+
visible(model){return model.checkbox}
190195
},
191196
{
192197
type: "input",
193198
inputType: "reset",
194199
label: "Reset USELESS",
195200
model: "reset",
196-
styleClasses: "half-width"
201+
styleClasses: "half-width",
202+
visible(model){return model.checkbox}
197203
},
198204
{
199205
type: "input",
200206
inputType: "submit",
201207
label: "Submit USELESS",
202208
model: "submit",
203-
styleClasses: "half-width"
209+
styleClasses: "half-width",
210+
visible(model){return model.checkbox}
204211
},
205212

206213
/**************/
@@ -354,23 +361,6 @@ module.exports = {
354361
model: "",
355362
styleClasses: "alert alert-info"
356363
},
357-
{
358-
type: "selectEx",
359-
label: "Country (selectEx field)",
360-
model: "address.country",
361-
multi: true,
362-
required: true,
363-
values: ["United Kingdom", "France", "Germany"],
364-
//default: "United Kingdom",
365-
multiSelect: false,
366-
selectOptions: {
367-
// https://silviomoreto.github.io/bootstrap-select/options/
368-
liveSearch: true,
369-
size: 10
370-
},
371-
styleClasses: ["half-width", "first"],
372-
validator: validators.required
373-
},
374364
{
375365
type: "spectrum",
376366
label: "Color (spectrum field)",
@@ -386,22 +376,26 @@ module.exports = {
386376
label: "Mobile (masked field)",
387377
model: "mobile",
388378
mask: "(99) 999-9999",
389-
styleClasses: "half-width",
379+
styleClasses: ["half-width", "first"],
390380
validator: validators.required
391-
},
381+
},
392382
{
393-
type: "slider",
394-
label: "Income",
395-
model: "income",
383+
type: "selectEx",
384+
label: "Country (selectEx field)",
385+
model: "address.country",
396386
multi: true,
397-
min: 0,
398-
max: 100000,
399-
sliderOptions: {
400-
type: "double",
401-
prefix: "$",
402-
step: 1000
403-
}
404-
},
387+
required: true,
388+
values: ["United Kingdom", "France", "Germany"],
389+
//default: "United Kingdom",
390+
multiSelect: false,
391+
selectOptions: {
392+
// https://silviomoreto.github.io/bootstrap-select/options/
393+
liveSearch: true,
394+
size: 10
395+
},
396+
styleClasses: "half-width",
397+
validator: validators.required
398+
},
405399
{
406400
type: "selectEx",
407401
label: "Skills (selectEx field)",
@@ -431,21 +425,35 @@ module.exports = {
431425
validator: validators.array
432426
},
433427
{
434-
type: "slider",
435-
label: "Rank (slider field)",
428+
type: "rangeSlider",
429+
label: "Rank (rangeSlider field)",
436430
model: "rank",
437431
multi: true,
438-
min: 1,
432+
min: 0,
439433
max: 10,
440434
required: true,
441-
sliderOptions: {
435+
rangeSliderOptions: {
442436
grid: true
443437
},
444-
// validator: validators.integer
438+
validator: validators.integer
445439
},
440+
// {
441+
// type: "rangeSlider",
442+
// label: "Income",
443+
// model: "income",
444+
// multi: true,
445+
// min: 0,
446+
// max: 100000,
447+
// rangeSliderOptions: {
448+
// type: "double",
449+
// prefix: "$",
450+
// step: 1000,
451+
// force_edges: true
452+
// }
453+
// },
446454
{
447-
type: "dateTime",
448-
label: "DOB (dateTime field)",
455+
type: "dateTimePicker",
456+
label: "DOB (dateTimePicker field)",
449457
model: "dob",
450458
required: true,
451459
placeholder: "User's birth of date",
@@ -462,7 +470,7 @@ module.exports = {
462470
}
463471
},
464472
{
465-
type: "dateTime",
473+
type: "dateTimePicker",
466474
label: "DT",
467475
model: "dob",
468476
multi: true,
@@ -474,7 +482,7 @@ module.exports = {
474482
}
475483
},
476484
{
477-
type: "dateTime",
485+
type: "dateTimePicker",
478486
label: "Time",
479487
model: "time",
480488
multi: true,
@@ -519,8 +527,8 @@ module.exports = {
519527
max: 10,
520528
required: true,
521529
disabled: false,
522-
sliderOptions: {
523-
// connect: "lower", // "lower", "upper", true, false
530+
noUiSliderOptions: {
531+
connect: "lower", // "lower", "upper", true, false
524532
// margin: 2 //number
525533
// limit: 2 //number
526534
step:1,
@@ -538,8 +546,38 @@ module.exports = {
538546
density: 10,
539547
stepped: true
540548
}
541-
},
542-
// validator: validators.integer
549+
}
550+
},
551+
{
552+
type: "noUiSlider",
553+
label: "Rank (noUiSlider field)",
554+
model: "income",
555+
multi: true,
556+
min: 0,
557+
max: 100000,
558+
required: true,
559+
disabled: false,
560+
noUiSliderOptions: {
561+
double:true,
562+
connect: true, // "lower", "upper", true, false
563+
// margin: 2 //number
564+
// limit: 2 //number
565+
step: 1000,
566+
// orientation:"vertical", //"vertical", "horizontal"
567+
// direction: "ltr", //"ltr", "rtl"
568+
tooltips: true, // false, true, formatter, array[formatter or false]
569+
animate: false,
570+
range:{
571+
'min': [ 0 ],
572+
'max': [ 100000 ]
573+
},
574+
pips: {
575+
mode: 'count',
576+
values: 6,
577+
density: 10,
578+
stepped: true
579+
}
580+
}
543581
},
544582
{
545583
type: "cleave",

src/fields/fieldDateTime.vue renamed to src/fields/fieldDateTimePicker.vue

File renamed without changes.

‎src/fields/fieldNoUiSlider.vue‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,25 @@
3232
// Single value
3333
this.value = parseFloat(value);
3434
}
35+
},
36+
getStartValue(){
37+
if (this.value != null) {
38+
return this.value;
39+
}else{
40+
if (this.schema.noUiSliderOptions.double) {
41+
return [this.schema.min, this.schema.min];
42+
}else{
43+
return this.schema.min;
44+
}
45+
}
3546
}
3647
},
3748
3849
ready() {
3950
if (window.noUiSlider) {
4051
this.slider = this.$el;
41-
window.noUiSlider.create(this.slider, defaults(this.schema.sliderOptions || {}, {
42-
start: this.value != null ? this.value : this.schema.min,
52+
window.noUiSlider.create(this.slider, defaults(this.schema.noUiSliderOptions || {}, {
53+
start: this.getStartValue(),
4354
range: {
4455
"min": this.schema.min,
4556
"max": this.schema.max

src/fields/fieldSlider.vue renamed to src/fields/fieldRangeSlider.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
valueFrom = this.value;
4545
4646
let self = this;
47-
$(this.$el).ionRangeSlider(defaults(this.schema.sliderOptions || {}, {
47+
$(this.$el).ionRangeSlider(defaults(this.schema.rangeSliderOptions || {}, {
4848
type: "single",
4949
grid: true,
5050
hide_min_max: true,
@@ -73,7 +73,7 @@
7373

7474

7575
<style lang="sass">
76-
.vue-form-generator .field-slider .irs {
76+
.vue-form-generator .field-rangeSlider .irs {
7777
width: 100%;
7878
}
7979
</style>

test/unit/specs/fields/fieldDateTime.spec.js renamed to test/unit/specs/fields/fieldDateTimePicker.spec.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@ import { createVueField, trigger, checkAttribute } from "../util";
33
import moment from "moment";
44

55
import Vue from "vue";
6-
import FieldDateTime from "src/fields/fieldDateTime.vue";
6+
import FieldDateTimePicker from "src/fields/fieldDateTimePicker.vue";
77

8-
Vue.component("FieldDateTime", FieldDateTime);
8+
Vue.component("FieldDateTimePicker", FieldDateTimePicker);
99

1010
let el, vm, field;
1111

1212
function createField(test, schema = {}, model = null, disabled = false, options) {
13-
[ el, vm, field ] = createVueField(test, "fieldDateTime", schema, model, disabled, options);
13+
[ el, vm, field ] = createVueField(test, "fieldDateTimePicker", schema, model, disabled, options);
1414
}
1515

16-
describe("fieldDateTime.vue", function() {
16+
describe("fieldDateTimePicker.vue", function() {
1717

1818
describe("check template", () => {
1919
let schema = {
20-
type: "dateTime",
20+
type: "dateTimePicker",
2121
label: "Event",
2222
model: "event",
2323
autocomplete: "off",
@@ -82,7 +82,7 @@ describe("fieldDateTime.vue", function() {
8282

8383
describe("check YYYYMMDD format", () => {
8484
let schema = {
85-
type: "dateTime",
85+
type: "dateTimePicker",
8686
label: "Event",
8787
model: "event",
8888
format: "YYYYMMDD",

‎test/unit/specs/fields/fieldNoUiSlider.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe("fieldNoUiSlider.vue", function() {
1717

1818
describe("check template", () => {
1919
let schema = {
20-
type: "range",
20+
type: "noUiSlider",
2121
label: "Rating",
2222
model: "rating",
2323
min: 1,

test/unit/specs/fields/fieldSlider.spec.js renamed to test/unit/specs/fields/fieldRangeSlider.spec.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@ import { expect } from "chai";
22
import { createVueField, checkAttribute } from "../util";
33

44
import Vue from "vue";
5-
import FieldSlider from "src/fields/fieldSlider.vue";
5+
import FieldRangeSlider from "src/fields/fieldRangeSlider.vue";
66

7-
Vue.component("FieldSlider", FieldSlider);
7+
Vue.component("FieldRangeSlider", FieldRangeSlider);
88

99
let el, vm, field;
1010

1111
function createField(test, schema = {}, model = null, disabled = false, options) {
12-
[ el, vm, field ] = createVueField(test, "fieldSlider", schema, model, disabled, options);
12+
[ el, vm, field ] = createVueField(test, "fieldRangeSlider", schema, model, disabled, options);
1313
}
1414

15-
describe("fieldSlider.vue", function() {
15+
describe("fieldRangeSlider.vue", function() {
1616

1717
describe("check template", () => {
1818
let schema = {
19-
type: "range",
19+
type: "rangeSlider",
2020
label: "Rating",
2121
model: "rating",
2222
min: 1,

0 commit comments

Comments
 (0)