Skip to content

Commit cb307f7

Browse files
spinnspinn
committed
Rename components and prepare project for npm
1 parent 807a8b2 commit cb307f7

22 files changed

+3487
-236
lines changed

‎GUIDE.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
```
2525
* Import necessary components and classes
2626
* Create question list
27-
* Add `Survey` component
27+
* Add `FlowForm` component
2828
* Add the question list as `questions` prop
2929
* Add language model as `language` prop (optional)
3030
* language is defined by creating a new instance of `LanguageModel` and setting its properties
@@ -70,7 +70,7 @@
7070
}
7171
```
7272
* `required` - is field required or not (true/false - default is false)
73-
* turn on/off the `required` asterisk next to the question in vue-form/src/assets/css/common.css:
73+
* turn on/off the `required` asterisk next to the question in vue-flow-form/src/assets/css/common.css:
7474

7575
```css
7676
.f-required {
@@ -102,7 +102,7 @@
102102
```
103103
Object key `_other` will be used when no other keys match the answer. Object value `_submit` will jump to form submit button
104104
105-
## Survey component events:
105+
## FlowForm component events:
106106
107107
* `complete` - emitted whenever the "completed" status changes, the first parameter is the status, the second is the question list, eg.:
108108
@@ -122,7 +122,7 @@
122122
}
123123
```
124124
125-
## Survey component slots:
125+
## FlowForm component slots:
126126
127127
* `complete` - Complete/submit screen content
128128
* This is the content of your custom complete screen, by default the `thankYouText` language string is used,
@@ -156,7 +156,7 @@ event to know when the user is in the complete screen and handle the rest manual
156156
157157
```shell
158158
# clone repo
159-
$ git clone https://github.com/ditdot-dev/vue-form.git
159+
$ git clone https://github.com/ditdot-dev/vue-flow-form.git
160160

161161
# create a new branch
162162
$ git checkout -b new_branch_name

‎README.md‎

Lines changed: 76 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@
55
</p>
66

77

8-
## Installation
8+
## Demo
9+
10+
* [Questionnaire example](https://www.ditdot.hr)
11+
* [Quiz example](https://www.ditdot.hr)
12+
13+
## Example Project
914

1015
Requirements:
1116

@@ -17,7 +22,7 @@ After checking the prerequisites, follow these simple steps to install and use V
1722

1823
```shell
1924
# clone the repo
20-
$ git clone https://github.com/ditdot-dev/vue-form.git myproject
25+
$ git clone https://github.com/ditdot-dev/vue-flow-form.git myproject
2126

2227
# go into app's directory and install dependencies:
2328
$ cd myproject
@@ -49,10 +54,78 @@ $ yarn build
4954

5055
Made with [Vue.js](https://vuejs.org/)
5156

57+
## Usage as npm package
58+
59+
```shell
60+
npm install vue-flow-form --save
61+
```
62+
63+
And then in your App.vue file:
64+
65+
```vue
66+
<template>
67+
<flow-form v-bind:questions="questions" />
68+
</template>
69+
70+
<script>
71+
// Import necessary components and classes
72+
import FlowForm from 'vue-flow-form/src/components/FlowForm'
73+
import QuestionModel, { QuestionType, ChoiceOption } from 'vue-flow-form/src/models/QuestionModel'
74+
75+
export default {
76+
name: 'example',
77+
components: {
78+
FlowForm
79+
},
80+
data() {
81+
return {
82+
questions: [
83+
// QuestioModel array
84+
]
85+
}
86+
}
87+
}
88+
</script>
89+
```
90+
91+
## JavaScript via CDN
92+
93+
HTML:
94+
95+
```html
96+
...
97+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
98+
<!-- Flow Form -->
99+
<script src="https://unpkg.com/[email protected]"></script>
100+
...
101+
```
102+
103+
JavaScript:
104+
105+
```js
106+
var app = new Vue({
107+
el: '#app',
108+
data: function() {
109+
return {
110+
questions: [
111+
new FlowForm.default.QuestionModel({
112+
question: '...',
113+
type: FlowForm.default.QuestionType.MultipleChoice,
114+
options: [
115+
new FlowForm.default.ChoiceOption({
116+
label: '...'
117+
})
118+
]
119+
})
120+
]
121+
}
122+
}
123+
});
124+
```
52125
## Browser Support
53126

54127
Modern browsers and IE11.
55128

56129
## License
57130

58-
[MIT](https://github.com/ditdot-dev/vue-form/blob/master/LICENSE) license.
131+
[MIT](https://github.com/ditdot-dev/vue-flow-form/blob/master/LICENSE) license.

‎build/rollup.config.js‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
import commonjs from '@rollup/plugin-commonjs'
2+
import vue from 'rollup-plugin-vue'
3+
import buble from '@rollup/plugin-buble'
4+
import resolve from '@rollup/plugin-node-resolve'
5+
import cleanup from 'rollup-plugin-cleanup'
6+
import css from 'rollup-plugin-css-only'
7+
import postcss from 'rollup-plugin-postcss'
8+
import postcssImport from 'postcss-import'
9+
import { terser } from 'rollup-plugin-terser'
10+
import del from 'rollup-plugin-delete'
11+
import copy from 'rollup-plugin-copy'
12+
13+
import _postcss from 'postcss'
14+
15+
const postcssTrim = _postcss.plugin('postcss-trim', () => css => {
16+
css.raws.after = css.raws.after.replace(/^\n*$/g, '')
17+
})
18+
19+
const globals = {
20+
'vue': 'Vue'
21+
}
22+
23+
const componentName = 'FlowForm'
24+
25+
export default [
26+
{
27+
input: 'src/main.js',
28+
output: {
29+
name: componentName,
30+
exports: 'named',
31+
globals,
32+
format: 'umd',
33+
file: 'dist/vue-flow-form.umd.js'
34+
},
35+
plugins: [
36+
del({
37+
targets: 'dist/*'
38+
}),
39+
vue({
40+
css: false,
41+
compileTemplate: true
42+
}),
43+
postcss({
44+
output: 'css',
45+
extract: 'vue-flow-form.css',
46+
plugins: [
47+
postcssImport(),
48+
postcssTrim()
49+
]
50+
}),
51+
css(),
52+
buble({
53+
objectAssign: 'Object.assign',
54+
jsx: 'h'
55+
}),
56+
commonjs(),
57+
resolve({
58+
extensions: ['.mjs', '.js', '.json', '.node', '.vue']
59+
}),
60+
del({
61+
targets: 'dist/vue-flow.umd.css',
62+
hook: 'writeBundle'
63+
})
64+
]
65+
},
66+
{
67+
input: 'src/main.js',
68+
output: {
69+
name: componentName,
70+
exports: 'named',
71+
globals,
72+
format: 'es',
73+
file: 'dist/vue-flow-form.esm.js'
74+
},
75+
plugins: [
76+
vue({
77+
css: false,
78+
compileTemplate: true
79+
}),
80+
postcss({
81+
output: 'css',
82+
extract: 'vue-flow-form.css',
83+
plugins: [
84+
postcssImport(),
85+
postcssTrim()
86+
]
87+
}),
88+
css(),
89+
buble({
90+
objectAssign: 'Object.assign',
91+
jsx: 'h'
92+
}),
93+
commonjs(),
94+
resolve({
95+
extensions: ['.mjs', '.js', '.json', '.node', '.vue']
96+
}),
97+
del({
98+
targets: 'dist/vue-flow-form.esm.css',
99+
hook: 'writeBundle'
100+
})
101+
]
102+
},
103+
{
104+
input: 'src/main.js',
105+
output: {
106+
name: componentName,
107+
exports: 'named',
108+
globals,
109+
format: 'cjs',
110+
file: 'dist/vue-flow-form.common.js'
111+
},
112+
plugins: [
113+
vue({
114+
css: false,
115+
compileTemplate: true
116+
}),
117+
postcss({
118+
output: 'css',
119+
extract: 'vue-flow-form.css',
120+
plugins: [
121+
postcssImport(),
122+
postcssTrim()
123+
]
124+
}),
125+
css(),
126+
buble({
127+
objectAssign: 'Object.assign',
128+
jsx: 'h'
129+
}),
130+
commonjs(),
131+
resolve({
132+
extensions: ['.mjs', '.js', '.json', '.node', '.vue']
133+
}),
134+
del({
135+
targets: 'dist/vue-flow-form.common.css',
136+
hook: 'writeBundle'
137+
})
138+
]
139+
},
140+
{
141+
input: 'src/main.js',
142+
output: {
143+
name: componentName,
144+
exports: 'named',
145+
globals,
146+
format: 'umd',
147+
file: 'dist/vue-flow-form.umd.min.js'
148+
},
149+
plugins: [
150+
vue({
151+
css: false,
152+
compileTemplate: true
153+
}),
154+
postcss({
155+
output: 'css',
156+
extract: 'vue-flow-form.min.css',
157+
plugins: [
158+
postcssImport(),
159+
postcssTrim()
160+
],
161+
sourceMap: true,
162+
minimize: true
163+
}),
164+
css(),
165+
buble({
166+
objectAssign: 'Object.assign',
167+
jsx: 'h'
168+
}),
169+
commonjs(),
170+
resolve({
171+
extensions: ['.mjs', '.js', '.json', '.node', '.vue']
172+
}),
173+
cleanup(),
174+
terser(),
175+
del({
176+
targets: 'dist/vue-flow-form.umd.min.css',
177+
hook: 'writeBundle'
178+
}),
179+
copy({
180+
targets: [
181+
{
182+
src: 'examples/questionnaire/branding.css',
183+
dest: 'dist',
184+
rename: 'vue-flow-form.theme.css'
185+
}
186+
]
187+
})
188+
]
189+
}
190+
]

‎examples/questionnaire/Example.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@
1414
</div>
1515
</header>
1616

17-
<survey
18-
ref="survey"
17+
<flow-form
18+
ref="flowform"
1919
v-on:complete="onComplete"
2020
v-on:submit="onSubmit"
2121
v-bind:questions="questions"
2222
v-bind:language="language"
2323
>
24-
<!-- Custom content for the Complete/Submit screen slots in the Survey component -->
24+
<!-- Custom content for the Complete/Submit screen slots in the FlowForm component -->
2525
<!-- We've overriden the default "complete" slot content -->
2626
<template v-slot:complete>
2727
<div class="section-wrap">
@@ -54,7 +54,7 @@
5454

5555
<p class="text-success" v-if="submitted">Submitted succesfully.</p>
5656
</template>
57-
</survey>
57+
</flow-form>
5858
</div>
5959
</template>
6060

@@ -65,14 +65,14 @@
6565
*/
6666
6767
// Import necessary components and classes
68-
import Survey from '../../src/components/Survey.vue'
68+
import FlowForm from '../../src/components/FlowForm.vue'
6969
import QuestionModel, { QuestionType, ChoiceOption } from '../../src/models/QuestionModel'
7070
import LanguageModel from '../../src/models/LanguageModel'
7171
7272
export default {
7373
name: 'example',
7474
components: {
75-
Survey
75+
FlowForm
7676
},
7777
data() {
7878
return {
@@ -237,7 +237,7 @@
237237
if ($event.key === 'Enter' && this.completed && !this.submitted) {
238238
// Set `submitted` to true so the form knows not to allow back/forward
239239
// navigation anymore.
240-
this.$refs.survey.submitted = true
240+
this.$refs.flowform.submitted = true
241241
this.onSendData()
242242
}
243243
},

0 commit comments

Comments
 (0)