Skip to content

Commit 05a98eb

Browse files
vuchlvuchl
committed
added css classes for core fields
1 parent 5099907 commit 05a98eb

18 files changed

+9536
-16
lines changed

‎package-lock.json

+9,448
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,5 @@
102102
"webpack-dev-server": "1.16.2",
103103
"webpack-merge": "0.14.1"
104104
},
105-
"dependencies": {
106-
}
105+
"dependencies": {}
107106
}

‎src/fields/abstractField.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default {
1919
"model",
2020
"schema",
2121
"formOptions",
22-
"disabled"
22+
"disabled",
2323
],
2424

2525
data() {
@@ -167,6 +167,10 @@ export default {
167167
getFieldID(schema) {
168168
const idPrefix = this.formOptions && this.formOptions.fieldIdPrefix ? this.formOptions.fieldIdPrefix : "";
169169
return slugifyFormID(schema, idPrefix);
170+
},
171+
172+
getFieldClasses() {
173+
return this.schema.classes || [];
170174
}
171175

172176
}

‎src/fields/core/fieldCheckbox.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
2+
input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName" :class="schema.classes")
33
</template>
44

55
<script>

‎src/fields/core/fieldInput.vue

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
:value="value",
77
@input="value = $event.target.value",
88
@change="onChange",
9+
:class="schema.classes",
910
:disabled="disabled",
1011
:accept="schema.accept",
1112
:alt="schema.alt",

‎src/fields/core/fieldLabel.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
span(:id="getFieldID(schema)") {{ value }}
2+
span(:id="getFieldID(schema)" :class="schema.classes") {{ value }}
33
</template>
44

55
<script>

‎src/fields/core/fieldRadios.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template lang="pug">
22
.radio-list(:disabled="disabled")
33
label(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
4-
input(type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)" )
4+
input(type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)" :class="schema.classes")
55
| {{ getItemName(item) }}
66

77
</template>

‎src/fields/core/fieldSelect.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)")
2+
select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)" :class="schema.classes")
33
option(v-if="!selectOptions.hideNoneSelectedText", :disabled="schema.required", :value="null", :selected="value == undefined") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
44
option(v-for="item in items", :value="getItemValue(item)") {{ getItemName(item) }}
55
</template>

‎src/fields/core/fieldSubmit.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
input(type="submit", :value="schema.buttonText", @click="click", :name="schema.inputName", :disabled="disabled")
2+
input(type="submit", :value="schema.buttonText", @click="click", :name="schema.inputName", :disabled="disabled" :class="schema.classes")
33
</template>
44

55
<script>

‎src/fields/core/fieldTextArea.vue

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
textarea.form-control(
33
v-model="value",
44
:id="getFieldID(schema)",
5+
:class="schema.classes",
56
:disabled="disabled",
67
:maxlength="schema.max",
78
:minlength="schema.min",

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

+23
Original file line numberDiff line numberDiff line change
@@ -480,4 +480,27 @@ describe("abstractField.vue", function() {
480480

481481
});
482482

483+
describe("check classes application to fields", () => {
484+
485+
let schema = {
486+
type: "text",
487+
label: "First Name",
488+
model: "user__model",
489+
inputName: "input_name",
490+
classes: ["applied-class", "another-class"]
491+
};
492+
let model = {};
493+
494+
before( () => {
495+
createField(this, schema, model);
496+
});
497+
498+
it("should have 2 classes ('applied-class' and 'another-class')", () => {
499+
expect(field.getFieldClasses().length).to.be.equal(2);
500+
expect(field.getFieldClasses()[0]).to.be.equal("applied-class");
501+
expect(field.getFieldClasses()[1]).to.be.equal("another-class");
502+
});
503+
504+
});
505+
483506
});

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ describe("FieldCheckbox.vue", function() {
1818
let schema = {
1919
type: "checkbox",
2020
label: "Status",
21-
model: "status"
21+
model: "status",
22+
classes: ["applied-class", "another-class"]
2223
};
2324
let model = { status: true };
2425
let input;
@@ -73,6 +74,11 @@ describe("FieldCheckbox.vue", function() {
7374

7475
});
7576

77+
it("should have 2 classes", () => {
78+
expect(input.className.indexOf("applied-class")).not.to.be.equal(-1);
79+
expect(input.className.indexOf("another-class")).not.to.be.equal(-1);
80+
});
81+
7682
});
7783

7884
});

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ describe("fieldInput.vue", function() {
2222
model: "name",
2323
autocomplete: "off",
2424
placeholder: "Field placeholder",
25-
readonly: false
25+
readonly: false,
26+
classes: ["applied-class", "another-class"]
2627
};
2728
let model = { name: "John Doe" };
2829
let input;
@@ -120,6 +121,11 @@ describe("fieldInput.vue", function() {
120121

121122
});
122123

124+
it("should have 2 classes", () => {
125+
expect(input.className.indexOf("applied-class")).not.to.be.equal(-1);
126+
expect(input.className.indexOf("another-class")).not.to.be.equal(-1);
127+
});
128+
123129
});
124130

125131
});

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ describe("fieldLabel.vue", function() {
1818
let schema = {
1919
type: "label",
2020
label: "Timestamp",
21-
model: "timestamp"
21+
model: "timestamp",
22+
classes: ["applied-class", "another-class"]
2223
};
2324
let model = { timestamp: "2 days ago" };
2425
let span;
@@ -51,6 +52,11 @@ describe("fieldLabel.vue", function() {
5152

5253
});
5354

55+
it("should have 2 classes", () => {
56+
expect(span.className.indexOf("applied-class")).not.to.be.equal(-1);
57+
expect(span.className.indexOf("another-class")).not.to.be.equal(-1);
58+
});
59+
5460
});
5561

5662
});

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ describe("FieldRadios.vue", function() {
2727
"AngularJS",
2828
"ReactJS",
2929
"VueJS"
30-
]
30+
],
31+
classes: ["applied-class", "another-class"]
3132
};
3233
let model = { skills: "Javascript" };
3334
let radioList;
@@ -76,6 +77,11 @@ describe("FieldRadios.vue", function() {
7677
expect(labelList[6].classList.contains("is-checked")).to.be.false;
7778
});
7879

80+
it("should have 2 classes", () => {
81+
expect(radios[0].className.indexOf("applied-class")).not.to.be.equal(-1);
82+
expect(radios[0].className.indexOf("another-class")).not.to.be.equal(-1);
83+
});
84+
7985

8086
describe("test values reactivity to changes", () => {
8187

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ describe("fieldSelect.vue", function() {
2626
"Paris",
2727
"Rome",
2828
"Berlin"
29-
]
29+
],
30+
classes: ["applied-class", "another-class"]
3031
};
3132
let model = { city: "Paris" };
3233
let input;
@@ -210,7 +211,8 @@ describe("fieldSelect.vue", function() {
210211
{ id: 3, name: "Rome" },
211212
{ id: 4, name: "Berlin" }
212213
];
213-
}
214+
},
215+
classes: ["applied-class", "another-class"]
214216
};
215217
let model = { city: 2 };
216218
let input;
@@ -247,6 +249,11 @@ describe("fieldSelect.vue", function() {
247249

248250
});
249251

252+
it("should have 2 classes", () => {
253+
expect(input.className.indexOf("applied-class")).not.to.be.equal(-1);
254+
expect(input.className.indexOf("another-class")).not.to.be.equal(-1);
255+
});
256+
250257
});
251258

252259
});

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

+8-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ describe("fieldSubmit.vue", function() {
2121
type: "submit",
2222
buttonText: "Submit form",
2323
validateBeforeSubmit: false,
24-
onSubmit() {}
24+
onSubmit() {},
25+
classes: ["applied-class", "another-class"]
2526
};
2627
let model = { name: "John Doe" };
2728
let input;
@@ -72,6 +73,12 @@ describe("fieldSubmit.vue", function() {
7273
});
7374
});
7475
});
76+
77+
it("should have 2 classes", () => {
78+
expect(input.className.indexOf("applied-class")).not.to.be.equal(-1);
79+
expect(input.className.indexOf("another-class")).not.to.be.equal(-1);
80+
});
81+
7582
});
7683

7784
});

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ describe("fieldTextArea.vue", function() {
2222
model: "desc",
2323
max: 500,
2424
placeholder: "Field placeholder",
25-
readonly: false
25+
readonly: false,
26+
classes: ["applied-class", "another-class"]
2627
};
2728
let model = { desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." };
2829
let input;
@@ -87,6 +88,11 @@ describe("fieldTextArea.vue", function() {
8788

8889
});
8990

91+
it("should have 2 classes", () => {
92+
expect(input.className.indexOf("applied-class")).not.to.be.equal(-1);
93+
expect(input.className.indexOf("another-class")).not.to.be.equal(-1);
94+
});
95+
9096
});
9197

9298
});

0 commit comments

Comments
 (0)