From 1f713087d8242fc52cfbe70b96c0b3bd2519338c Mon Sep 17 00:00:00 2001 From: Nikola P <54369630+phre1@users.noreply.github.com> Date: Fri, 2 Jul 2021 13:15:44 +0200 Subject: [PATCH 01/80] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 7cbf420d..1358da6b 100644 --- a/README.md +++ b/README.md @@ -72,6 +72,8 @@ Made with [Vue.js](https://vuejs.org/) If you don't already have an existing Vue project, the easiest way to create one is to use [Vue CLI](https://cli.vuejs.org/): +(For issues with Vue 3.13 and CLI 4 check [here](https://github.com/vuejs/vue-next/issues/4052)) + ```shell $ npm install -g @vue/cli # OR From b31edb02ff374a9b8a4af18769d8ca276804f11d Mon Sep 17 00:00:00 2001 From: Dennis F <922751+spinn@users.noreply.github.com> Date: Mon, 26 Jul 2021 11:13:44 +0200 Subject: [PATCH 02/80] Set answered property automatically on pre-filled forms --- src/models/QuestionModel.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/models/QuestionModel.js b/src/models/QuestionModel.js index 0b988346..467187b3 100644 --- a/src/models/QuestionModel.js +++ b/src/models/QuestionModel.js @@ -132,6 +132,14 @@ export default class QuestionModel { this.answer = this.answer ? [this.answer] : [] } + // Check if we have an answer already (when we have a pre-filled form) + // and set the answered property accordingly + if (!this.required && typeof options.answer !== 'undefined') { + this.answered = true + } else if (this.answer && (!this.multiple || this.answer.length)) { + this.answered = true + } + this.resetOptions() } From 93bad194fc77722b424383a5080e345f9d4aaf10 Mon Sep 17 00:00:00 2001 From: Dennis F <922751+spinn@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:48:21 +0200 Subject: [PATCH 03/80] Add new "autofocus" prop --- src/components/FlowForm.vue | 9 +++++++-- src/components/FlowFormQuestion.vue | 8 ++++++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/FlowForm.vue b/src/components/FlowForm.vue index da7bab85..809fadfe 100644 --- a/src/components/FlowForm.vue +++ b/src/components/FlowForm.vue @@ -16,6 +16,7 @@ v-bind:reverse="reverse" v-bind:disabled="disabled" v-on:disable="setDisabled" + v-bind:autofocus="autofocus" /> @@ -170,7 +171,11 @@ default: false }, timerStartStep: [String, Number], - timerStopStep: [String, Number] + timerStopStep: [String, Number], + autofocus: { + type: Boolean, + default: true + } }, mixins: [ @@ -634,7 +639,7 @@ const q = this.activeQuestionComponent() if (q) { - q.focusField() + this.autofocus && q.focusField() this.activeQuestionIndex = q.question.index } else if (this.isOnLastStep) { // No more questions left - set "completed" to true diff --git a/src/components/FlowFormQuestion.vue b/src/components/FlowFormQuestion.vue index ce1dc12e..660630a0 100644 --- a/src/components/FlowFormQuestion.vue +++ b/src/components/FlowFormQuestion.vue @@ -150,6 +150,10 @@ disabled: { type: Boolean, default: false + }, + autofocus: { + type: Boolean, + default: true } }, @@ -166,7 +170,7 @@ }, mounted() { - this.focusField() + this.autofocus && this.focusField() this.dataValue = this.question.answer @@ -188,7 +192,7 @@ }, onAnimationEnd() { - this.focusField() + this.autofocus && this.focusField() }, shouldFocus() { From d3a64f00a22ee863caf4fa36b14b63bb53ed0f45 Mon Sep 17 00:00:00 2001 From: Henrik Date: Tue, 17 Aug 2021 10:58:45 +0200 Subject: [PATCH 04/80] fix options check make sure to check if options exists before checking answer --- src/models/QuestionModel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/models/QuestionModel.js b/src/models/QuestionModel.js index 467187b3..c294e378 100644 --- a/src/models/QuestionModel.js +++ b/src/models/QuestionModel.js @@ -134,7 +134,7 @@ export default class QuestionModel { // Check if we have an answer already (when we have a pre-filled form) // and set the answered property accordingly - if (!this.required && typeof options.answer !== 'undefined') { + if (!this.required && options && typeof options.answer !== 'undefined') { this.answered = true } else if (this.answer && (!this.multiple || this.answer.length)) { this.answered = true From 8032614f5fc1e97158fd41859fecae7a084b0320 Mon Sep 17 00:00:00 2001 From: Dennis F <922751+spinn@users.noreply.github.com> Date: Tue, 24 Aug 2021 15:39:27 +0200 Subject: [PATCH 05/80] Make sure the options variable is an object --- src/models/QuestionModel.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/models/QuestionModel.js b/src/models/QuestionModel.js index c294e378..84b68df3 100644 --- a/src/models/QuestionModel.js +++ b/src/models/QuestionModel.js @@ -76,6 +76,9 @@ export class LinkOption { export default class QuestionModel { constructor(options) { + // Make sure the options variable is an object + options = options || {} + this.id = null this.answer = null this.answered = false @@ -134,7 +137,7 @@ export default class QuestionModel { // Check if we have an answer already (when we have a pre-filled form) // and set the answered property accordingly - if (!this.required && options && typeof options.answer !== 'undefined') { + if (!this.required && typeof options.answer !== 'undefined') { this.answered = true } else if (this.answer && (!this.multiple || this.answer.length)) { this.answered = true From 2e1481b2b3196f7421d6fb75088b6205affe4870 Mon Sep 17 00:00:00 2001 From: Dennis F <922751+spinn@users.noreply.github.com> Date: Tue, 24 Aug 2021 15:47:33 +0200 Subject: [PATCH 06/80] Remove unnecessary variable assignment --- src/components/QuestionTypes/UrlType.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/QuestionTypes/UrlType.vue b/src/components/QuestionTypes/UrlType.vue index 221ec624..23a4fca9 100644 --- a/src/components/QuestionTypes/UrlType.vue +++ b/src/components/QuestionTypes/UrlType.vue @@ -30,7 +30,7 @@ validate() { if (this.hasValue) { try { - var url = new URL(this.fixAnswer(this.dataValue)) + new URL(this.fixAnswer(this.dataValue)) return true } catch(_) { From 99d503c45cf0ecf67175837c42061190f817884d Mon Sep 17 00:00:00 2001 From: Dennis F <922751+spinn@users.noreply.github.com> Date: Tue, 24 Aug 2021 15:56:06 +0200 Subject: [PATCH 07/80] Make code style more consistent --- src/components/FlowForm.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/FlowForm.vue b/src/components/FlowForm.vue index 809fadfe..3d2ba868 100644 --- a/src/components/FlowForm.vue +++ b/src/components/FlowForm.vue @@ -718,8 +718,7 @@ } --index - } - while (index > 0) + } while (index > 0) this.reverse = index < this.activeQuestionIndex this.activeQuestionIndex = index From 8341b69ba223131950a3c1709e165f831e59ddcc Mon Sep 17 00:00:00 2001 From: Dennis F <922751+spinn@users.noreply.github.com> Date: Tue, 24 Aug 2021 16:05:18 +0200 Subject: [PATCH 08/80] Improve goToQuestion method --- src/components/FlowForm.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/FlowForm.vue b/src/components/FlowForm.vue index 3d2ba868..4ee11264 100644 --- a/src/components/FlowForm.vue +++ b/src/components/FlowForm.vue @@ -702,7 +702,7 @@ } }) - index = questionIndex; + index = questionIndex } if (index !== this.activeQuestionIndex) { @@ -711,9 +711,13 @@ if (!this.submitted && index <= this.questionListActivePath.length - 1) { // Check if we can actually jump to the wanted question. do { - const previousQuestion = index > 0 ? this.questionListActivePath[index - 1] : null + const previousQuestionsAnswered = + this + .questionListActivePath + .slice(0, index) + .every(q => q.answered) - if (previousQuestion === null || previousQuestion.answered) { + if (previousQuestionsAnswered) { break } From 2a22e0a1dcd3b7f0d8e8040021f5f5c5192f8739 Mon Sep 17 00:00:00 2001 From: Dennis F <922751+spinn@users.noreply.github.com> Date: Fri, 24 Sep 2021 16:18:44 +0200 Subject: [PATCH 09/80] Fix issue with optional LongTextType on mobile --- src/components/QuestionTypes/LongTextType.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/QuestionTypes/LongTextType.vue b/src/components/QuestionTypes/LongTextType.vue index 5cfadc2b..efb2873d 100644 --- a/src/components/QuestionTypes/LongTextType.vue +++ b/src/components/QuestionTypes/LongTextType.vue @@ -70,8 +70,10 @@ }, onEnter() { - if (!this.isMobile) { - this._onEnter() + this._onEnter() + + if (this.isMobile) { + this.focus() } } } From 361b2010024165945872f83504aa23cbf82c4b02 Mon Sep 17 00:00:00 2001 From: EkaterinaVu Date: Thu, 7 Oct 2021 13:11:34 +0200 Subject: [PATCH 10/80] Add matrix field type --- examples/questionnaire/Example.vue | 48 ++++++++++++ src/components/FlowFormQuestion.vue | 4 +- src/components/QuestionTypes/MatrixType.vue | 86 +++++++++++++++++++++ src/models/QuestionModel.js | 7 +- 4 files changed, 142 insertions(+), 3 deletions(-) create mode 100644 src/components/QuestionTypes/MatrixType.vue diff --git a/examples/questionnaire/Example.vue b/examples/questionnaire/Example.vue index 506f48c9..0fa3e300 100644 --- a/examples/questionnaire/Example.vue +++ b/examples/questionnaire/Example.vue @@ -89,6 +89,54 @@ language: new LanguageModel(), // Create question list with QuestionModel instances questions: [ + new QuestionModel({ + id: 'matrix', + title: 'Matrix question:', + type: QuestionType.Matrix, + multiple: false, + helpText: 'Select options. 👇', + required: false, + columns: [ + new ChoiceOption({ + value: "1", + label: "Strongly Disagree" + }), + new ChoiceOption({ + value: "2", + label: "Disagree" + }), + new ChoiceOption({ + value: "3", + label: "Neutral" + }), + new ChoiceOption({ + value: "4", + label: "Agree" + }), + new ChoiceOption({ + value: "5", + label: "Strongly agree" + }) + ], + rows: [ + new ChoiceOption({ + value: "affordable", + label: "Product is affordable" + }), + new ChoiceOption({ + value: "does what it claims", + label: "Product does what it claims" + }), + new ChoiceOption({ + value: "better then others", + label: "Product is better than other products on the market" + }), + new ChoiceOption({ + value: "easy to use", + label: "Product is easy to use" + }) + ] + }), new QuestionModel({ id: 'first_name', tagline: 'Hi! Welcome to our demo survey 😊', diff --git a/src/components/FlowFormQuestion.vue b/src/components/FlowFormQuestion.vue index 660630a0..101bd2aa 100644 --- a/src/components/FlowFormQuestion.vue +++ b/src/components/FlowFormQuestion.vue @@ -113,6 +113,7 @@ import FlowFormUrlType from './QuestionTypes/UrlType.vue' import FlowFormDateType from './QuestionTypes/DateType.vue' import FlowFormFileType from './QuestionTypes/FileType.vue' + import FlowFormMatrixType from './QuestionTypes/MatrixType.vue' import { IsMobile } from '../mixins/IsMobile' @@ -132,7 +133,8 @@ FlowFormSectionBreakType, FlowFormTextType, FlowFormFileType, - FlowFormUrlType + FlowFormUrlType, + FlowFormMatrixType }, props: { diff --git a/src/components/QuestionTypes/MatrixType.vue b/src/components/QuestionTypes/MatrixType.vue new file mode 100644 index 00000000..861aff99 --- /dev/null +++ b/src/components/QuestionTypes/MatrixType.vue @@ -0,0 +1,86 @@ + + + diff --git a/src/models/QuestionModel.js b/src/models/QuestionModel.js index 84b68df3..ad5123eb 100644 --- a/src/models/QuestionModel.js +++ b/src/models/QuestionModel.js @@ -19,7 +19,8 @@ export const QuestionType = Object.freeze({ Phone: 'FlowFormPhoneType', SectionBreak: 'FlowFormSectionBreakType', Text: 'FlowFormTextType', - Url: 'FlowFormUrlType' + Url: 'FlowFormUrlType', + Matrix: 'FlowFormMatrixType' }) export const DropdownOptionBlank = Object.freeze({ @@ -109,7 +110,9 @@ export default class QuestionModel { this.maxLength = null this.nextStepOnAnswer = false this.accept = null - this.maxSize = null + this.maxSize = null, + this.rows = [], + this.columns = [] Object.assign(this, options) From 6a990a703a64542867ce971026d1cda7fda5d396 Mon Sep 17 00:00:00 2001 From: Nikola P Date: Thu, 7 Oct 2021 13:11:39 +0200 Subject: [PATCH 11/80] Code style fixes --- src/assets/css/common.css | 86 ++++++++++++------------- src/assets/css/themes/theme-green.css | 36 +++++------ src/assets/css/themes/theme-minimal.css | 62 +++++++++--------- src/assets/css/themes/theme-purple.css | 48 +++++++------- 4 files changed, 116 insertions(+), 116 deletions(-) diff --git a/src/assets/css/common.css b/src/assets/css/common.css index c2add73d..6837699d 100644 --- a/src/assets/css/common.css +++ b/src/assets/css/common.css @@ -14,7 +14,7 @@ -o-font-smoothing: antialiased; } -@media screen and (max-width:1023px){ +@media screen and (max-width:1023px) { .vff, .vff-footer { font-size: 15px; @@ -48,7 +48,7 @@ global */ -.vff hr{ +.vff hr { box-sizing: content-box; overflow: visible; height: 0; @@ -112,7 +112,7 @@ margin-bottom: 22px; } -/*utils*/ +/* utils */ .vff .text-thin { font-weight: 300; } @@ -154,11 +154,11 @@ box-sizing: border-box; } -header.vff-header + .vff{ +header.vff-header + .vff { margin-top: 16vh; } -header.vff-header + .vff.vff-not-standalone{ +header.vff-header + .vff.vff-not-standalone { margin-top: 0; } @@ -189,7 +189,7 @@ header.vff-header + .vff.vff-not-standalone{ margin-bottom: 20px; } -/*container*/ +/* container */ .vff .f-container, header.vff-header .f-container{ padding: 0 8%; @@ -201,7 +201,7 @@ header.vff-header .f-container{ margin-bottom: 1em; } -/*header*/ +/* header */ header.vff-header { line-height: 1; padding: .9em 10% .8em; @@ -283,7 +283,7 @@ header.vff-header svg.f-logo { font-weight: 900; } -.vff input[type=file]:focus{ +.vff input[type=file]:focus { outline: 1px dotted #000; outline-offset: 4px; } @@ -316,11 +316,11 @@ header.vff-header svg.f-logo { background-color: #efefef; } -.vff input[type=file]::-webkit-file-upload-button:active{ +.vff input[type=file]::-webkit-file-upload-button:active { color: #000; } -.vff input[type=file]::file-selector-button{ +.vff input[type=file]::file-selector-button { min-height: 44px; display: inline-block; white-space: pre-wrap; @@ -332,7 +332,7 @@ header.vff-header svg.f-logo { min-width: 90px; } -/*buttons*/ +/* buttons */ .vff button, .vff [type="button"], .vff [type="reset"], @@ -342,7 +342,7 @@ header.vff-header svg.f-logo { overflow: visible; } -/*default button*/ +/* default button */ .vff button { border: none; outline: 0; @@ -448,21 +448,21 @@ header.vff-header svg.f-logo { .vff .f-full-width input[type=date], .vff .f-full-width input[type=file], .vff .f-full-width textarea, -.vff .f-full-width span.faux-form{ +.vff .f-full-width span.faux-form { width: 100%; padding-left: .16em; padding-right: .16em; } .vff .f-required { - display: none; /*hides required asterisks*/ + display: none; /* hides required asterisks */ } .vff .f-answer.f-full-width { margin-top: 26px; } -.vff span.f-sub + .f-answer.f-full-width{ +.vff span.f-sub + .f-answer.f-full-width { margin-top: 22px; } @@ -478,11 +478,11 @@ header.vff-header svg.f-logo { padding-bottom: 4px; } -.vff span.f-answered{ +.vff span.f-answered { font-weight: 900; } -/*faux select arrow*/ +/* faux select arrow */ .vff .f-arrow-down { display: inline-block; margin-left: .2em; @@ -578,11 +578,11 @@ header.vff-header svg.f-logo { .vff .fh1, .vff .fh2, -.vff .fh3{ +.vff .fh3 { display: block; } -/*misc-typography*/ +/* misc-typography */ .vff span.f-tagline, .vff span.f-sub { font-weight: 400; @@ -590,7 +590,7 @@ header.vff-header svg.f-logo { } .vff .fh2 span.f-tagline, -.vff .fh2 span.f-sub{ +.vff .fh2 span.f-sub { font-size: .51em; } @@ -608,7 +608,7 @@ header.vff-header svg.f-logo { margin-right: .4em; } -.vff span.f-sub span.f-help{ +.vff span.f-sub span.f-help { display: block; } @@ -620,7 +620,7 @@ header.vff-header svg.f-logo { margin-right: .6em; } -/*description*/ +/* description */ .vff p.f-description { margin-top: 0; padding-right: 4em; @@ -677,7 +677,7 @@ header.vff-header svg.f-logo { font-size: .4em; } -.vff ul.f-radios li div.f-label-wrap{ +.vff ul.f-radios li div.f-label-wrap { display: -ms-flexbox; display: flex; width: 100%; @@ -696,7 +696,7 @@ header.vff-header svg.f-logo { f-radios (multiple picture choice) */ -.vff .field-multiplepicturechoice ul.f-radios{ +.vff .field-multiplepicturechoice ul.f-radios { max-width: 750px; min-width: auto; display: -ms-flexbox; @@ -708,7 +708,7 @@ header.vff-header svg.f-logo { flex-wrap: wrap; } -.vff .field-multiplepicturechoice ul.f-radios li{ +.vff .field-multiplepicturechoice ul.f-radios li { position: relative; cursor: pointer; display: -ms-flexbox; @@ -725,7 +725,7 @@ header.vff-header svg.f-logo { line-height: 1.38; } -.vff .field-multiplepicturechoice ul.f-radios li span.f-image{ +.vff .field-multiplepicturechoice ul.f-radios li span.f-image { display: flex; display: -ms-flexbox; -moz-box-align: center; @@ -738,7 +738,7 @@ header.vff-header svg.f-logo { margin-bottom: 8px; } -.vff .field-multiplepicturechoice ul.f-radios li span.f-image img{ +.vff .field-multiplepicturechoice ul.f-radios li span.f-image img { margin-bottom: 0; max-height: 100%; max-width: 100%; @@ -838,7 +838,7 @@ header.vff-header svg.f-logo { not-standalone option */ -.vff.vff-not-standalone{ +.vff.vff-not-standalone { height: 100%; margin-top: 0; margin-bottom: 0; @@ -846,11 +846,11 @@ header.vff-header svg.f-logo { padding-bottom: 100px; } -.vff.vff-not-standalone .f-container{ +.vff.vff-not-standalone .f-container { margin: 0; } -.vff.vff-not-standalone .vff-footer{ +.vff.vff-not-standalone .vff-footer { position: absolute; bottom: 0; width: 100%; @@ -984,7 +984,7 @@ header.vff-header svg.f-logo { .vff input[type=password], .vff input[type=date], .vff input[type=file], - .vff textarea{ + .vff textarea { font-size: .78em; } @@ -993,12 +993,12 @@ header.vff-header svg.f-logo { } .vff .fh2 span.f-sub, - .vff .fh2 span.f-tagline{ + .vff .fh2 span.f-tagline { font-size: .58em; } .vff .f-container, - header.vff-header .f-container{ + header.vff-header .f-container { padding: 0 5.5%; } @@ -1007,15 +1007,15 @@ header.vff-header svg.f-logo { padding-right: 20px; } - .vff p.f-description{ + .vff p.f-description { padding-right: 0; } - .vff .field-multiplepicturechoice ul.f-radios li{ + .vff .field-multiplepicturechoice ul.f-radios li { font-size: 14px; } - .vff .field-multiplepicturechoice ul.f-radios li span.f-image{ + .vff .field-multiplepicturechoice ul.f-radios li span.f-image { height: 90px; } @@ -1027,11 +1027,11 @@ header.vff-header svg.f-logo { min-height: 180px; } - header.vff-header + .vff{ + header.vff-header + .vff { margin-top: 8vh; } - header.vff-header + .vff.vff-not-standalone{ + header.vff-header + .vff.vff-not-standalone { margin-top: 0; } @@ -1075,7 +1075,7 @@ header.vff-header svg.f-logo { line-height: 1.5; } - .vff span.f-text{ + .vff span.f-text { margin-right: 0; } @@ -1101,7 +1101,7 @@ header.vff-header svg.f-logo { max-width: 320px; } - .vff .field-multiplepicturechoice ul.f-radios li{ + .vff .field-multiplepicturechoice ul.f-radios li { -ms-flex: 0 0 calc(50% - 8px); flex: 0 0 calc(50% - 8px); } @@ -1118,7 +1118,7 @@ header.vff-header svg.f-logo { position: static; } - .vff-footer{ + .vff-footer { font-size: 15px; } @@ -1143,8 +1143,8 @@ header.vff-header svg.f-logo { font-size: .6em; } - .vff .field-multiplepicturechoice ul.f-radios li span.f-image{ + .vff .field-multiplepicturechoice ul.f-radios li span.f-image { height: 90px; } -} \ No newline at end of file +} diff --git a/src/assets/css/themes/theme-green.css b/src/assets/css/themes/theme-green.css index 99c64abb..49d75bba 100644 --- a/src/assets/css/themes/theme-green.css +++ b/src/assets/css/themes/theme-green.css @@ -24,26 +24,26 @@ .vff select option, .vff kbd, .vff-header, -.vff-footer{ +.vff-footer { font-family: 'Poppins', sans-serif; } body { - /*override if needed when using not-standalone option*/ + /* override if needed when using not-standalone option */ margin: 0; background-color: var(--vff-bg-color); } -.vff{ +.vff { color: var(--vff-main-text-color); } -.vff.vff-not-standalone{ +.vff.vff-not-standalone { background-color: var(--vff-bg-color); color: var(--vff-main-text-color); } -/*header*/ +/* header */ header.vff-header { background-color: transparent; } @@ -80,7 +80,7 @@ header.vff-header svg.f-logo { color: var(--vff-main-text-color); } -/*placeholder*/ +/* placeholder */ .vff ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--vff-secondary-text-color); opacity: 1; @@ -105,14 +105,14 @@ header.vff-header svg.f-logo { font-weight: 300; } -/*faux input type date placeholder for iOS*/ -.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before{ +/* faux input type date placeholder for iOS */ +.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before { color: var(--vff-secondary-text-color); font-weight: 300; font-size: .72em; } -/*field-multiplechoice*/ +/* field-multiplechoice */ .vff ul.f-radios li { border: 1px solid var(--vff-secondary-text-color); font-weight: 900; @@ -130,12 +130,12 @@ header.vff-header svg.f-logo { background-color: var(--vff-tertiary-text-color); } -.vff .f-key{ +.vff .f-key { color: var(--vff-secondary-accent-color); font-weight: 300; } -/*field-dropdown*/ +/* field-dropdown */ .vff span.f-empty { color: var(--vff-secondary-text-color); } @@ -148,7 +148,7 @@ header.vff-header svg.f-logo { fill: var(--vff-main-text-color); } -/*buttons*/ +/* buttons */ .vff .o-btn-action { color: var(--vff-bg-color); background-color: var(--vff-main-text-color); @@ -183,7 +183,7 @@ header.vff-header svg.f-logo { background-color: rgba(0,0,0,0.07); } -/*text-muted*/ +/* text-muted */ .vff span.f-tagline, .vff span.f-sub, .vff p.f-description, @@ -230,7 +230,7 @@ header.vff-header svg.f-logo { filter: invert(100%); } - .vff span.f-answered{ + .vff span.f-answered { color: var(--vff-main-accent-color); } @@ -238,11 +238,11 @@ header.vff-header svg.f-logo { fill: var(--vff-main-accent-color); } - .vff .text-success{ + .vff .text-success { color: var(--vff-main-accent-color); } - /*footer*/ + /* footer */ .vff-footer .footer-inner-wrap { background-color: var(--vff-bg-color); } @@ -275,7 +275,7 @@ header.vff-header svg.f-logo { background-color: var(--vff-main-accent-color); } - /*field-multiplechoice*/ + /* field-multiplechoice */ .vff ul.f-radios li { color: var(--vff-secondary-text-color); } @@ -285,4 +285,4 @@ header.vff-header svg.f-logo { font-weight: 300; } -} \ No newline at end of file +} diff --git a/src/assets/css/themes/theme-minimal.css b/src/assets/css/themes/theme-minimal.css index d59ee0d8..99321a84 100644 --- a/src/assets/css/themes/theme-minimal.css +++ b/src/assets/css/themes/theme-minimal.css @@ -24,30 +24,30 @@ .vff select option, .vff kbd, .vff-header, -.vff-footer{ +.vff-footer { font-family: 'Poppins', sans-serif; } body { - /*override if needed when using not-standalone option*/ + /* override if needed when using not-standalone option */ margin: 0; background-color: var(--vff-bg-color); } -.vff{ +.vff { color: var(--vff-main-text-color); } -.vff.vff-not-standalone{ +.vff.vff-not-standalone { background-color: var(--vff-bg-color); color: var(--vff-main-text-color); } -header.vff-header{ +header.vff-header { background-color: var(--vff-secondary-accent-color); } -header.vff-header svg.f-logo{ +header.vff-header svg.f-logo { fill: rgba(0,0,0,0.9); } @@ -74,7 +74,7 @@ header.vff-header svg.f-logo{ color: var(--vff-main-text-color); } -/*placeholder*/ +/* placeholder */ .vff ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--vff-secondary-text-color); opacity: 1; @@ -99,14 +99,14 @@ header.vff-header svg.f-logo{ font-weight: 300; } -/*faux input type date placeholder for iOS*/ -.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before{ +/* faux input type date placeholder for iOS */ +.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before { color: var(--vff-secondary-text-color); font-weight: 300; font-size: .72em; } -/*field-multiplechoice*/ +/* field-multiplechoice */ .vff ul.f-radios li { border: 1px solid var(--vff-secondary-text-color); } @@ -125,12 +125,12 @@ header.vff-header svg.f-logo{ color: var(--vff-secondary-text-color); } -/*field-dropdown*/ +/* field-dropdown */ .vff span.f-empty { color: var(--vff-secondary-text-color); } -.vff span.f-answered{ +.vff span.f-answered { color: var(--vff-main-text-color); } @@ -138,7 +138,7 @@ header.vff-header svg.f-logo{ fill: var(--vff-main-text-color); } -/*buttons*/ +/* buttons */ .vff .o-btn-action { color: var(--vff-bg-color); background-color: var(--vff-main-text-color); @@ -150,8 +150,8 @@ header.vff-header svg.f-logo{ opacity: .9; } -/*footer*/ -.vff-footer .footer-inner-wrap{ +/* footer */ +.vff-footer .footer-inner-wrap { background-color: rgba(255,255,255,0.75); } @@ -183,21 +183,21 @@ header.vff-header svg.f-logo{ .vff-footer .f-prev:hover, .vff-footer .f-next:hover, .vff-footer .f-prev:focus, -.vff-footer .f-next:focus{ +.vff-footer .f-next:focus { background-color: rgba(0,0,0,0.07); } -/*alerts*/ +/* alerts */ .vff .text-alert, -.vff .f-invalid{ +.vff .f-invalid { color: #F5554A; } -.vff .text-success{ +.vff .text-success { color: #4CAF50; } -/*text-muted*/ +/* text-muted */ .vff span.f-tagline, .vff span.f-sub, .vff p.f-description, @@ -219,11 +219,11 @@ header.vff-header svg.f-logo{ --vff-secondary-accent-color: #A0DBC1; } - header.vff-header{ + header.vff-header { background-color: #313640; } - header.vff-header svg.f-logo{ + header.vff-header svg.f-logo { fill: var(--vff-main-accent-color); } @@ -237,7 +237,7 @@ header.vff-header svg.f-logo{ filter: invert(100%); } - .vff span.f-answered{ + .vff span.f-answered { color: var(--vff-main-accent-color); } @@ -245,12 +245,12 @@ header.vff-header svg.f-logo{ fill: var(--vff-main-accent-color); } - .vff .text-success{ + .vff .text-success { color: var(--vff-main-accent-color); } - /*footer*/ - .vff-footer .footer-inner-wrap{ + /* footer */ + .vff-footer .footer-inner-wrap { background-color: rgba(49,54,64,0.75); } @@ -265,7 +265,7 @@ header.vff-header svg.f-logo{ } .vff-footer .f-prev:hover, - .vff-footer .f-next:hover{ + .vff-footer .f-next:hover { background-color: rgba(0,0,0,0.2); } @@ -278,19 +278,19 @@ header.vff-header svg.f-logo{ background-color: var(--vff-main-accent-color); } - /*field-multiplechoice*/ + /* field-multiplechoice */ .vff ul.f-radios li.f-selected{ color: var(--vff-main-accent-color); } - .vff ul.f-radios li{ + .vff ul.f-radios li { font-weight: 900; color: var(--vff-secondary-text-color); } - .vff .f-key{ + .vff .f-key { font-weight: 400; color: var(--vff-main-accent-color); } -} \ No newline at end of file +} diff --git a/src/assets/css/themes/theme-purple.css b/src/assets/css/themes/theme-purple.css index 5b7efef3..fb39c3a2 100644 --- a/src/assets/css/themes/theme-purple.css +++ b/src/assets/css/themes/theme-purple.css @@ -38,32 +38,32 @@ .vff select option, .vff kbd, .vff-header, -.vff-footer{ +.vff-footer { font-family: 'Poppins', sans-serif; } body { - /*override if needed when using not-standalone option*/ + /* override if needed when using not-standalone option */ margin: 0; background-color: var(--vff-bg-color); } -.vff{ +.vff { color: var(--vff-main-text-color); } -.vff.vff-not-standalone{ +.vff.vff-not-standalone { background-color: var(--vff-bg-color); color: var(--vff-main-text-color); } -header.vff-header{ +header.vff-header { background-color: var(--vff-header-color); border-bottom: 2px solid var(--vff-header-border-color); padding-bottom: .6em; } -header.vff-header svg.f-logo{ +header.vff-header svg.f-logo { fill: var(--vff-main-text-color); } @@ -90,7 +90,7 @@ header.vff-header svg.f-logo{ color: var(--vff-main-text-color); } -/*placeholder*/ +/* placeholder */ .vff ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--vff-secondary-text-color); opacity: 1; @@ -115,14 +115,14 @@ header.vff-header svg.f-logo{ font-weight: 300; } -/*faux input type date placeholder for iOS*/ +/* faux input type date placeholder for iOS */ .vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before{ color: var(--vff-secondary-text-color); font-weight: 300; font-size: .72em; } -/*field-multiplechoice*/ +/* field-multiplechoice */ .vff ul.f-radios li { border: 1px solid var(--vff-secondary-form-bg-color); background-color: var(--vff-main-form-bg-color); @@ -139,16 +139,16 @@ header.vff-header svg.f-logo{ color: inherit; } -.vff .f-key{ +.vff .f-key { color: var(--vff-field-key-color); } -/*field-dropdown*/ +/* field-dropdown */ .vff span.f-empty { color: var(--vff-secondary-text-color); } -.vff span.f-answered{ +.vff span.f-answered { color: var(--vff-main-text-color); } @@ -156,7 +156,7 @@ header.vff-header svg.f-logo{ fill: var(--vff-arrow-color); } -/*buttons*/ +/* buttons */ .vff .o-btn-action { color: var(--vff-button-text-color); background-color: var(--vff-button-color); @@ -168,8 +168,8 @@ header.vff-header svg.f-logo{ opacity: .9; } -/*footer*/ -.vff-footer .footer-inner-wrap{ +/* footer */ +.vff-footer .footer-inner-wrap { background-color: var(--vff-footer-color); } @@ -199,21 +199,21 @@ header.vff-header svg.f-logo{ } .vff-footer .f-prev:hover, -.vff-footer .f-next:hover{ +.vff-footer .f-next:hover { background-color: var(--vff-arrow-hover-color); } -/*alerts*/ +/* alerts */ .vff .text-alert, -.vff .f-invalid{ +.vff .f-invalid { color: #F5554A; } -.vff .text-success{ +.vff .text-success { color: var(--vff-main-accent-color); } -/*text-muted*/ +/* text-muted */ .vff span.f-tagline, .vff span.f-sub, .vff p.f-description, @@ -243,7 +243,7 @@ header.vff-header svg.f-logo{ --vff-progress-bar-color: var(--vff-main-accent-color); } - .vff span.f-answered{ + .vff span.f-answered { color: var(--vff-main-accent-color); } @@ -251,7 +251,7 @@ header.vff-header svg.f-logo{ filter: invert(100%); } - /*footer*/ + /* footer */ .vff-footer .f-prev.f-disabled svg, .vff-footer .f-next.f-disabled svg { fill: var(--vff-main-text-color); @@ -261,11 +261,11 @@ header.vff-header svg.f-logo{ filter: brightness(1); } - .vff-footer .footer-inner-wrap{ + .vff-footer .footer-inner-wrap { background-color: rgba(44,62,80,0.8); } - /*field-multiplechoice*/ + /* field-multiplechoice */ .vff .f-key { font-weight: 400; } From 739b4585101dbff2035240c9982f08969a99119f Mon Sep 17 00:00:00 2001 From: EkaterinaVu Date: Thu, 7 Oct 2021 15:12:33 +0200 Subject: [PATCH 12/80] Add basic matrix styles --- examples/questionnaire/Example.vue | 24 +++--- src/assets/css/common.css | 91 ++++++++++++++++++++- src/components/QuestionTypes/MatrixType.vue | 31 +++---- 3 files changed, 115 insertions(+), 31 deletions(-) diff --git a/examples/questionnaire/Example.vue b/examples/questionnaire/Example.vue index 0fa3e300..c1c156e7 100644 --- a/examples/questionnaire/Example.vue +++ b/examples/questionnaire/Example.vue @@ -99,11 +99,11 @@ columns: [ new ChoiceOption({ value: "1", - label: "Strongly Disagree" + label: "Very dissatisfied" }), new ChoiceOption({ value: "2", - label: "Disagree" + label: "Dissatisfied" }), new ChoiceOption({ value: "3", @@ -111,29 +111,29 @@ }), new ChoiceOption({ value: "4", - label: "Agree" + label: "Satisfied" }), new ChoiceOption({ value: "5", - label: "Strongly agree" + label: "Very satisfied" }) ], rows: [ new ChoiceOption({ - value: "affordable", - label: "Product is affordable" + value: "product 1", + label: "Product 1" }), new ChoiceOption({ - value: "does what it claims", - label: "Product does what it claims" + value: "product 2", + label: "Product 2" }), new ChoiceOption({ - value: "better then others", - label: "Product is better than other products on the market" + value: "product 3", + label: "Product 3" }), new ChoiceOption({ - value: "easy to use", - label: "Product is easy to use" + value: "product 4", + label: "Product 4" }) ] }), diff --git a/src/assets/css/common.css b/src/assets/css/common.css index c2add73d..5f194ad8 100644 --- a/src/assets/css/common.css +++ b/src/assets/css/common.css @@ -1147,4 +1147,93 @@ header.vff-header svg.f-logo { height: 90px; } -} \ No newline at end of file +} + +.vff .f-matrix-wrap { + overflow-x: auto; +} + +.vff .f-matrix-fieldset { + border: none; + padding: 0; + margin: 0; +} + +.vff .f-matrix-table { + width: 100%; + background-color: #efefef; + border-collapse: separate; + border-spacing: 0; + font-size: .52em; + line-height: normal; + font-weight: normal; +} + + +.vff .f-table tr:first-child .f-table-cell { + padding-top: 1.875em; +} +.vff .f-table td:first-child, +.vff .f-table th:first-child { + padding-left: 1.875em; +} + +.vff .f-table-cell { + padding: 0.9375em 1em; + min-width: 10em; + text-align: left; +} + +.vff .f-header-cell { + font-weight: 900; + text-align: center; +} + +.vff .f-matrix-cell{ + text-align: center; +} + +.vff .f-field-mask { + position: relative; + display: inline-block; + border: solid 1px transparent; +} + +.vff .f-radio-mask { + border-radius: 100%; + cursor: pointer; + width: 1.5em; + height: 1.5em; +} + +.vff .f-field-svg { + position: absolute; + display: inline-block; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.vff .f-radio-svg { + color: #999; + border: 3px solid currentColor; + border-radius: 100%; + fill: transparent; + width: 100%; + height: 100%; + transition: color 0.4s ease 0s; +} + +.vff .f-radio-svg circle { + fill: inherit; +} + +.vff .f-radio-control:hover ~ .f-radio-mask .f-radio-svg { + fill: #999; +} + +.vff .f-radio-control:checked ~ .f-radio-mask .f-radio-svg { + color: #181818; + fill: currentColor; +} + diff --git a/src/components/QuestionTypes/MatrixType.vue b/src/components/QuestionTypes/MatrixType.vue index 861aff99..528eeff1 100644 --- a/src/components/QuestionTypes/MatrixType.vue +++ b/src/components/QuestionTypes/MatrixType.vue @@ -1,8 +1,8 @@ diff --git a/src/models/QuestionModel.js b/src/models/QuestionModel.js index ad5123eb..42196743 100644 --- a/src/models/QuestionModel.js +++ b/src/models/QuestionModel.js @@ -75,6 +75,24 @@ export class LinkOption { } } +export class MatrixColumn { + constructor(options) { + this.value = '' + this.label = '' + + Object.assign(this, options) + } +} + +export class MatrixRow { + constructor(options) { + this.name = '' + this.label = '' + + Object.assign(this, options) + } +} + export default class QuestionModel { constructor(options) { // Make sure the options variable is an object From 419cf87b219ee049005277b74a21a7095571d6f1 Mon Sep 17 00:00:00 2001 From: EkaterinaVu Date: Fri, 8 Oct 2021 10:55:06 +0200 Subject: [PATCH 16/80] Add update selected value function --- src/components/QuestionTypes/MatrixType.vue | 28 +++++++++++++++------ src/models/QuestionModel.js | 2 +- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/components/QuestionTypes/MatrixType.vue b/src/components/QuestionTypes/MatrixType.vue index d05dfbca..7214aa13 100644 --- a/src/components/QuestionTypes/MatrixType.vue +++ b/src/components/QuestionTypes/MatrixType.vue @@ -37,11 +37,12 @@ > diff --git a/src/models/QuestionModel.js b/src/models/QuestionModel.js index 42196743..c69b43d2 100644 --- a/src/models/QuestionModel.js +++ b/src/models/QuestionModel.js @@ -86,7 +86,7 @@ export class MatrixColumn { export class MatrixRow { constructor(options) { - this.name = '' + this.id = '' this.label = '' Object.assign(this, options) From 636da2fadd23342c90b58a5149c8f023347d6a2d Mon Sep 17 00:00:00 2001 From: EkaterinaVu Date: Fri, 8 Oct 2021 19:37:23 +0200 Subject: [PATCH 17/80] Add v-model to radio inputs --- src/components/QuestionTypes/MatrixType.vue | 34 +++++++++++++-------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/src/components/QuestionTypes/MatrixType.vue b/src/components/QuestionTypes/MatrixType.vue index 7214aa13..e54dd681 100644 --- a/src/components/QuestionTypes/MatrixType.vue +++ b/src/components/QuestionTypes/MatrixType.vue @@ -1,5 +1,5 @@
+
+ > Date: Mon, 11 Oct 2021 12:37:44 +0200 Subject: [PATCH 18/80] Add theme specific styles --- src/assets/css/common.css | 176 +++++++++----------- src/assets/css/themes/theme-green.css | 46 +++++ src/assets/css/themes/theme-minimal.css | 51 ++++++ src/assets/css/themes/theme-purple.css | 46 +++++ src/components/QuestionTypes/MatrixType.vue | 91 +++++----- 5 files changed, 270 insertions(+), 140 deletions(-) diff --git a/src/assets/css/common.css b/src/assets/css/common.css index 8812ffd0..880cfdeb 100644 --- a/src/assets/css/common.css +++ b/src/assets/css/common.css @@ -744,6 +744,89 @@ header.vff-header svg.f-logo { max-width: 100%; } +/*matrix field*/ +.vff .f-matrix-wrap { + overflow-x: auto; +} + +.vff .f-matrix-table { + width: 100%; + font-size: .52em; + line-height: normal; + font-weight: normal; + margin-bottom: 0; +} + +.vff .f-table-cell { + padding: .6em .68em; + min-width: 10em; + text-align: left; +} + +.vff .f-row-cell { + padding-left: 1.875em; +} + +.vff .f-column-cell { + font-weight: 900; + text-align: center; +} + +.vff .f-matrix-cell { + text-align: center; +} + +.vff .f-field-wrap, +.vff .f-matrix-field { + display: flex; + justify-content: center; + align-items: center; +} + +.vff .f-field-mask { + position: relative; + display: inline-block; + cursor: pointer; + width: 1.5em; + height: 1.5em; +} + +.vff .f-radio-mask { + border-radius: 100%; +} + +.vff .f-field-svg { + position: absolute; + display: inline-block; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #000; + border: 1px solid currentColor; + fill: transparent; + width: 100%; + height: 100%; + transition: color 0.2s ease 0s; +} + +.vff .f-radio-svg { + border-radius: 100%; +} + +.vff .f-radio-svg circle, +.vff .f-checkbox-svg rect { + fill: inherit; +} + +.vff .f-field-control:checked ~ .f-field-mask .f-field-svg { + color: inherit; +} + +.vff .f-field-control:hover ~ .f-field-mask .f-field-svg, +.vff .f-field-control:checked ~ .f-field-mask .f-field-svg { + fill: currentColor; +} + /* footer */ @@ -1147,97 +1230,4 @@ header.vff-header svg.f-logo { height: 90px; } -} - -.vff .f-matrix-wrap { - overflow-x: auto; -} - -.vff .f-matrix-table { - width: 100%; - background-color: #efefef; - border-collapse: separate; - border-spacing: 0; - font-size: .52em; - line-height: normal; - font-weight: normal; - margin-bottom: 0; -} - -.vff .f-table-cell { - padding: 0.9375em 1em; - min-width: 10em; - text-align: left; -} - -.vff .f-row-cell { - padding-left: 1.875em; - text-align: left; -} - -.vff .f-column-cell { - font-weight: 900; - text-align: center; - padding-top: 1.875em; -} - -.vff .f-matrix-cell { - text-align: center; -} - -.vff .f-field-mask { - position: relative; - display: inline-block; - cursor: pointer; - width: 1.5em; - height: 1.5em; -} - -.vff .f-radio-mask { - border-radius: 100%; -} - -.vff .f-field-svg { - position: absolute; - display: inline-block; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: #999; - border: 3px solid currentColor; - fill: transparent; - width: 100%; - height: 100%; - transition: color 0.2s ease 0s; -} - -.vff .f-radio-svg { - border-radius: 100%; -} - -.vff .f-radio-svg circle, -.vff .f-checkbox-svg rect { - fill: inherit; -} - -.vff .f-field-control:hover ~ .f-field-mask .f-field-svg { - fill: #999; -} - -.vff .f-field-control:checked ~ .f-field-mask .f-field-svg { - color: #181818; - fill: currentColor; -} - - /* matrix-scrollbar */ -.vff .f-matrix-wrap::-webkit-scrollbar { - height: 10px; -} - -.vff .f-matrix-wrap::-webkit-scrollbar-track { - background-color: #999; -} - -.vff .f-matrix-wrap::-webkit-scrollbar-thumb { - background-color: #BBEBD5; } \ No newline at end of file diff --git a/src/assets/css/themes/theme-green.css b/src/assets/css/themes/theme-green.css index 99c64abb..26e230a0 100644 --- a/src/assets/css/themes/theme-green.css +++ b/src/assets/css/themes/theme-green.css @@ -148,6 +148,52 @@ header.vff-header svg.f-logo { fill: var(--vff-main-text-color); } +/*field matrix*/ +.vff .f-matrix-table { + border-collapse: separate; + border-spacing: 0 .6em; +} + +.vff .f-matrix-table td { + border: 1px solid var(--vff-secondary-text-color); + border-right:hidden; + border-left: hidden; +} + +.vff .f-matrix-table td:first-child { + border-left: 1px solid var(--vff-secondary-text-color); +} + +.vff .f-matrix-table td:last-child { + border-right: 1px solid var(--vff-secondary-text-color); +} + +.vff .f-matrix-table thead td:first-child { + border: none; +} + +.vff .f-field-svg { + color: var(--vff-secondary-text-color); + border-width: 2px; +} + +.vff .f-field-control:checked ~ .f-field-mask .f-field-svg { + color: var(--vff-main-text-color); +} + +/*matrix scrollbar*/ +.vff .f-matrix-wrap::-webkit-scrollbar { + height: 10px; +} + +.vff .f-matrix-wrap::-webkit-scrollbar-track { + background-color: var(--vff-tertiary-text-color); +} + +.vff .f-matrix-wrap::-webkit-scrollbar-thumb { + background-color: var(--vff-secondary-text-color); +} + /*buttons*/ .vff .o-btn-action { color: var(--vff-bg-color); diff --git a/src/assets/css/themes/theme-minimal.css b/src/assets/css/themes/theme-minimal.css index d59ee0d8..def83803 100644 --- a/src/assets/css/themes/theme-minimal.css +++ b/src/assets/css/themes/theme-minimal.css @@ -138,6 +138,52 @@ header.vff-header svg.f-logo{ fill: var(--vff-main-text-color); } +/*field matrix*/ +.vff .f-matrix-table { + border-collapse: separate; + border-spacing: 0 .6em; +} + +.vff .f-matrix-table td { + border: 1px solid var(--vff-secondary-text-color); + border-right:hidden; + border-left: hidden; +} + +.vff .f-matrix-table td:first-child { + border-left: 1px solid var(--vff-secondary-text-color); +} + +.vff .f-matrix-table td:last-child { + border-right: 1px solid var(--vff-secondary-text-color); +} + +.vff .f-matrix-table thead td:first-child { + border: none; +} + +.vff .f-field-svg { + color: var(--vff-secondary-text-color); + border-width: 2px; +} + +.vff .f-field-control:checked ~ .f-field-mask .f-field-svg { + color: var(--vff-main-text-color); +} + +/*matrix scrollbar*/ +.vff .f-matrix-wrap::-webkit-scrollbar { + height: 10px; +} + +.vff .f-matrix-wrap::-webkit-scrollbar-track { + background-color: var(--vff-tertiary-text-color); +} + +.vff .f-matrix-wrap::-webkit-scrollbar-thumb { + background-color: var(--vff-secondary-text-color); +} + /*buttons*/ .vff .o-btn-action { color: var(--vff-bg-color); @@ -293,4 +339,9 @@ header.vff-header svg.f-logo{ color: var(--vff-main-accent-color); } + /* field matrix*/ + .vff .f-matrix-wrap::-webkit-scrollbar-thumb { + background-color: var(--vff-main-accent-color); + } + } \ No newline at end of file diff --git a/src/assets/css/themes/theme-purple.css b/src/assets/css/themes/theme-purple.css index 5b7efef3..f6cdc06d 100644 --- a/src/assets/css/themes/theme-purple.css +++ b/src/assets/css/themes/theme-purple.css @@ -156,6 +156,52 @@ header.vff-header svg.f-logo{ fill: var(--vff-arrow-color); } +/*field matrix*/ +.vff .f-matrix-table { + border-collapse: separate; + border-spacing: 0 .6em; +} + +.vff .f-matrix-table td { + border: 1px solid var(--vff-secondary-form-bg-color); + border-right:hidden; + border-left: hidden; +} + +.vff .f-matrix-table td:first-child { + border-left: 1px solid var(--vff-secondary-form-bg-color); +} + +.vff .f-matrix-table td:last-child { + border-right: 1px solid var(--vff-secondary-form-bg-color); +} + +.vff .f-matrix-table thead td:first-child { + border: none; +} + +.vff .f-field-svg { + color: var(--vff-secondary-text-color); + border-width: 2px; +} + +.vff .f-field-control:checked ~ .f-field-mask .f-field-svg { + color: var(--vff-secondary-form-bg-color); +} + +/*matrix scrollbar*/ +.vff .f-matrix-wrap::-webkit-scrollbar { + height: 10px; +} + +.vff .f-matrix-wrap::-webkit-scrollbar-track { + background-color: var(--vff-tertiary-text-color); +} + +.vff .f-matrix-wrap::-webkit-scrollbar-thumb { + background-color: var(--vff-secondary-form-bg-color); +} + /*buttons*/ .vff .o-btn-action { color: var(--vff-button-text-color); diff --git a/src/components/QuestionTypes/MatrixType.vue b/src/components/QuestionTypes/MatrixType.vue index e54dd681..a019e045 100644 --- a/src/components/QuestionTypes/MatrixType.vue +++ b/src/components/QuestionTypes/MatrixType.vue @@ -31,51 +31,49 @@ v-bind:title="column.label" class="f-table-cell f-matrix-cell" > - - - - - - - +
+ +
+
+ +
@@ -112,13 +110,12 @@ export default { this.selected[id] = [$event.target.value] } } - + this.dirty = true this.dataValue = this.selected this.onKeyDown() this.setAnswer(this.dataValue) } } - } From ad233ce16eda74d542d57db6129ed3340b74a4f3 Mon Sep 17 00:00:00 2001 From: EkaterinaVu Date: Mon, 11 Oct 2021 13:40:34 +0200 Subject: [PATCH 19/80] Add v-model binding to checkbox input --- src/components/QuestionTypes/MatrixType.vue | 28 ++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/QuestionTypes/MatrixType.vue b/src/components/QuestionTypes/MatrixType.vue index a019e045..7eb06ad5 100644 --- a/src/components/QuestionTypes/MatrixType.vue +++ b/src/components/QuestionTypes/MatrixType.vue @@ -36,13 +36,12 @@ Date: Mon, 11 Oct 2021 16:05:30 +0200 Subject: [PATCH 20/80] Set pre-filled answers for matrix question type --- src/components/QuestionTypes/MatrixType.vue | 9 ++++++--- src/models/QuestionModel.js | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/QuestionTypes/MatrixType.vue b/src/components/QuestionTypes/MatrixType.vue index 7eb06ad5..73f1e4d5 100644 --- a/src/components/QuestionTypes/MatrixType.vue +++ b/src/components/QuestionTypes/MatrixType.vue @@ -102,10 +102,13 @@ export default { }, beforeMount() { + // Pre-fill the form if there is a predefined answer if (this.question.multiple) { - for (let row of this.question.rows) { - this.selected[row.id] = [] - } + for (let row of this.question.rows) { + this.selected[row.id] = this.question.answer && this.question.answer[row.id] ? [...this.question.answer[row.id]] : [] + } + } else if (this.question.answer) { + this.selected = {...this.question.answer} } }, diff --git a/src/models/QuestionModel.js b/src/models/QuestionModel.js index c69b43d2..1024fa19 100644 --- a/src/models/QuestionModel.js +++ b/src/models/QuestionModel.js @@ -152,7 +152,7 @@ export default class QuestionModel { this.placeholder = 'yyyy-mm-dd' } - if (this.multiple && !Array.isArray(this.answer)) { + if (this.type !== QuestionType.Matrix && this.multiple && !Array.isArray(this.answer)) { this.answer = this.answer ? [this.answer] : [] } From ce6343c35d40cec238d87b83925c7eee4062fee2 Mon Sep 17 00:00:00 2001 From: EkaterinaVu Date: Mon, 11 Oct 2021 17:59:42 +0200 Subject: [PATCH 21/80] Fix indentation --- src/components/QuestionTypes/MatrixType.vue | 26 ++++++++++----------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/QuestionTypes/MatrixType.vue b/src/components/QuestionTypes/MatrixType.vue index 73f1e4d5..37810e93 100644 --- a/src/components/QuestionTypes/MatrixType.vue +++ b/src/components/QuestionTypes/MatrixType.vue @@ -23,7 +23,7 @@ class="f-table-row" > - {{ row.label }} + {{ row.label }}
/* - Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence - https://github.com/ditdot-dev/vue-flow-form - https://www.ditdot.hr/en - */ + Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence + https://github.com/ditdot-dev/vue-flow-form + https://www.ditdot.hr/en +*/ -import BaseType from "./BaseType.vue" -import { QuestionType } from "../../models/QuestionModel" +import BaseType from './BaseType.vue' +import { QuestionType } from '../../models/QuestionModel' export default { extends: BaseType, @@ -104,9 +104,9 @@ export default { beforeMount() { // Pre-fill the form if there is a predefined answer if (this.question.multiple) { - for (let row of this.question.rows) { - this.selected[row.id] = this.question.answer && this.question.answer[row.id] ? [...this.question.answer[row.id]] : [] - } + for (let row of this.question.rows) { + this.selected[row.id] = this.question.answer && this.question.answer[row.id] ? [...this.question.answer[row.id]] : [] + } } else if (this.question.answer) { this.selected = {...this.question.answer} } @@ -119,6 +119,6 @@ export default { this.onKeyDown() this.setAnswer(this.dataValue) } - } -} + } +} From 68d0e21943feae389daaa0251686020edf3487da Mon Sep 17 00:00:00 2001 From: EkaterinaVu Date: Tue, 12 Oct 2021 10:21:22 +0200 Subject: [PATCH 22/80] Add validation when question required --- src/components/QuestionTypes/MatrixType.vue | 26 +++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/QuestionTypes/MatrixType.vue b/src/components/QuestionTypes/MatrixType.vue index 37810e93..49de98eb 100644 --- a/src/components/QuestionTypes/MatrixType.vue +++ b/src/components/QuestionTypes/MatrixType.vue @@ -35,6 +35,7 @@