diff --git a/dev/schema.js b/dev/schema.js index 5d9813e6..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: "slider", - label: "Income", - model: "income", + type: "selectEx", + label: "Country (selectEx field)", + model: "address.country", multi: true, - min: 0, - max: 100000, - sliderOptions: { - 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)", @@ -431,21 +425,35 @@ module.exports = { validator: validators.array }, { - type: "slider", - label: "Rank (slider field)", + type: "rangeSlider", + 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: "dateTime", - label: "DOB (dateTime field)", + type: "dateTimePicker", + label: "DOB (dateTimePicker field)", model: "dob", required: true, placeholder: "User's birth of date", @@ -462,7 +470,7 @@ module.exports = { } }, { - type: "dateTime", + type: "dateTimePicker", label: "DT", model: "dob", multi: true, @@ -474,7 +482,7 @@ module.exports = { } }, { - type: "dateTime", + type: "dateTimePicker", label: "Time", model: "time", multi: true, @@ -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/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/fieldNoUiSlider.vue b/src/fields/fieldNoUiSlider.vue index 7989c62c..1096e20a 100644 --- a/src/fields/fieldNoUiSlider.vue +++ b/src/fields/fieldNoUiSlider.vue @@ -32,14 +32,25 @@ // 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; + } + } } }, 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 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/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, 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,