From 5830e85804b3b7d40ea86e312f52e4f117f56918 Mon Sep 17 00:00:00 2001 From: Lionel Bijaoui Date: Wed, 21 Sep 2016 15:00:54 +0200 Subject: [PATCH 1/5] rename dateTime to dateTimePicker and slider to rangeSlider --- dev/schema.js | 16 ++++++++-------- ...fieldDateTime.vue => fieldDateTimePicker.vue} | 0 .../{fieldSlider.vue => fieldRangeSlider.vue} | 4 ++-- ...eTime.spec.js => fieldDateTimePicker.spec.js} | 12 ++++++------ ...ldSlider.spec.js => fieldRangeSlider.spec.js} | 10 +++++----- 5 files changed, 21 insertions(+), 21 deletions(-) rename src/fields/{fieldDateTime.vue => fieldDateTimePicker.vue} (100%) rename src/fields/{fieldSlider.vue => fieldRangeSlider.vue} (93%) rename test/unit/specs/fields/{fieldDateTime.spec.js => fieldDateTimePicker.spec.js} (88%) rename test/unit/specs/fields/{fieldSlider.spec.js => fieldRangeSlider.spec.js} (87%) diff --git a/dev/schema.js b/dev/schema.js index 5d9813e6..5a41fa16 100644 --- a/dev/schema.js +++ b/dev/schema.js @@ -390,13 +390,13 @@ module.exports = { validator: validators.required }, { - type: "slider", + type: "rangeSlider", label: "Income", model: "income", multi: true, min: 0, max: 100000, - sliderOptions: { + rangeSliderOptions: { type: "double", prefix: "$", step: 1000 @@ -431,8 +431,8 @@ module.exports = { validator: validators.array }, { - type: "slider", - label: "Rank (slider field)", + type: "rangeSlider", + label: "Rank (rangeSlider field)", model: "rank", multi: true, min: 1, @@ -444,8 +444,8 @@ module.exports = { // validator: validators.integer }, { - type: "dateTime", - label: "DOB (dateTime field)", + type: "dateTimePicker", + label: "DOB (dateTimePicker field)", model: "dob", required: true, placeholder: "User's birth of date", @@ -462,7 +462,7 @@ module.exports = { } }, { - type: "dateTime", + type: "dateTimePicker", label: "DT", model: "dob", multi: true, @@ -474,7 +474,7 @@ module.exports = { } }, { - type: "dateTime", + type: "dateTimePicker", label: "Time", model: "time", multi: true, diff --git a/src/fields/fieldDateTime.vue b/src/fields/fieldDateTimePicker.vue similarity index 100% rename from src/fields/fieldDateTime.vue rename to src/fields/fieldDateTimePicker.vue diff --git a/src/fields/fieldSlider.vue b/src/fields/fieldRangeSlider.vue similarity index 93% rename from src/fields/fieldSlider.vue rename to src/fields/fieldRangeSlider.vue index 024232fe..a9af78a8 100644 --- a/src/fields/fieldSlider.vue +++ b/src/fields/fieldRangeSlider.vue @@ -44,7 +44,7 @@ valueFrom = this.value; let self = this; - $(this.$el).ionRangeSlider(defaults(this.schema.sliderOptions || {}, { + $(this.$el).ionRangeSlider(defaults(this.schema.rangeSliderOptions || {}, { type: "single", grid: true, hide_min_max: true, @@ -73,7 +73,7 @@ diff --git a/test/unit/specs/fields/fieldDateTime.spec.js b/test/unit/specs/fields/fieldDateTimePicker.spec.js similarity index 88% rename from test/unit/specs/fields/fieldDateTime.spec.js rename to test/unit/specs/fields/fieldDateTimePicker.spec.js index daeaec1b..6c951025 100644 --- a/test/unit/specs/fields/fieldDateTime.spec.js +++ b/test/unit/specs/fields/fieldDateTimePicker.spec.js @@ -3,21 +3,21 @@ import { createVueField, trigger, checkAttribute } from "../util"; import moment from "moment"; import Vue from "vue"; -import FieldDateTime from "src/fields/fieldDateTime.vue"; +import FieldDateTimePicker from "src/fields/fieldDateTimePicker.vue"; -Vue.component("FieldDateTime", FieldDateTime); +Vue.component("FieldDateTimePicker", FieldDateTimePicker); let el, vm, field; function createField(test, schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField(test, "fieldDateTime", schema, model, disabled, options); + [ el, vm, field ] = createVueField(test, "fieldDateTimePicker", schema, model, disabled, options); } -describe("fieldDateTime.vue", function() { +describe("fieldDateTimePicker.vue", function() { describe("check template", () => { let schema = { - type: "dateTime", + type: "dateTimePicker", label: "Event", model: "event", autocomplete: "off", @@ -82,7 +82,7 @@ describe("fieldDateTime.vue", function() { describe("check YYYYMMDD format", () => { let schema = { - type: "dateTime", + type: "dateTimePicker", label: "Event", model: "event", format: "YYYYMMDD", diff --git a/test/unit/specs/fields/fieldSlider.spec.js b/test/unit/specs/fields/fieldRangeSlider.spec.js similarity index 87% rename from test/unit/specs/fields/fieldSlider.spec.js rename to test/unit/specs/fields/fieldRangeSlider.spec.js index 0e90418b..d523d658 100644 --- a/test/unit/specs/fields/fieldSlider.spec.js +++ b/test/unit/specs/fields/fieldRangeSlider.spec.js @@ -2,21 +2,21 @@ import { expect } from "chai"; import { createVueField, checkAttribute } from "../util"; import Vue from "vue"; -import FieldSlider from "src/fields/fieldSlider.vue"; +import FieldRangeSlider from "src/fields/fieldRangeSlider.vue"; -Vue.component("FieldSlider", FieldSlider); +Vue.component("FieldRangeSlider", FieldRangeSlider); let el, vm, field; function createField(test, schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField(test, "fieldSlider", schema, model, disabled, options); + [ el, vm, field ] = createVueField(test, "fieldRangeSlider", schema, model, disabled, options); } -describe("fieldSlider.vue", function() { +describe("fieldRangeSlider.vue", function() { describe("check template", () => { let schema = { - type: "range", + type: "rangeSlider", label: "Rating", model: "rating", min: 1, From b97c6bde6257d802a80e55a9f9e37b846ce4337f Mon Sep 17 00:00:00 2001 From: Lionel Bijaoui Date: Wed, 21 Sep 2016 15:21:46 +0200 Subject: [PATCH 2/5] update schema and fix a test --- dev/schema.js | 128 ++++++++++++------ .../unit/specs/fields/fieldNoUiSlider.spec.js | 2 +- 2 files changed, 84 insertions(+), 46 deletions(-) diff --git a/dev/schema.js b/dev/schema.js index 5a41fa16..0a5bff20 100644 --- a/dev/schema.js +++ b/dev/schema.js @@ -136,7 +136,7 @@ module.exports = { type: "input", inputType: "range", label: "Range", - model: "range", + model: "age", styleClasses: "half-width" }, { @@ -149,7 +149,7 @@ module.exports = { { type: "input", inputType: "checkbox", - label: "Checkbox", + label: "Checkbox (show useless)", model: "checkbox", styleClasses: "half-width" }, @@ -159,48 +159,55 @@ module.exports = { label: "Search USELESS", model: "search", placeholder: "Entrez un mot-clef", - styleClasses: "half-width" + styleClasses: "half-width", + visible(model){return model.checkbox} }, { type: "input", inputType: "radio", label: "radio USELESS", model: "radio", - styleClasses: "half-width" + styleClasses: "half-width", + visible(model){return model.checkbox} }, { type: "input", inputType: "file", label: "File USELESS", model: "file", + visible(model){return model.checkbox} }, { type: "input", inputType: "image", label: "Image USELESS", model: "image", - styleClasses: "half-width" + styleClasses: "half-width", + visible(model){return model.checkbox} }, { type: "input", inputType: "button", label: "Button USELESS", model: "button", - styleClasses: "half-width" + styleClasses: "half-width", + visible(model){return model.checkbox} }, { type: "input", inputType: "reset", label: "Reset USELESS", model: "reset", - styleClasses: "half-width" + styleClasses: "half-width", + visible(model){return model.checkbox} }, { type: "input", inputType: "submit", label: "Submit USELESS", model: "submit", - styleClasses: "half-width" + styleClasses: "half-width", + visible(model){return model.checkbox} }, /**************/ @@ -354,23 +361,6 @@ module.exports = { model: "", styleClasses: "alert alert-info" }, -{ - type: "selectEx", - label: "Country (selectEx field)", - model: "address.country", - multi: true, - required: true, - values: ["United Kingdom", "France", "Germany"], - //default: "United Kingdom", - multiSelect: false, - selectOptions: { - // https://silviomoreto.github.io/bootstrap-select/options/ - liveSearch: true, - size: 10 - }, - styleClasses: ["half-width", "first"], - validator: validators.required -}, { type: "spectrum", label: "Color (spectrum field)", @@ -386,22 +376,26 @@ module.exports = { label: "Mobile (masked field)", model: "mobile", mask: "(99) 999-9999", - styleClasses: "half-width", + styleClasses: ["half-width", "first"], validator: validators.required -}, +}, { - type: "rangeSlider", - label: "Income", - model: "income", + type: "selectEx", + label: "Country (selectEx field)", + model: "address.country", multi: true, - min: 0, - max: 100000, - rangeSliderOptions: { - type: "double", - prefix: "$", - step: 1000 - } -}, + required: true, + values: ["United Kingdom", "France", "Germany"], + //default: "United Kingdom", + multiSelect: false, + selectOptions: { + // https://silviomoreto.github.io/bootstrap-select/options/ + liveSearch: true, + size: 10 + }, + styleClasses: "half-width", + validator: validators.required +}, { type: "selectEx", label: "Skills (selectEx field)", @@ -435,14 +429,28 @@ module.exports = { label: "Rank (rangeSlider field)", model: "rank", multi: true, - min: 1, + min: 0, max: 10, required: true, - sliderOptions: { + rangeSliderOptions: { grid: true }, - // validator: validators.integer + validator: validators.integer }, +// { +// type: "rangeSlider", +// label: "Income", +// model: "income", +// multi: true, +// min: 0, +// max: 100000, +// rangeSliderOptions: { +// type: "double", +// prefix: "$", +// step: 1000, +// force_edges: true +// } +// }, { type: "dateTimePicker", label: "DOB (dateTimePicker field)", @@ -519,8 +527,8 @@ module.exports = { max: 10, required: true, disabled: false, - sliderOptions: { - // connect: "lower", // "lower", "upper", true, false + noUiSliderOptions: { + connect: "lower", // "lower", "upper", true, false // margin: 2 //number // limit: 2 //number step:1, @@ -538,8 +546,38 @@ module.exports = { density: 10, stepped: true } - }, - // validator: validators.integer + } +}, +{ + type: "noUiSlider", + label: "Rank (noUiSlider field)", + model: "income", + multi: true, + min: 0, + max: 100000, + required: true, + disabled: false, + noUiSliderOptions: { + double:true, + connect: true, // "lower", "upper", true, false + // margin: 2 //number + // limit: 2 //number + step: 1000, + // orientation:"vertical", //"vertical", "horizontal" + // direction: "ltr", //"ltr", "rtl" + tooltips: true, // false, true, formatter, array[formatter or false] + animate: false, + range:{ + 'min': [ 0 ], + 'max': [ 100000 ] + }, + pips: { + mode: 'count', + values: 6, + density: 10, + stepped: true + } + } }, { type: "cleave", diff --git a/test/unit/specs/fields/fieldNoUiSlider.spec.js b/test/unit/specs/fields/fieldNoUiSlider.spec.js index a292588f..931dbc49 100644 --- a/test/unit/specs/fields/fieldNoUiSlider.spec.js +++ b/test/unit/specs/fields/fieldNoUiSlider.spec.js @@ -17,7 +17,7 @@ describe("fieldNoUiSlider.vue", function() { describe("check template", () => { let schema = { - type: "range", + type: "noUiSlider", label: "Rating", model: "rating", min: 1, From 7f4afa9d36bdbd6ad8d6298541f6125e867bbceb Mon Sep 17 00:00:00 2001 From: Lionel Bijaoui Date: Wed, 21 Sep 2016 15:24:23 +0200 Subject: [PATCH 3/5] rename sliderOptions to noUiSliderOptions to follow schema logic --- src/fields/fieldNoUiSlider.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fields/fieldNoUiSlider.vue b/src/fields/fieldNoUiSlider.vue index 7989c62c..9800574a 100644 --- a/src/fields/fieldNoUiSlider.vue +++ b/src/fields/fieldNoUiSlider.vue @@ -38,8 +38,8 @@ ready() { if (window.noUiSlider) { this.slider = this.$el; - window.noUiSlider.create(this.slider, defaults(this.schema.sliderOptions || {}, { - start: this.value != null ? this.value : this.schema.min, + window.noUiSlider.create(this.slider, defaults(this.schema.noUiSliderOptions || {}, { + start: this.getStartValue(), range: { "min": this.schema.min, "max": this.schema.max From 13b74e34c221fbed5c1421d2e55be5e8716cea15 Mon Sep 17 00:00:00 2001 From: Lionel Bijaoui Date: Wed, 21 Sep 2016 15:30:58 +0200 Subject: [PATCH 4/5] fix: forgot the new method getStartValue() --- src/fields/fieldNoUiSlider.vue | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/fields/fieldNoUiSlider.vue b/src/fields/fieldNoUiSlider.vue index 9800574a..b0a556df 100644 --- a/src/fields/fieldNoUiSlider.vue +++ b/src/fields/fieldNoUiSlider.vue @@ -32,6 +32,16 @@ // Single value this.value = parseFloat(value); } + getStartValue(){ + if (this.value != null) { + return this.value; + }else{ + if (this.schema.noUiSliderOptions.double) { + return [this.schema.min, this.schema.min]; + }else{ + return this.schema.min; + } + } } }, From 42c42b04c9db51c7c291a55caa9c19c283d142bf Mon Sep 17 00:00:00 2001 From: Lionel Bijaoui Date: Wed, 21 Sep 2016 15:41:07 +0200 Subject: [PATCH 5/5] fix: missing closing bracket --- src/fields/fieldNoUiSlider.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/fields/fieldNoUiSlider.vue b/src/fields/fieldNoUiSlider.vue index b0a556df..1096e20a 100644 --- a/src/fields/fieldNoUiSlider.vue +++ b/src/fields/fieldNoUiSlider.vue @@ -32,6 +32,7 @@ // Single value this.value = parseFloat(value); } + }, getStartValue(){ if (this.value != null) { return this.value;