Skip to content

Commit f81092d

Browse files
spinnspinn
committed
Vue3 support
1 parent 5dcf56d commit f81092d

File tree

10 files changed

+442
-268
lines changed

10 files changed

+442
-268
lines changed

‎babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
presets: [
3-
['@vue/app', {
3+
["@vue/cli-plugin-babel/preset", {
44
useBuiltIns: "entry"
55
}]
66
]

‎examples/questionnaire/main.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
https://www.ditdot.hr/en
55
*/
66

7-
import Vue from 'vue'
7+
import { createApp } from 'vue'
88
import Example from './Example.vue'
99

10-
new Vue({
11-
render: h => h(Example)
12-
}).$mount('#app')
10+
createApp(Example).mount('#app')

‎examples/quiz/main.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
https://www.ditdot.hr/en
55
*/
66

7-
import Vue from 'vue'
7+
import { createApp } from 'vue'
88
import Example from './Example.vue'
99

10-
new Vue({
11-
render: h => h(Example)
12-
}).$mount('#app')
10+
createApp(Example).mount('#app')

‎examples/support-page/main.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
https://www.ditdot.hr/en
55
*/
66

7-
import Vue from 'vue'
7+
import { createApp } from 'vue'
88
import Example from './Example.vue'
99

10-
new Vue({
11-
render: h => h(Example)
12-
}).$mount('#app')
10+
createApp(Example).mount('#app')

‎package-lock.json‎

Lines changed: 364 additions & 188 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 44 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,25 @@
11
{
22
"name": "@ditdot-dev/vue-flow-form",
3-
"author": "DITDOT",
4-
"description": "Create conversational conditional-logic forms with Vue.js.",
53
"version": "1.1.1",
64
"private": false,
7-
"repository": {
8-
"type": "git",
9-
"url": "https://github.com/ditdot-dev/vue-flow-form.git"
10-
},
11-
"keywords": [
12-
"vue",
13-
"vue2",
14-
"vuejs",
15-
"forms",
16-
"survey-form",
17-
"questionnaire",
18-
"quiz",
19-
"typeform",
20-
"form-generator",
21-
"vue-component",
22-
"conversational-ui"
23-
],
24-
"license": "MIT",
25-
"homepage": "https://www.ditdot.hr/en/vue-flow-form",
26-
"bugs": {
27-
"url": "https://github.com/ditdot-dev/vue-flow-form/issues"
5+
"description": "Create conversational conditional-logic forms with Vue.js.",
6+
"author": "DITDOT",
7+
"scripts": {
8+
"serve": "vue-cli-service serve",
9+
"build": "vue-cli-service build",
10+
"build:npm": "rollup --config build/rollup.config.js && npm run cssmin",
11+
"cssmin": "postcss dist/vue-flow-form.theme-minimal.css -o dist/vue-flow-form.theme-minimal.min.css && postcss dist/vue-flow-form.theme-green.css -o dist/vue-flow-form.theme-green.min.css && postcss dist/vue-flow-form.theme-purple.css -o dist/vue-flow-form.theme-purple.min.css"
2812
},
2913
"main": "dist/vue-flow-form.umd.js",
3014
"module": "dist/vue-flow-form.esm.js",
3115
"browser": "dist/vue-flow-form.common.js",
32-
"jsdelivr": "dist/vue-flow-form.umd.min.js",
3316
"unpkg": "dist/vue-flow-form.umd.min.js",
3417
"files": [
3518
"dist"
3619
],
37-
"scripts": {
38-
"serve": "vue-cli-service serve",
39-
"build": "vue-cli-service build",
40-
"build:npm": "rollup --config build/rollup.config.js && npm run cssmin",
41-
"cssmin": "postcss dist/vue-flow-form.theme-minimal.css -o dist/vue-flow-form.theme-minimal.min.css && postcss dist/vue-flow-form.theme-green.css -o dist/vue-flow-form.theme-green.min.css && postcss dist/vue-flow-form.theme-purple.css -o dist/vue-flow-form.theme-purple.min.css"
42-
},
43-
"eslintConfig": {
44-
"root": true,
45-
"extends": [
46-
"plugin:vue/essential"
47-
],
48-
"rules": {
49-
"no-unused-vars": "off"
50-
}
51-
},
5220
"dependencies": {
5321
"es6-object-assign": "^1.1.0",
22+
"vue": "^3.0.0-beta.1",
5423
"vue-textarea-autosize": "^1.1.1",
5524
"vue-the-mask": "^0.11.1"
5625
},
@@ -59,8 +28,9 @@
5928
"@rollup/plugin-buble": "^0.21.3",
6029
"@rollup/plugin-commonjs": "^11.1.0",
6130
"@rollup/plugin-node-resolve": "^9.0.0",
62-
"@vue/cli-plugin-babel": "^4.4.1",
63-
"@vue/cli-service": "^4.4.1",
31+
"@vue/cli-plugin-babel": "^4.5.6",
32+
"@vue/cli-service": "^4.5.6",
33+
"@vue/compiler-sfc": "^3.0.0-beta.1",
6434
"babel-helper-vue-jsx-merge-props": "^2.0.2",
6535
"babel-plugin-syntax-jsx": "^6.18.0",
6636
"babel-plugin-transform-vue-jsx": "^3.3.0",
@@ -76,7 +46,38 @@
7646
"rollup-plugin-postcss": "^3.1.6",
7747
"rollup-plugin-terser": "^7.0.0",
7848
"rollup-plugin-vue": "^5.0.1",
79-
"vue": "^2.6.11",
80-
"vue-template-compiler": "^2.6.11"
49+
"vue": "^3.0.0"
50+
},
51+
"eslintConfig": {
52+
"root": true,
53+
"extends": [
54+
"plugin:vue/essential"
55+
],
56+
"rules": {
57+
"no-unused-vars": "off"
58+
}
59+
},
60+
"bugs": {
61+
"url": "https://github.com/ditdot-dev/vue-flow-form/issues"
62+
},
63+
"homepage": "https://www.ditdot.hr/en/vue-flow-form",
64+
"jsdelivr": "dist/vue-flow-form.umd.min.js",
65+
"keywords": [
66+
"vue",
67+
"vue2",
68+
"vuejs",
69+
"forms",
70+
"survey-form",
71+
"questionnaire",
72+
"quiz",
73+
"typeform",
74+
"form-generator",
75+
"vue-component",
76+
"conversational-ui"
77+
],
78+
"license": "MIT",
79+
"repository": {
80+
"type": "git",
81+
"url": "https://github.com/ditdot-dev/vue-flow-form.git"
8182
}
8283
}

‎src/components/FlowForm.vue‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="f-container">
66
<div class="form-wrap">
77
<flow-form-question
8-
ref="questions"
8+
:ref="setQuestionRef"
99
v-for="(q, index) in questionList"
1010
v-bind:question="q"
1111
v-bind:language="language"
@@ -144,6 +144,7 @@
144144
},
145145
data() {
146146
return {
147+
questionRefs: [],
147148
completed: false,
148149
submitted: false,
149150
activeQuestionIndex: 0,
@@ -169,6 +170,9 @@
169170
document.removeEventListener('keyup', this.onKeyUpListener, true)
170171
window.removeEventListener('beforeunload', this.onBeforeUnload)
171172
},
173+
beforeUpdate() {
174+
this.questionRefs = []
175+
},
172176
computed: {
173177
numActiveQuestions() {
174178
return this.questionListActivePath.length
@@ -203,15 +207,15 @@
203207
}
204208
},
205209
methods: {
210+
setQuestionRef(el) {
211+
this.questionRefs.push(el)
212+
},
213+
206214
/**
207215
* Returns currently active question component (if any).
208216
*/
209217
activeQuestionComponent() {
210-
if (this.$refs.questions) {
211-
return this.$refs.questions[this.activeQuestionIndex]
212-
}
213-
214-
return null
218+
return this.questionRefs[this.activeQuestionIndex]
215219
},
216220
217221
setQuestions() {
@@ -311,7 +315,6 @@
311315
return
312316
}
313317
314-
315318
if (e.shiftKey) {
316319
e.stopPropagation()
317320
e.preventDefault()

‎src/components/QuestionTypes/BaseType.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
language: LanguageModel,
1818
question: QuestionModel,
1919
active: Boolean,
20-
value: [String, Array]
20+
modelValue: [String, Array]
2121
},
2222
mixins: [
2323
IsMobile,
@@ -125,7 +125,7 @@
125125
this.question.answered = this.isValid()
126126
this.answer = this.question.answer = answer
127127
128-
this.$emit('input', this.answer)
128+
this.$emit('update:modelValue', this.answer)
129129
},
130130
131131
showInvalid() {

‎src/components/QuestionTypes/LongTextType.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
rows="1"
66
v-bind:value="value"
77
v-bind:required="question.required"
8-
v-on:keydown.native="onKeyDown"
9-
v-on:keyup.native="onChange"
10-
v-on:keydown.enter.exact.native="onEnterDown"
11-
v-on:keyup.enter.exact.prevent.native="onEnter"
12-
v-on:keyup.tab.prevent.native="onEnter"
13-
v-on:focus.native="setFocus"
14-
v-on:blur.native="unsetFocus"
8+
v-on:keydown="onKeyDown"
9+
v-on:keyup="onChange"
10+
v-on:keydown.enter.exact="onEnterDown"
11+
v-on:keyup.enter.exact.prevent="onEnter"
12+
v-on:keyup.tab.prevent="onEnter"
13+
v-on:focus="setFocus"
14+
v-on:blur="unsetFocus"
1515
v-bind:placeholder="placeholder"
1616
/>
1717
</span>

‎src/components/QuestionTypes/TextType.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@
66
v-bind:mask="question.mask"
77
v-bind:masked="false"
88
v-bind:type="inputType"
9-
v-bind:value="value"
9+
v-bind:value="modelValue"
1010
v-bind:required="question.required"
11-
v-on:keydown.native="onKeyDown"
12-
v-on:keyup.native="onChange"
13-
v-on:focus.native="setFocus"
14-
v-on:blur.native="unsetFocus"
15-
v-on:keyup.native.enter.prevent="onEnter"
16-
v-on:keyup.native.tab.prevent="onEnter"
11+
v-on:keydown="onKeyDown"
12+
v-on:keyup="onChange"
13+
v-on:focus="setFocus"
14+
v-on:blur="unsetFocus"
15+
v-on:keyup.enter.prevent="onEnter"
16+
v-on:keyup.tab.prevent="onEnter"
1717
v-bind:placeholder="placeholder"
1818
/>
1919
<input
2020
v-else
2121
ref="input"
2222
v-bind:type="inputType"
23-
v-bind:value="value"
23+
v-bind:value="modelValue"
2424
v-bind:required="question.required"
2525
v-on:keydown="onKeyDown"
2626
v-on:keyup="onChange"

0 commit comments

Comments
 (0)