Extend OpinionScale with OpinionNumberScale question type

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -94,7 +94,7 @@
             tagline: 'Hi! Welcome to our demo survey 😊',
             title: 'Tell us about our service',
             subtitle: '1 - Awful, 5 - So, so, 10 - Excellent',
-            type: QuestionType.OpinionScale,
+            type: QuestionType.OpinionNumberScale,
             required: true,
             min: 1,
             max: 10,

src/assets/css/common.css

@@ -743,7 +743,8 @@ header.vff-header svg.f-logo {
   field opinion scale
 */
 
-.vff .field-opinionscale ul.f-radios {
+.vff .field-opinionscale ul.f-radios,
+.vff .field-opinionnumberscale ul.f-radios {
   width: 100%;
   max-width: 750px;
   min-width: auto;
@@ -761,7 +762,8 @@ header.vff-header svg.f-logo {
   flex-wrap: wrap;
 }
 
-.vff .field-opinionscale ul.f-radios li {
+.vff .field-opinionscale ul.f-radios li,
+.vff .field-opinionnumberscale ul.f-radios li {
   display: -ms-flexbox;
   display: -webkit-box;
   display: flex;
@@ -779,10 +781,10 @@ header.vff-header svg.f-logo {
   flex: 0 0 calc(20% - 8px);
   font-size: 15px;
   line-height: 1.38;
-  height: 64px; 
+  min-height: 64px; 
 }
 
-.vff .field-opinionscale ul.f-radios.f-numbers li {
+.vff .field-opinionnumberscale ul.f-radios.f-numbers li {
   -ms-flex: 0 0 calc(10% - 8px);
   flex: 0 0 calc(10% - 8px);
 }
@@ -1245,7 +1247,7 @@ header.vff-header svg.f-logo {
     flex: 0 0 calc(50% - 8px);
   }
 
-  .vff .field-opinionscale ul.f-radios.f-numbers li {
+  .vff .field-opinionnumberscale ul.f-radios.f-numbers li {
     -ms-flex: 0 0 calc(20% - 8px);
     flex: 0 0 calc(20% - 8px);
   }

src/components/FlowFormQuestion.vue

@@ -115,6 +115,7 @@
   import FlowFormFileType from './QuestionTypes/FileType.vue'
   import FlowFormMatrixType from './QuestionTypes/MatrixType.vue'
   import FlowFormOpinionScaleType from './QuestionTypes/OpinionScaleType.vue'
+  import FlowFormOpinionNumberScaleType from './QuestionTypes/OpinionNumberScaleType.vue'
   import { IsMobile } from '../mixins/IsMobile'
   
 
@@ -137,6 +138,7 @@
       FlowFormUrlType,
       FlowFormMatrixType,
       FlowFormOpinionScaleType,
+      FlowFormOpinionNumberScaleType,
     },
 
     props: {

src/components/QuestionTypes/OpinionNumberScaleType.vue

@@ -0,0 +1,21 @@
+<script>
+  /*
+    Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
+    https://github.com/ditdot-dev/vue-flow-form
+    https://www.ditdot.hr/en
+  */
+
+  import OpinionScaleType from './OpinionScaleType.vue'
+  import { QuestionType } from '../../models/QuestionModel'
+
+  export default {
+    extends: OpinionScaleType,
+    name: QuestionType.OpinionNumberScale,
+
+    data() {
+      return {
+        isNumberScale: true
+      }
+    }
+  }
+</script>

src/components/QuestionTypes/OpinionScaleType.vue

@@ -32,6 +32,12 @@
     extends: BaseType,
     name: QuestionType.OpinionScale,
 
+    data() {
+      return {
+        isNumberScale: false
+      }
+    },
+
     beforeMount() {
       if (this.question.max && !this.question.options.length) {
         const 

src/models/QuestionModel.js

@@ -21,7 +21,8 @@ export const QuestionType = Object.freeze({
   Text: 'FlowFormTextType',
   Url: 'FlowFormUrlType',
   Matrix: 'FlowFormMatrixType',
-  OpinionScale: 'FlowFormOpinionScaleType'
+  OpinionScale: 'FlowFormOpinionScaleType',
+  OpinionNumberScale: 'FlowFormOpinionNumberScaleType',
 })
 
 export const DropdownOptionBlank = Object.freeze({