Skip to content

Commit 02f307d

Browse files
phre1phre1
authored
Merge pull request #220 from ditdot-dev/feature/matrix-field
Feature/matrix field
2 parents 6a990a7 + 9e13374 commit 02f307d

File tree

7 files changed

+452
-3
lines changed

7 files changed

+452
-3
lines changed

‎src/assets/css/common.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -744,6 +744,108 @@ header.vff-header svg.f-logo {
744744
max-width: 100%;
745745
}
746746

747+
/*
748+
field matrix
749+
*/
750+
751+
.vff .f-matrix-wrap {
752+
overflow-x: auto;
753+
}
754+
755+
.vff .f-matrix-table {
756+
width: 100%;
757+
font-size: .5em;
758+
line-height: 1.36;
759+
font-weight: normal;
760+
margin-bottom: 0;
761+
}
762+
763+
.vff .f-table-string {
764+
font-size: .84em;
765+
}
766+
767+
.vff .f-table-cell {
768+
padding: .52em;
769+
min-width: 8.6em;
770+
text-align: left;
771+
}
772+
773+
.vff .f-table-cell.f-row-cell {
774+
min-width: 9.2em;
775+
}
776+
777+
.vff .f-row-cell {
778+
padding-left: 1em;
779+
}
780+
781+
.vff .f-column-cell {
782+
font-weight: 900;
783+
text-align: center;
784+
}
785+
786+
.vff .f-matrix-cell {
787+
text-align: center;
788+
}
789+
790+
.vff .f-field-wrap,
791+
.vff .f-matrix-field {
792+
display: flex;
793+
justify-content: center;
794+
align-items: center;
795+
}
796+
797+
.vff .f-field-mask {
798+
position: relative;
799+
display: inline-block;
800+
cursor: pointer;
801+
width: 1.4em;
802+
height: 1.4em;
803+
}
804+
805+
.vff .f-field-svg {
806+
position: absolute;
807+
display: inline-block;
808+
top: 50%;
809+
left: 50%;
810+
transform: translate(-50%, -50%);
811+
color: #000;
812+
border: 1px solid currentColor;
813+
fill: transparent;
814+
width: 100%;
815+
height: 100%;
816+
transition: color 0.2s ease 0s;
817+
}
818+
819+
.vff .f-radio-svg {
820+
border-radius: 100%;
821+
}
822+
823+
.vff .f-radio-svg circle,
824+
.vff .f-checkbox-svg rect {
825+
fill: inherit;
826+
}
827+
828+
.vff .f-field-control:checked ~ .f-field-mask .f-field-svg {
829+
color: inherit;
830+
}
831+
832+
.vff .f-field-control:hover ~ .f-field-mask .f-field-svg,
833+
.vff .f-field-control:checked ~ .f-field-mask .f-field-svg {
834+
fill: currentColor;
835+
}
836+
837+
.vff .f-field-control:focus {
838+
outline: none;
839+
}
840+
841+
.vff .f-field-control:focus-visible ~ .f-field-mask {
842+
outline: 1px dotted;
843+
}
844+
845+
.vff .f-field-control:focus-visible ~ .f-checkbox-mask {
846+
outline-offset: 2px;
847+
}
848+
747849
/*
748850
footer
749851
*/

‎src/assets/css/themes/theme-green.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,56 @@ header.vff-header svg.f-logo {
148148
fill: var(--vff-main-text-color);
149149
}
150150

151+
/* field matrix */
152+
.vff .f-matrix-table {
153+
border-collapse: separate;
154+
border-spacing: 0 .6em;
155+
}
156+
157+
.vff .f-matrix-table thead th {
158+
padding-bottom: 0;
159+
}
160+
161+
.vff .f-matrix-table td {
162+
border: 1px solid var(--vff-secondary-text-color);
163+
border-right: hidden;
164+
border-left: hidden;
165+
}
166+
167+
.vff .f-matrix-table td:first-child {
168+
border-left: 1px solid var(--vff-secondary-text-color);
169+
}
170+
171+
.vff .f-matrix-table td:last-child {
172+
border-right: 1px solid var(--vff-secondary-text-color);
173+
}
174+
175+
.vff .f-matrix-table thead td:first-child {
176+
border: none;
177+
}
178+
179+
.vff .f-field-svg {
180+
color: var(--vff-secondary-text-color);
181+
border-width: 2px;
182+
}
183+
184+
.vff .f-field-control:checked ~ .f-field-mask .f-field-svg {
185+
color: var(--vff-main-text-color);
186+
}
187+
188+
/* matrix scrollbar */
189+
.vff .f-matrix-wrap::-webkit-scrollbar {
190+
height: 10px;
191+
}
192+
193+
.vff .f-matrix-wrap::-webkit-scrollbar-track {
194+
background-color: var(--vff-tertiary-text-color);
195+
}
196+
197+
.vff .f-matrix-wrap::-webkit-scrollbar-thumb {
198+
background-color: var(--vff-secondary-text-color);
199+
}
200+
151201
/* buttons */
152202
.vff .o-btn-action {
153203
color: var(--vff-bg-color);

‎src/assets/css/themes/theme-minimal.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,56 @@ header.vff-header svg.f-logo {
138138
fill: var(--vff-main-text-color);
139139
}
140140

141+
/* field matrix */
142+
.vff .f-matrix-table {
143+
border-collapse: separate;
144+
border-spacing: 0 .6em;
145+
}
146+
147+
.vff .f-matrix-table thead th {
148+
padding-bottom: 0;
149+
}
150+
151+
.vff .f-matrix-table td {
152+
border: 1px solid var(--vff-secondary-text-color);
153+
border-right:hidden;
154+
border-left: hidden;
155+
}
156+
157+
.vff .f-matrix-table td:first-child {
158+
border-left: 1px solid var(--vff-secondary-text-color);
159+
}
160+
161+
.vff .f-matrix-table td:last-child {
162+
border-right: 1px solid var(--vff-secondary-text-color);
163+
}
164+
165+
.vff .f-matrix-table thead td:first-child {
166+
border: none;
167+
}
168+
169+
.vff .f-field-svg {
170+
color: var(--vff-secondary-text-color);
171+
border-width: 2px;
172+
}
173+
174+
.vff .f-field-control:checked ~ .f-field-mask .f-field-svg {
175+
color: var(--vff-main-text-color);
176+
}
177+
178+
/*matrix scrollbar*/
179+
.vff .f-matrix-wrap::-webkit-scrollbar {
180+
height: 10px;
181+
}
182+
183+
.vff .f-matrix-wrap::-webkit-scrollbar-track {
184+
background-color: var(--vff-tertiary-text-color);
185+
}
186+
187+
.vff .f-matrix-wrap::-webkit-scrollbar-thumb {
188+
background-color: var(--vff-secondary-text-color);
189+
}
190+
141191
/* buttons */
142192
.vff .o-btn-action {
143193
color: var(--vff-bg-color);
@@ -293,4 +343,9 @@ header.vff-header svg.f-logo {
293343
color: var(--vff-main-accent-color);
294344
}
295345

346+
/* field matrix */
347+
.vff .f-matrix-wrap::-webkit-scrollbar-thumb {
348+
background-color: var(--vff-main-accent-color);
349+
}
350+
296351
}

‎src/assets/css/themes/theme-purple.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,56 @@ header.vff-header svg.f-logo {
156156
fill: var(--vff-arrow-color);
157157
}
158158

159+
/* field matrix */
160+
.vff .f-matrix-table {
161+
border-collapse: separate;
162+
border-spacing: 0 .6em;
163+
}
164+
165+
.vff .f-matrix-table thead th {
166+
padding-bottom: 0;
167+
}
168+
169+
.vff .f-matrix-table td {
170+
border: 1px solid var(--vff-secondary-form-bg-color);
171+
border-right:hidden;
172+
border-left: hidden;
173+
}
174+
175+
.vff .f-matrix-table td:first-child {
176+
border-left: 1px solid var(--vff-secondary-form-bg-color);
177+
}
178+
179+
.vff .f-matrix-table td:last-child {
180+
border-right: 1px solid var(--vff-secondary-form-bg-color);
181+
}
182+
183+
.vff .f-matrix-table thead td:first-child {
184+
border: none;
185+
}
186+
187+
.vff .f-field-svg {
188+
color: var(--vff-secondary-text-color);
189+
border-width: 2px;
190+
}
191+
192+
.vff .f-field-control:checked ~ .f-field-mask .f-field-svg {
193+
color: var(--vff-secondary-form-bg-color);
194+
}
195+
196+
/* matrix scrollbar */
197+
.vff .f-matrix-wrap::-webkit-scrollbar {
198+
height: 10px;
199+
}
200+
201+
.vff .f-matrix-wrap::-webkit-scrollbar-track {
202+
background-color: var(--vff-tertiary-text-color);
203+
}
204+
205+
.vff .f-matrix-wrap::-webkit-scrollbar-thumb {
206+
background-color: var(--vff-secondary-form-bg-color);
207+
}
208+
159209
/* buttons */
160210
.vff .o-btn-action {
161211
color: var(--vff-button-text-color);

‎src/components/FlowFormQuestion.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@
113113
import FlowFormUrlType from './QuestionTypes/UrlType.vue'
114114
import FlowFormDateType from './QuestionTypes/DateType.vue'
115115
import FlowFormFileType from './QuestionTypes/FileType.vue'
116+
import FlowFormMatrixType from './QuestionTypes/MatrixType.vue'
116117
import { IsMobile } from '../mixins/IsMobile'
117118
118119
@@ -132,7 +133,8 @@
132133
FlowFormSectionBreakType,
133134
FlowFormTextType,
134135
FlowFormFileType,
135-
FlowFormUrlType
136+
FlowFormUrlType,
137+
FlowFormMatrixType
136138
},
137139
138140
props: {

0 commit comments

Comments
 (0)