├── .gitattributes
├── .gitignore
├── FormBase.vue
├── LICENSE
├── README.md
├── docs
    ├── _config.yml
    ├── index.html
    └── index.md
├── example
    └── vue-form-base
    │   ├── .babelrc
    │   ├── .gitattributes
    │   ├── .gitignore
    │   ├── README.md
    │   ├── index.html
    │   ├── package.json
    │   ├── src
    │       ├── App.vue
    │       ├── components
    │       │   └── formBase.vue
    │       └── main.js
    │   └── webpack.config.js
├── images
    ├── name1.JPG
    └── name2.JPG
├── index.js
├── package.json
└── publish-npm.sh


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | #dist in Client
 2 | client/dist
 3 | 
 4 | node_modules
 5 | 
 6 | # Logs
 7 | logs
 8 | *.log
 9 | npm-debug.log*
10 | 
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
23 | .grunt
24 | 
25 | # node-waf configuration
26 | .lock-wscript
27 | 
28 | # Compiled binary addons (http://nodejs.org/api/addons.html)
29 | build/Release
30 | 
31 | # Dependency directories
32 | node_modules
33 | jspm_packages
34 | 
35 | # Optional npm cache directory
36 | .npm
37 | 
38 | # Optional REPL history
39 | .node_repl_history
40 | 
41 | # =========================
42 | # Operating System Files
43 | # =========================
44 | 
45 | # OSX
46 | # =========================
47 | 
48 | .DS_Store
49 | .AppleDouble
50 | .LSOverride
51 | 
52 | # Thumbnails
53 | ._*
54 | 
55 | # Files that might appear in the root of a volume
56 | .DocumentRevisions-V100
57 | .fseventsd
58 | .Spotlight-V100
59 | .TemporaryItems
60 | .Trashes
61 | .VolumeIcon.icns
62 | 
63 | # Directories potentially created on remote AFP share
64 | .AppleDB
65 | .AppleDesktop
66 | Network Trash Folder
67 | Temporary Items
68 | .apdisk
69 | 
70 | # Windows
71 | # =========================
72 | 
73 | # Windows image file caches
74 | Thumbs.db
75 | ehthumbs.db
76 | 
77 | # Folder config file
78 | Desktop.ini
79 | 
80 | # Recycle Bin used on file shares
81 | $RECYCLE.BIN/
82 | 
83 | # Windows Installer files
84 | *.cab
85 | *.msi
86 | *.msm
87 | *.msp
88 | 
89 | # Windows shortcuts
90 | *.lnk
91 | client/src/views/LetterContainer.vue
92 | rethink-db/dinosaurus/dinosaurus/efabbcdf-9c30-4a0e-9e37-204826d3da29
93 | rethink-db/tiger/rethinkdb_data/metadata
94 | rethink-db/tiger/rethinkdb_data/log_file
95 | rethink-db/panther/rethinkdb_data/efabbcdf-9c30-4a0e-9e37-204826d3da29
96 | 


--------------------------------------------------------------------------------
/FormBase.vue:
--------------------------------------------------------------------------------
  1 | <!--CSS-->
  2 | <style scoped>  
  3 |  
  4 |   /* set error fading time */
  5 |   form .fade-enter-active {  transition: opacity 0.5s } 
  6 |   form .fade-leave-active {  transition: opacity 0.5s }
  7 |   form .fade-enter, .fade-leave-to{ opacity: 0 }  
  8 |   form .error { color:red; font-size: 0.9rem; }
  9 | 
 10 |   /* adapt margin from row  http://materializecss.com/grid.html */
 11 |   form .row{margin-left:-0rem; margin-right:-0rem; }
 12 | 
 13 | </style>
 14 | 
 15 | <!--HTML-->
 16 | <template>     
 17 | 
 18 |   <form id="form-base" >
 19 | 
 20 |     <!--using grids from materialize.css the class 'row' must be set here-->
 21 |     <ul class="collection" :class="nextRowClass"> 
 22 |         
 23 |       <li  :class="getGridClassName(obj)" v-for="(obj, index) in flatCombinedArraySorted" v-if="obj.schema.hidden !== true">
 24 | 
 25 |           <div :class="getItemClassName(obj)">
 26 |          
 27 |             <!--IMPORTANT: keynamed slots ok, but duplicate slots for each item or each type are not possible in v-for loop -->
 28 |             <!--Top Slot: <form-base ...><div slot="deep-nested-key-top-slot> content here </div></form-base>    -->
 29 |             <slot :name="getTopSlot(obj)"></slot>
 30 |       
 31 |             <!-- label replacing slot   <div slot="deep-nested-key-label-slot> -->
 32 |             <slot :name="getLabelSlot(obj)" v-if="obj.schema.label !== null">
 33 |               <div class="label" >
 34 |                 <label :for="makeKeyUnique(obj)">{{obj.schema.label || obj.key}}</label>
 35 |               </div>
 36 |             </slot>
 37 |             
 38 |             <!-- mid-slot -> <div slot="deep-nested-key-mid-slot>  -->
 39 |             <slot :name="getMidSlot(obj)"></slot>
 40 |             
 41 |             <!-- replacing input slot -> <div slot="deep-nested-key-input-slot">  -->
 42 |             <slot :name="getInputSlot(obj)">
 43 | 
 44 |               <!-- type select-->
 45 |               <!--IMPORTANT class="browser-default" must be set in <select> for working VUE.JS with MATERIALIZE.CSS-->
 46 |               <select :id="makeKeyUnique(obj,index)"  class="browser-default select" v-if="obj.schema.type === 'select'" 
 47 |                 :readonly="obj.schema.readonly" :required="obj.schema.required" :disabled="obj.schema.disabled" 
 48 |                 :title="obj.schema.title" @change="setValue($event, obj)">              
 49 |                 <option v-for="val in obj.schema.options" :selected="val == obj.value" :value="val">{{val}}</option>
 50 |               </select>
 51 | 
 52 |               <!-- type multiselect -->
 53 |               <!--IMPORTANT class="browser-default" must be set in <multiselect> for working VUE.JS with MATERIALIZE.CSS-->
 54 |               <select :id="makeKeyUnique(obj,index)"  class="browser-default multiselect" v-if="obj.schema.type === 'multiselect'" multiple
 55 |                 :readonly="obj.schema.readonly" :required="obj.schema.required" :disabled="obj.schema.disabled"             
 56 |                 :title="obj.schema.title" @change="setValue($event, obj)">              
 57 |                 <option v-for="val in obj.schema.options" :selected="obj.value && obj.value.includes(val)" :value="val">{{val}}</option>
 58 |               </select>
 59 | 
 60 |               <!-- type radio -->
 61 |               <div :id="makeKeyUnique(obj)" v-if="obj.schema.type === 'radio'" >     
 62 |                 <template v-for="(val, idx) in obj.schema.options" >
 63 |                   <input :id="makeKeyUnique(obj, idx)"  :name="obj.key" type="radio" :readonly="obj.schema.readonly" 
 64 |                   :required="obj.schema.required" :disabled="obj.schema.disabled"             
 65 |                   :title="obj.schema.title" :value="val" :checked="val === obj.value" @change="setValue($event, obj)" @input="setValue($event, obj)" />
 66 |                   <label :for="makeKeyUnique(obj, idx)" >{{val}}</label>
 67 |                 </template>
 68 |               </div>
 69 |         
 70 |               <!-- type file -->
 71 |               <div class="file-field input-field" v-if="obj.schema.type === 'file'" >
 72 |                 <div class="btn button">
 73 |                   <span>{{obj.schema.label}}</span>
 74 |                   <input :id="makeKeyUnique(obj)"  type="file" 
 75 |                     :readonly="obj.schema.readonly" :required="obj.schema.required" :disabled="obj.schema.disabled" :accept="obj.schema.accept"  
 76 |                     :title="obj.schema.title" :multiple="obj.schema.multiple || false" :pattern="obj.schema.pattern" @change="setValue($event, obj)"  />
 77 |                 </div>
 78 |                 <div class="file-path-wrapper" >
 79 |                   <input class="file-path path" type="text" :value="getValue(obj)" :placeholder="placeholder(obj)" 
 80 |                   :readonly="obj.schema.readonly" :disabled="obj.schema.disabled">
 81 |                 </div>
 82 |               </div>
 83 |               
 84 | 
 85 |               <!-- all input types except radio, select or file -->
 86 |               <div v-if="obj.schema.type !== 'file' && obj.schema.type !== 'radio' && obj.schema.type !== 'select' && obj.schema.type !== 'multiselect'" >
 87 |                 
 88 |                 <input :id="makeKeyUnique(obj)" :list="makeKeyUnique(obj,index)" :type="obj.schema.type" 
 89 |                 :readonly="obj.schema.readonly" :required="obj.schema.required" :disabled="obj.schema.disabled" :placeholder="placeholder(obj)"
 90 |                 :title="obj.schema.title" :maxlength="obj.schema.maxlength" :min="obj.schema.min" :max="obj.schema.max" :step="obj.schema.step" :pattern="obj.schema.pattern" 
 91 |                 :value="getValue(obj)" :checked="setCheckbox(obj)" @change="setValue($event, obj)" @invalid="setValue($event, obj)"  @input="setValue($event, obj)" />
 92 |                 
 93 |                 <!-- if type checkbox then set label -->
 94 |                 <label v-if="obj.schema.type === 'checkbox'" :for="makeKeyUnique(obj)" >{{obj.value}}</label>
 95 |                 
 96 |                 <!-- if options has array && optional type is list -->
 97 |                 <datalist :id="makeKeyUnique(obj,index)" v-if="Array.isArray(obj.schema.options)" >
 98 |                   <option v-for="val in obj.schema.options" :value="val"></option>
 99 |                 </datalist>
100 |               
101 |               </div>
102 |       
103 |             </slot>
104 | 
105 |             <transition name="fade" >          
106 |               <!-- replacing error slot  -> <div slot="deep-nested-key-error-slot> -->
107 |               <slot :name="getErrorSlot(obj)" v-if="obj.schema.error">
108 |                 <div class="error" >
109 |                   <span>{{obj.schema.error}}</span>
110 |                 </div>
111 |               </slot>
112 |             </transition>
113 | 
114 |             <!-- bottom slot  -> <div slot="deep-nested-key-bottom-slot> -->
115 |             <slot :name="getBottomSlot(obj)"></slot>
116 |           
117 |           </div>
118 |          
119 |       </li>
120 | 
121 |     </ul>    
122 | 
123 |   </form> 
124 | 
125 | </template>
126 | 
127 | <!--Script-->
128 | <script>
129 | 
130 |   // import & declarations
131 |     import { isString, isPlainObject, isFunction, isUndefined, clone, cloneDeep, orderBy } from 'lodash'     
132 | 
133 |     const sortDirection = 'ASC'         // sort formular item 'asc' or 'desc'
134 |     const pathDelimiter = '.'               
135 |     const makeKeyUniqueDelimiter ='-'
136 |     
137 |     const nextRowName = 'next-row'
138 |     const nextRowClass = 'row'
139 | 
140 |     const typeClassAppendix = '-type'
141 |     const keyClassAppendix  = '-key'
142 | 
143 |     const topSlotAppendix   = '-top-slot'
144 |     const labelSlotAppendix = '-label-slot'
145 |     const midSlotAppendix   = '-mid-slot'
146 |     const inputSlotAppendix = '-input-slot'
147 |     const bottomSlotAppendix= '-bottom-slot'
148 |     const errorSlotAppendix = '-error-slot'
149 | 
150 |     const keyIndividualizer = Math.random().toString(36).slice(-3)  
151 |   //
152 | 
153 |   export default {
154 |     
155 |     name:'vue-form-base',
156 | 
157 |     props: {
158 |       data:{
159 |         type: Object,
160 |         required: true
161 |       },    
162 |       schema:{
163 |         type: Object,
164 |         required: true
165 |       },      
166 |       dataStateName:{
167 |         type: String,
168 |         required: true
169 |       },
170 |       schemaStateName:{
171 |         type: String,
172 |         required: false
173 |       },
174 |     },
175 | 
176 |     data(){      
177 |       return {
178 |         nextRowClass,
179 |         keyIndividualizer,
180 |         flatCombinedArray: [], 
181 |         noSchemaStateName: {}  
182 |       }
183 |     },
184 |        
185 |     computed:{
186 |       
187 |       flatCombinedArraySorted(){ return orderBy(this.flatCombinedArray, ['schema.order'], [sortDirection])  },
188 |       
189 |       dataState: { 
190 |         get(){ this.updateArrayFromState(this.flatCombinedArray, this.$store.state[this.dataStateName]); 
191 |                 return this.$store.state[this.dataStateName] || {}         
192 |         }, 
193 |         set(val){ this.$store.state[this.dataStateName] = val }      
194 |       },
195 |      
196 |       schemaState: { 
197 |         get(){ return this.schemaStateName ? this.$store.state[this.schemaStateName] || {} : this.noSchemaStateName }, 
198 |         set(val){ this.schemaStateName ? this.$store.state[this.schemaStateName] = val : this.noSchemaStateName = val }      
199 |       }      
200 | 
201 | 
202 |     },
203 |     
204 |     methods:{ 
205 |     
206 |       makeKeyUnique(obj, idx=''){
207 |         // needed to avoid conflict with same attr[id] when displaying more than one editor-base component 
208 |         return obj.key + makeKeyUniqueDelimiter + this.keyIndividualizer + idx
209 |       },
210 | 
211 |       redoMakeKeyUnique(key){
212 |         // needed to avoid conflict with same attr[id] when displaying more than one editor-base component 
213 |         return key.split(makeKeyUniqueDelimiter)[0] 
214 |       },
215 | 
216 |       getKeyClassNameWithAppendix(obj, appendix){
217 |         // get KEY specific name by replacing '.' with '-' and appending '-top-slot'  -> 'address-city-top-slot'
218 |         return this.redoMakeKeyUnique(obj.key).replace(/\./g,'-') + appendix
219 |       },
220 | 
221 |       placeholder(obj){ 
222 |         // set placeholder definition
223 |         // if placeholder is null display nothing, 
224 |         // if placeholder is undefined then take label definition as placeholder        
225 |         return obj.schema.placeholder === null ? null : obj.schema.placeholder || obj.schema.label 
226 |       },
227 | 
228 |       setCheckbox(obj){
229 |         if (obj.schema.type !== 'checkbox') return 
230 |         return obj.schema.true ? obj.schema.true === obj.value : obj.value
231 |       },
232 |       
233 |       // slot identifier  replace label, error, input 
234 | 
235 |         getTopSlot(obj){
236 |           // get KEY specific name by replacing '.' with '-' and appending '-top-slot'  -> 'address-city-top-slot' 
237 |           return this.getKeyClassNameWithAppendix(obj, topSlotAppendix)
238 |         },
239 |         getLabelSlot(obj){
240 |           // get KEY specific name by replacing '.' with '-' and appending '-label-slot'  -> 'address-city-label-slot' 
241 |           return this.getKeyClassNameWithAppendix(obj, labelSlotAppendix)
242 |         },
243 |         getMidSlot(obj){
244 |           // get KEY specific name by replacing '.' with '-' and appending '-top-slot'  -> 'address-city-top-slot' 
245 |           return this.getKeyClassNameWithAppendix(obj, midSlotAppendix)
246 |         },
247 |         getInputSlot(obj){
248 |           // get KEY specific name by replacing '.' with '-' and appending '-input-slot'  -> 'address-city-input-slot' 
249 |           return this.getKeyClassNameWithAppendix(obj, inputSlotAppendix)
250 |         },        
251 |         getBottomSlot(obj){
252 |           // get KEY specific name by replacing '.' with '-' and appending '-bottom-slot'  -> 'address-city-bottom-slot' 
253 |           return this.getKeyClassNameWithAppendix(obj, bottomSlotAppendix)
254 |         },
255 |         getErrorSlot(obj){
256 |           // get KEY specific name by replacing '.' with '-' and appending '-error-slot'  -> 'address-city-error-slot' 
257 |           return this.getKeyClassNameWithAppendix(obj, errorSlotAppendix)
258 |         },
259 |         
260 |       //
261 |       
262 |       // getClassName functions      
263 |         getGridClassName(obj){          
264 |           // when using grid generate a new row by setting css:'next-row col s6'  ->  http://materializecss.com/grid.html
265 |           // 12 column grid with 3 items in one row -> schema:{ item1:{ css:'col s4' }, item2:{ css:'col s4' } , item3:{ css:'next-row col s4' } }
266 |           return obj.schema.css && obj.schema.css.indexOf(nextRowName) > -1 ? nextRowClass : '';
267 |         },
268 |         getKeyClassName(obj){
269 |           // get KEY specific class name by replacing '.' with '-' and appending '-key'  -> 'address-city-key' 
270 |           return this.getKeyClassNameWithAppendix(obj, keyClassAppendix)
271 |         },
272 |         getTypeClassName(obj){        
273 |           // get TYPE specific class name by appending '-type' -> 'checkbox-type'
274 |           return obj.schema.type + typeClassAppendix
275 |         },
276 | 
277 |         getCssClassName(obj){        
278 |           // get a class from schema.css ->  schema:{ user:{ css:'RED', ... } ... }
279 |           return obj.schema.css ? obj.schema.css : ''
280 |         },
281 | 
282 |         getItemClassName(obj){
283 |           // each item gets a class 'item', a class 'item-type' like 'checkbox-type', a class 'item-key' like 'address-city-key' and a class from schema.css      
284 |           // console.log(`item ${this.getTypeClassName(obj)} ${this.getKeyClassName(obj)} ${this.getCssClassName(obj)}`)
285 |           return `item ${this.getTypeClassName(obj)} ${this.getKeyClassName(obj)} ${this.getCssClassName(obj)}`
286 |         },     
287 |       //
288 | 
289 |       getValidationMessage(target){
290 |         // if title has value use title as validation message
291 |         return target.title ? target.title : target.validationMessage    
292 |       },
293 | 
294 |       noValidate(value, obj, data, schema){
295 |          isFunction(obj.schema.noValidate) ? obj.schema.noValidate(value, obj, data, schema) : obj.schema && (obj.schema.error = null)          
296 |       },
297 | 
298 |       validate(msg, obj, data, schema, validity){
299 |         if (!obj.schema.validate) return 
300 |         isFunction(obj.schema.validate) ? obj.schema.validate(msg, obj, data, schema, validity) : obj.schema.error = msg          
301 |       },
302 | 
303 |       mapGet(value, obj, data, schema){
304 |         // Map Value before being displayed
305 |         // handle incoming values with mapGet()    
306 |         return isFunction(obj.schema.mapGet) ? obj.schema.mapGet(value, obj, data, schema) : value
307 |       },  
308 | 
309 |       getValue(obj){            
310 |         return this.mapGet(obj.value, obj, this.dataState, this.schemaState)
311 |       },
312 | 
313 |       mapSet(value, obj, data, schema){
314 |         // Map Value before is stored in VUEX state
315 |         // handle outgoing values with mapSet()    
316 |         return isFunction(obj.schema.mapSet) ? obj.schema.mapSet(value, obj, data, schema) : value
317 |       },
318 |       
319 |       setValue( {target}, obj){
320 |         
321 |         // execute validate(validationMessage, obj, data, schema, validity) if 'validate' defined and validationMessage is available  
322 |         target.validationMessage 
323 |           ? this.validate( this.getValidationMessage(target) , obj, this.dataState, this.schemaState, target.validity)
324 |           : this.noValidate(value, obj, this.dataState, this.schemaState);
325 | 
326 |         // get key from event.target, handles 
327 |         let key = target ? (target.list ? target.list.id : (target.type === 'radio' ? target.parentElement.id :target.id)) : null
328 |         
329 |         // get original key == path in nested object
330 |         key = this.redoMakeKeyUnique(key)
331 | 
332 |         // get value from event.target
333 |         let value =  target ? target.value : null
334 |         
335 |         // prepare value from <input type checkbox>
336 |         value =  target.type === 'checkbox' ? (target.checked ? obj.schema.true || true: obj.schema.false || false): value
337 |         
338 |         // prepare value from <select>
339 |         value = target.selectedOptions ? Array.from(target.selectedOptions).map( o => o.value ) : value 
340 | 
341 |         // prepare value from <input type file>
342 |         value = obj.schema.type === 'file' ? Array.from(target.files).map( f =>f.name ) : value
343 |         
344 |         // call mapper for setting value
345 |         value = this.mapSet(value, obj, this.dataState, this.schemaState )
346 |    
347 |         // update State with value        
348 |         this.setObjectByPath(this.dataState, obj.key, value)
349 | 
350 |         // update Array for Display with value        
351 |         this.updateArrayFromState(this.flatCombinedArray, this.$store.state[this.dataStateName])
352 | 
353 |       },
354 | 
355 |       updateArrayFromState(flatArray, dataState) {       
356 |         // update for each key the value and schema 
357 |         this.flatCombinedArray.forEach( obj => {
358 |           obj.value = this.getObjectValueByPath(dataState, obj.key)
359 |           obj.schema = this.getObjectValueByPath(this.schemaState, obj.key)
360 |         })
361 | 
362 |       },
363 | 
364 |       getObjectValueByPath(object, path){
365 |         // resolves chained keys (like 'user.address.street') on an object and returns the value 
366 |         let pathArray=path.split(pathDelimiter)
367 |         let value
368 |         pathArray.forEach((p, ix) => {
369 |           if(ix === pathArray.length -1 ) value = object[p]  
370 |           if ( isUndefined(object[p]) ) return  
371 |           object = object[p]
372 |         })
373 |         return value
374 |       },
375 | 
376 |       setObjectByPath(object, path, value) {
377 |         // resolves chained keys (like 'user.address.street') on an object and set the value 
378 |         let pathArray=path.split(pathDelimiter)
379 |         pathArray.forEach((p, ix) => {
380 |           if(ix === pathArray.length -1 ) object[p] = value
381 |           object = object[p]
382 |         })
383 |       },
384 | 
385 |       flattenObjects(dat,sch) {
386 |         let data = {}
387 |         let schema = {}
388 |       
389 |         Object.keys(dat).forEach( i => {
390 |           if ( !Array.isArray(dat[i]) && typeof dat[i] === 'object' && dat[i]){
391 |             let {data: flatData, schema: flatSchema } = this.flattenObjects(dat[i], sch[i])
392 |             Object.keys(flatData).forEach(ii => {
393 |               data[i + pathDelimiter + ii] = flatData[ii]
394 |               schema[i + pathDelimiter + ii] = flatSchema[ii]
395 |             })
396 |           } else { 
397 |             data[i] = dat[i]
398 |             schema[i] = sch[i]         
399 |           }
400 |         })
401 |    
402 |         return {data, schema}
403 |       },
404 | 
405 |       combineObjectsToArray( {data, schema} ){
406 | 
407 |         let arr = [];
408 |         Object.keys(data).forEach(key => {  
409 |           
410 |           // if schema[key] is null, undefined, string or no plain object then skip           
411 |           if (!schema[key] ) {
412 |             console.warn(`Property '${key}' in Data has no correspondingly Schema Property and will be ignored!` )
413 |             return 
414 |           }  
415 |           if (!isPlainObject(schema[key]) ) {
416 |             console.warn(`Prop '${key}' must have a correspondingly Schema Prop with at least ${key}:{ type:'text'} as value.  Prop '${key}' will be ignored!` )
417 |             return 
418 |           }  
419 | 
420 |           arr.push( {key, value:data[key], schema:schema[key]} )
421 |         
422 |         })
423 |         return arr
424 |           
425 |       },
426 | 
427 |       flattenAndCombineToArray (data,schema) {
428 |         
429 |         // flatten nested structure of two objects 'data' & 'schema'  
430 |         let flattenedObjects = this.flattenObjects(data, schema)
431 |         
432 |         // ... and combine them to an array
433 |         return this.combineObjectsToArray(flattenedObjects)
434 |         
435 |       }
436 | 
437 |     },
438 | 
439 |     mounted(){        
440 | 
441 |       // check existence of necessary props 
442 |       if (!this.data || !isPlainObject(this.data) )  throw `Check '<form-base :data="..." >'! Property 'data' seem to be not an object or undefined!`
443 |       if (!this.schema || !isPlainObject(this.schema) ) throw `Check '<form-base :schema="..." >'! Property 'schema' seem to be not an object or undefined!`
444 |       if (!this.dataStateName || !isString(this.dataStateName) ) throw `Check '<form-base :dataStateName="..." >'! Property 'dataStateName' seem to be not a string or undefined!`
445 |       if ( this.schemaStateName && !isString(this.schemaStateName) ) throw `Check '<form-base :schemaStateName="..." >'! Property 'schemaStateName' seem to be not a string!`
446 | 
447 |       // decouple state dataState/schemaState from prop data/schema
448 |       this.dataState = cloneDeep(this.data) 
449 |       this.schemaState = cloneDeep(this.schema) 
450 | 
451 |       // make flat array which combines data & schema object for displaying data
452 |       this.flatCombinedArray = this.flattenAndCombineToArray(this.dataState, this.schemaState)
453 |         
454 |     } 
455 | 
456 |   }
457 | </script>
458 | 
459 | 
460 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 mimani
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | Vue-Form-Base
  3 | ===
  4 | 
  5 | ### DEPRECATED see next Version:  vuetify-form-base
  6 | 
  7 | Vue-Form-Base is a Vue 2.0 Component and Form-Generator for editing plain or deep nested Javascript objects getting a reactive Result. 
  8 | 
  9 | You have to create a lot of different forms? **Vue-Form-Base** can simplify your job by creating forms from JS-Objects.   
 10 | 
 11 | Select from different HTML5 Input-types like Text, Password, Checkboxes, Radios, Select, Multiselect, Color, Files or a lot of other fields. Apart from 'select' or multiselect' the Browser specific implementation of **Input-Types** is used. [Some Informations to HTML5 input-types here](https://www.wufoo.com/html5/) 
 12 | 
 13 | We use the [Materialize CSS](http://materializecss.com/) framework for styling. Input Fields have a clear, minimalistic design, but don't worry you can change your style with CSS in a lot of ways. For more details see section **Style with CSS**
 14 | 
 15 | Add global **Validation** to the form or validate only a single field. Use inline validation or write a new function for individuell validation. 
 16 | 
 17 | Make complex data editable by **mapping** your incoming and outgoing data:  i.e. change dateformats, trim strings or join/split arrays for editing in a textfield. 
 18 | 
 19 | And finally get a full reactive Result by using **Vuex.**
 20 |  
 21 | 
 22 | Installation
 23 | ===
 24 | 
 25 | 
 26 | 	npm install vue-form-base --save
 27 | 
 28 | Using [single-file components](https://vuejs.org/v2/guide/single-file-components.html) with a .vue extension,
 29 | 
 30 | import Formbase.vue File from your path
 31 | 
 32 | 	import FormBase from 'vue-form-base';  
 33 | 
 34 | then register in 
 35 | 
 36 | 	export default {	
 37 | 		...
 38 | 		components:{     
 39 | 	      FormBase
 40 | 	  	}
 41 | 	}
 42 | 
 43 | and use it in template
 44 | 	
 45 | 	<template>
 46 | 		<form-base :data="data" :schema="schema" data-state-name="datastate" />            
 47 |     </template>
 48 | 
 49 | 
 50 | 
 51 | 
 52 | **Minimalistic Example** 
 53 | 
 54 | If your **data-state-name** property has the value *datastate*, 
 55 | then you must additionally define `datastate`  in Vuex State.
 56 |  
 57 | 	State:{ 
 58 | 		datastate:null,
 59 | 		... 
 60 | 	}
 61 | 
 62 | Now use existing Data Object 
 63 | 
 64 | 	data:{ 
 65 | 	      name: 'smith',
 66 | 	      email:'smith@online.com'
 67 | 	}
 68 | 
 69 | define the following minimalistic Schema
 70 | 
 71 | 	 schema:{ 
 72 |       name: {type:'text'},
 73 |       email: {type:'email'}
 74 |      
 75 |     }
 76 | 
 77 | and get this full editable Form
 78 | 	
 79 | ![Form Example](https://raw.githubusercontent.com/wotamann/vue-form-base/master/images/name1.JPG)
 80 | 
 81 | 
 82 | **Edit using different Input-Types**
 83 | 
 84 | 
 85 | 
 86 | 
 87 | A more realistic Example.
 88 | 
 89 | Your Data to edit:
 90 | 
 91 | 
 92 |     data:{ 
 93 |       name: 'smith',
 94 |       email:'smith', 
 95 |       password: '12345ABCDEF',
 96 | 	  remember: 'undefined',
 97 |       address:{ 
 98 |         city:'NY',
 99 | 		 
100 |       } 
101 |     },
102 |     
103 | Create a Schema Object:
104 | 
105 |     schema:{ 
106 |       
107 | 		user: {type:'text', label:'User:', placeholder:'User...',
108 | 			mapSet: (val, obj, data, schema) => { 
109 | 				// type 'hide' to hide dependent item password 
110 | 				schema.password.hidden = val === 'hide'; 
111 | 				return val;
112 | 			}
113 | 		},
114 |      
115 | 		email: {type:'email',label:'Email:', validate:true }, 
116 | 		
117 | 		password: {type:'password', label:'Password(Numbers only):', pattern:'[0-9]*', validate: msg => console.log(msg) },
118 | 		
119 | 		remember: {type:'checkbox', label:'Remember Me:', true:'Yes', false:'No' }, 	
120 | 		
121 | 		address:{ 
122 | 			city:{ type:'text', mapSet: v => v && v.toUpperCase() }
123 |   		} 
124 |     }
125 | 
126 | ![](https://raw.githubusercontent.com/wotamann/vue-form-base/master/images/name2.JPG)
127 | 
128 | 
129 | 
130 | >IMPORTANT: 
131 | >
132 | >Properties from Data-Object, which doesn't exist in Schema-Object, are ignored.
133 | 
134 | 
135 | Reactive Result (Vuex)
136 | ===
137 | 
138 | Model `Data` und describing `Schema` flow as prop into the `Vue-Form-Base`. On the concept of *one-way data flow* you get reactive access to your modified data via Vuex Store `$store.state.datastate` . Installed Vuex is mandatory, details about Vuex you can find here [Vuex-Introduction](https://vuex.vuejs.org/en/intro.html)
139 | 
140 |     <form-base :data="data" :schema="schema" data-state-name="datastate" />
141 | 
142 | If you need to dynamically modify the internal Schema (for example if you want to change dynamically `schema.hidden` to show/hide one item depending from the input of another item) you can have reactive access to the modified Schema via Vuex Store `$store.state.schemastate`.
143 | 
144 | Inside a single component .vue file you can use your component like this
145 | 		
146 |     <template>
147 | 
148 | 	   	<form-base 
149 | 		    :data="data" 
150 | 		    :schema="schema" 
151 | 		    data-state-name="datastate" 
152 | 		    schema-state-name="schemastate" 
153 | 		>
154 | 		</form-base>
155 | 
156 |     </template>
157 |     
158 | Get **Access** to the reactive Result using Vuex State anywhere in your Project. 
159 | 
160 | 
161 |     this.$store.state.datastate
162 | 
163 | 
164 | > IMPORTANT: 
165 | > 
166 | > 'Data' and 'Schema' passed as Prop becomes not mutated. 
167 | 
168 | Two Forms can be reactiv **Linked** by using the same state property
169 | 
170 | 	<form-base :data="data" :schema="schema" data-state-name="dataCommon" />
171 | 
172 | 	<form-base :data="data" :schema="schema" data-state-name="dataCommon" />
173 | 
174 | and if you need different CSS
175 | 
176 | 	<form-base id="form1" :data="data" :schema="schema" data-state-name="dataCommon" />
177 | 
178 | 	<form-base id="form2" :data="data" :schema="schema" data-state-name="dataCommon" />
179 |  
180 | 
181 | **Reset**  modified Data and modified Schema use following code inside the parent single component .vue file
182 | 
183 | If you need to change the Schema-Object dynamically, like in this case hiding another item 
184 | 
185 | 	schema:{
186 | 		...
187 | 		user: {
188 | 			type:'text', 
189 | 			mapSet: (val, obj, data, schema) => { schema.password.hidden = val === 'hide'; return val }
190 | 		},	
191 | 		password: {
192 | 		...
193 | 		}
194 | 	}
195 | 
196 | then you need `datastate` and `schemastate` to restore like in this case
197 | 
198 | 	...
199 | 	methods:{
200 | 	    reset(){
201 | 	      this.$store.state.datastate= cloneDeep(this.data); 
202 | 	      this.$store.state.schemastate= cloneDeep(this.schema)
203 | 	    },
204 | 	    ...  
205 | 	  },
206 | 	  ...
207 | 
208 | In common use cases without modified Schema **Reset** can be shortened  
209 | 
210 | 	<template>      
211 |       <form-base :data="data" :schema="schema" data-state-name="datastate" />
212 |     </template>
213 | 	
214 | 	<script>
215 | 		import { cloneDeep } from 'lodash'
216 | 
217 | 		export default {
218 | 		...
219 | 		methods:{
220 | 		    reset(){
221 | 		      this.$store.state.datastate= cloneDeep(this.data); 
222 | 		    },
223 | 		    ...  
224 | 		},
225 | 		...
226 | 	</script>
227 | 
228 | 
229 | 
230 | 
231 | Schema
232 | ===
233 | 
234 | 	 <form-base :schema="schema" ... />
235 | 
236 | Schema is an object, which defines and controls the behavior of your form. Each Key in your schema-object must reflect a key in the data-object. 
237 | 
238 | 	schema:{
239 | 		user: { type:'text'}, // minimalistic definition of input-type 
240 | 	}
241 | 
242 | 
243 | 	// more 
244 | 
245 | 	validate = val => console.log(val);
246 | 	mapSet  = val => val + '!'
247 | 	schema:{
248 | 		user: { 
249 | 			type:'text', 
250 | 			label:'User:', 
251 | 			pattern:'([A-Z]*)', 
252 | 			css:'blue', 
253 | 			validate, 			// is the same as - validate:validate,
254 | 			mapSet, 			// is the same as - mapSet:mapSet,
255 | 			order:1 
256 | 		},
257 | 		... 
258 | 	}
259 | 	
260 | In common use cases the the value will be another object with several properties, to get different control over the behaviour of your input-field. 	
261 | 
262 | **Properties in Schema**
263 | 
264 |   
265 | 	schema:{ 
266 | 		order: number,          // controls order of displaying 
267 | 		
268 | 		type: string,           // 'text', 'password', 'email', ...
269 | 		label: string,          // title of item    
270 | 		placeholder: string,    // placeholder set null to hide 
271 | 		true: string,           // text if checkbox is checked  
272 | 		false: string,          // text if checkbox is unchecked 
273 | 		accept: string,         // type:'file' - limit files audio/*, image/*, .pdf
274 | 		title: string,          // define your own validation message
275 | 		error: string,          // preset/set inline error msg
276 | 
277 | 		css: string,            // inject one or more classnames at item level 
278 | 		// Use 12 column grid system from materializecss.com/grid.html for displaying items
279 | 		// for example a 12 column grid with 3 items in one row would look like:
280 | 		// schema:{ item1:{ css:'col s4'}, item2:{ css:'col s4'}, item3:{ css:'next-row col s4'} }
281 |      	
282 | 		pattern: string,        // regex to control input  
283 | 		
284 | 		min: number,            // limit number or range
285 | 		max: number,            // limit number or range
286 | 		step: number,        
287 | 		maxlength: number,      // max length of type text, password, email 
288 | 		
289 | 		multiple: bool,         // type:'file' select one or more files   
290 | 		required: bool,         // need an input value
291 | 		disabled: bool,         // disable input field
292 | 		readonly: bool,          
293 | 		hidden: bool,           // hide item - set from another item
294 | 		
295 | 		options: array,         // used with type: radio, list, text, select, mselect
296 |  
297 | 		mapGet: function,       function( val, obj, state, schema ) {... return val}	
298 | 		mapSet: function,       function( val, obj, state, schema ) {... return val} }
299 | 		
300 | 		validate: true          // use inline error message
301 | 		validate: function,     function( msg, obj, state, schema, validity ) {...}         
302 | 		noValidate: function,   function( value, obj, state, schema ) {...}
303 | 	}          
304 |           
305 | 
306 | **Real-Life Example** 
307 | 
308 |     ...
309 |     schema:{ 
310 | 	    
311 | 	    user: { type:'text', label:'Fullname:', placeholder:'Name...', css:'col s6'}, 
312 | 	    
313 |         email: {type:'email', validate:true, mapSet: v => v && v.toUpperCase(), css:'next-row col s6' },
314 |  	    
315 |         singleRole:{ type:'select', options:['Admin','Guest','User'] }, 
316 |  	   
317 |       }
318 |       ...
319 | 	
320 | 
321 | 
322 | 
323 | 
324 | 
325 | Style with CSS 
326 | ---
327 | 
328 | Customize your **vue-form-base** component using the following CSS-Classnames 
329 |  
330 | 
331 | >  IMPORTANT:  
332 | >  Don't use `<style scoped>` in parents component, because scoped definitions
333 | >  are inside the child component not accessable
334 | 
335 |    
336 | **Form-ID**
337 | 
338 | `#form-base` is the default form-id. If you need different CSS for two or more forms in the same parent component, then change default value by setting a different id for each component and use this new id  
339 | 	
340 | 	/* default */
341 | 	<form-base ... />  
342 |   	#form-base .collection {...}
343 | 
344 | 	/* individualize it */
345 | 	<form-base id="my-custom-id" ... />  
346 |   	#my-custom-id .collection {...} 
347 | 
348 | **General - Classnames**
349 | 
350 | 
351 | 	  #form-base .collection {...}   	// style container for all items	   
352 | 	  #form-base .item {...}     		// each key is represented, by an item   
353 | 	  #form-base .error {...}        	// style inline-error messages 	  
354 | 	  
355 |   **Validate with Pseudoselectors**
356 | 	  
357 | 	  #form-base .item input:invalid { background-color: #fdd; }
358 | 	  #form-base .item input:valid { background-color: #dfd; }
359 | 	  #form-base .item input:focus { background-color: #ffd; }          
360 |   
361 | **Type - Classnames** 
362 | 
363 |   Style all items of a specific type, then use type-classnames. They start with a type ie. `password` appending `-type`. Then you have a classname `password-type` 
364 | 
365 | 	#form-base .text-type {...}  or  #form-base .item.text-type {...}
366 | 
367 | You can use most of HTML5 input-types like `<input type="password" />`. [Some Informations to HTML5 input-types](https://www.wufoo.com/html5/)
368 | 	  	   	
369 |   	
370 | 	/*	
371 | 		Available Types:
372 | 		text,  password, email, select, multiselect, list, file, radio, 
373 | 		checkbox, number, range, url, date, time, week, month 
374 | 		
375 | 		use class by appending -type  ->  .text-type 
376 | 	*/
377 | 
378 | 	  #form-base .text-type { font-weight:500 }
379 | 	  #form-base .item.select-type {...}
380 | 	  #form-base .item.multiselect-type {...}
381 | 	  #form-base .item.checkbox-type {...}
382 | 	  
383 | **Make validate CSS for multiselect type**
384 | 
385 | If you want to style select or multiselect types you have append `select` after the classname
386 |  
387 | 	 #form-base .item.multiselect-item select { height:6rem }
388 | 
389 | 
390 |   **Key - Classnames** 
391 | 
392 |   Here you get direct access to each key in your Data-Object. If you want access deep nested keys youst must use a hyphen 
393 | 
394 | 	data{ user:{ address:{ city:'',... } ... } ... }
395 |  
396 | access deep nested key 'city' with CSS
397 | 
398 | 	  #form-base .item.user-address-city-key {...}    
399 | 
400 |     
401 | 
402 | 
403 | 
404 | Example
405 | ===
406 | 
407 | a)
408 | Use Example with vue-webapp template, checkout example directory in this repo and follow the readme.
409 | 
410 | 
411 | b) 
412 | Here is a working Vue-File, you can integrate this in your vue-project. Lodash and Vuex must be installed. In initial Vuex state definition `state.datastate ` must exist
413 | 	
414 | 	
415 |     <style>
416 |       #form-base .error { color:red}
417 |       #form-base .item input:invalid{ background-color: #fdd; }
418 |     </style>
419 |     
420 | 	<template>
421 |       {{$store.state.datastate}}
422 |       <form-base :data="data" :schema="schema" data-state-name="datastate" />             
423 |     </template>
424 | 
425 |     import FormBase from './FormBase.vue';  
426 | 
427 |     export default {
428 |   
429 |       data () {
430 |         return {  
431 |       
432 |           data:{
433 |             user: 'smith',
434 |             pw: 'secret'			
435 |           },       
436 |               
437 |           schema:{
438 |             user: { 
439 |           		type:'text', 
440 |               	label:'User:',
441 | 				placeholder:'User...'    
442 |             },
443 |             pw: { 
444 | 				type:'password',
445 | 				pattern:'^.{6,}', 
446 | 				lable:'Password:',
447 | 				title: 'Password must have minimal 6 Chars',
448 | 				required:true,
449 | 				validate:true
450 |             }
451 |           }  
452 |         } 
453 |       },
454 |     
455 |       components:{     
456 |           FormBase
457 |       }
458 |     }  
459 |       
460 | 
461 | 
462 | Features
463 | ===
464 | 
465 | * vue-component
466 | * edit plain or deep nested objects
467 | * support most of input types
468 | * full reactive result
469 | * configurable via Schema Defintion
470 | * configurable Style based on Materialize CSS 
471 | 
472 | 
473 | 
474 | Dependencies
475 | ===
476 | 
477 | * Vue 2.0
478 | 
479 | * Vuex
480 | 
481 | * Lodash
482 | 
483 | * Materialize CSSs
484 | 
485 | 
486 | 
487 | Similar Projects
488 | ===
489 | 
490 | [vue-form-generator](https://github.com/icebob/vue-form-generator)
491 | 
492 | [vue-formular](https://github.com/matfish2/vue-formular)
493 | 
494 | 
495 | 
496 | 
497 | 
498 | 
499 | 
500 | 


--------------------------------------------------------------------------------
/docs/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-minimal


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |     <title>My First HTML Page</title>
 7 | </head>
 8 | 
 9 | <body>
10 | 
11 |     My text goes here.
12 | 
13 | </body>
14 | 
15 | </html>
16 | 


--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
 1 | ## Welcome to GitHub Pages
 2 | 
 3 | You can use the [editor on GitHub](https://github.com/wotamann/vue-form-base/edit/master/docs/index.md) to maintain and preview the content for your website in Markdown files.
 4 | 
 5 | Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files.
 6 | 
 7 | ### Markdown
 8 | 
 9 | Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
10 | 
11 | ```markdown
12 | Syntax highlighted code block
13 | 
14 | # Header 1
15 | ## Header 2
16 | ### Header 3
17 | 
18 | - Bulleted
19 | - List
20 | 
21 | 1. Numbered
22 | 2. List
23 | 
24 | **Bold** and _Italic_ and `Code` text
25 | 
26 | [Link](url) and ![Image](src)
27 | ```
28 | 
29 | For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/).
30 | 
31 | ### Jekyll Themes
32 | 
33 | Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/wotamann/vue-form-base/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file.
34 | 
35 | ### Support or Contact
36 | 
37 | Having trouble with Pages? Check out our [documentation](https://docs.github.com/categories/github-pages-basics/) or [contact support](https://support.github.com/contact) and we’ll help you sort it out.
38 | 


--------------------------------------------------------------------------------
/example/vue-form-base/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["es2015", { "modules": false }]
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/example/vue-form-base/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/example/vue-form-base/.gitignore:
--------------------------------------------------------------------------------
 1 | #dist in Client
 2 | dist
 3 | 
 4 | node_modules
 5 | 
 6 | # Logs
 7 | logs
 8 | *.log
 9 | npm-debug.log*
10 | 
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
23 | .grunt
24 | 
25 | # node-waf configuration
26 | .lock-wscript
27 | 
28 | # Compiled binary addons (http://nodejs.org/api/addons.html)
29 | build/Release
30 | 
31 | # Dependency directories
32 | node_modules
33 | jspm_packages
34 | 
35 | # Optional npm cache directory
36 | .npm
37 | 
38 | # Optional REPL history
39 | .node_repl_history
40 | 
41 | # =========================
42 | # Operating System Files
43 | # =========================
44 | 
45 | # OSX
46 | # =========================
47 | 
48 | .DS_Store
49 | .AppleDouble
50 | .LSOverride
51 | 
52 | # Thumbnails
53 | ._*
54 | 
55 | # Files that might appear in the root of a volume
56 | .DocumentRevisions-V100
57 | .fseventsd
58 | .Spotlight-V100
59 | .TemporaryItems
60 | .Trashes
61 | .VolumeIcon.icns
62 | 
63 | # Directories potentially created on remote AFP share
64 | .AppleDB
65 | .AppleDesktop
66 | Network Trash Folder
67 | Temporary Items
68 | .apdisk
69 | 
70 | # Windows
71 | # =========================
72 | 
73 | # Windows image file caches
74 | Thumbs.db
75 | ehthumbs.db
76 | 
77 | # Folder config file
78 | Desktop.ini
79 | 
80 | # Recycle Bin used on file shares
81 | $RECYCLE.BIN/
82 | 
83 | # Windows Installer files
84 | *.cab
85 | *.msi
86 | *.msm
87 | *.msp
88 | 
89 | # Windows shortcuts
90 | *.lnk
91 | client/src/views/LetterContainer.vue
92 | rethink-db/dinosaurus/dinosaurus/efabbcdf-9c30-4a0e-9e37-204826d3da29
93 | rethink-db/tiger/rethinkdb_data/metadata
94 | rethink-db/tiger/rethinkdb_data/log_file
95 | rethink-db/panther/rethinkdb_data/efabbcdf-9c30-4a0e-9e37-204826d3da29
96 | 


--------------------------------------------------------------------------------
/example/vue-form-base/README.md:
--------------------------------------------------------------------------------
 1 | ## Example of vue-form-base
 2 | 
 3 | > A Vue component which generates a form to edit plain or nested JS-Objects with a reactive Result using Vuex. 
 4 | 
 5 | > Integrate 'formBase.vue' like a Vue-component into your project 
 6 | 
 7 | 
 8 | 
 9 | ## Build Setup
10 | 
11 | 
12 | **install dependencies**
13 | 
14 | npm install
15 | 
16 | **serve with hot reload at localhost:8080**
17 | 
18 | npm run dev
19 | 
20 | **build for production with minification**
21 | 
22 | npm run build
23 | 
24 | 
25 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
26 | 
27 | 
28 | 
29 | 


--------------------------------------------------------------------------------
/example/vue-form-base/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>form-base</title>
 6 |     <!--Materialize CSS-->
 7 |     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" >    
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" media="screen, projection" />    
 9 |     
10 |     <!--Bootstrap CSS-->
11 |     <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen, projection" />    -->
12 |    
13 |   </head>
14 |   <body>
15 |     <div id="app"></div>    
16 |     <!--Materialize JS-->
17 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
18 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>   
19 | 
20 |     <!--Bootstrap JS-->
21 |     <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
22 | 
23 |     <script src="/dist/build.js"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/example/vue-form-base/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-form-base-demo",
 3 |   "description": "demo of vue-form-base",
 4 |   "version": "1.0.0",
 5 |   "author": "wotamann <woko@aon.at>",
 6 |   "private": true,
 7 |   "license": "MIT",
 8 |   "scripts": {
 9 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
10 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
11 |   },
12 |   "dependencies": {
13 |     "lodash": "^4.17.4",
14 |     "vue": "^2.1.0",
15 |     "vue-form-base": "0.0.3 - 0.2.5",
16 |     "vuex": "^2.1.2"
17 |   },
18 |   "devDependencies": {
19 |     "babel-core": "^6.0.0",
20 |     "babel-loader": "^6.0.0",
21 |     "babel-preset-es2015": "^6.0.0",
22 |     "cross-env": "^3.0.0",
23 |     "css-loader": "^0.25.0",
24 |     "file-loader": "^0.9.0",
25 |     "url-loader": "^0.5.7",
26 |     "vue-loader": "^10.0.0",
27 |     "vue-template-compiler": "^2.1.0",
28 |     "webpack": "^2.2.0",
29 |     "webpack-dev-server": "^2.2.0"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/example/vue-form-base/src/App.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 | 
  3 |   /*
  4 |     Customize your VUE-FORM-BASE component using the following CSS-Classnames
  5 |     -------------------------------------------------------------------------
  6 |     
  7 |     SCOPED - INFORMATION: don't use '<style scoped>' for this definitions, because a 'scoped' definition is inside the component not accessable 
  8 |       
  9 |     // FORM-ID  
 10 |     #form-base  // Is the default name. If you need different CSS for two forms then change default value 'form-base'  
 11 |                    by setting a different 'id' <form-base id="custom-id" ... /> for each component    
 12 | 
 13 |     // GENERAL classes ----------------------------------------------------------------------------------          
 14 |     #form-base .collection,   // 
 15 |     #form-base .item,         // for example, give all items the same backgroundcolor
 16 |     #form-base .error,        // style here your error messages 
 17 | 
 18 |     // VALIDATE CSS Pseudoselectors
 19 |     #form-base .item input:invalid{ background-color: #fdd; }
 20 |     #form-base .item input:valid{ background-color: #dfd; }
 21 |     #form-base .item input:focus{ background-color: #ffd; }          
 22 |     
 23 | 
 24 |     // TYPE specific classes ----------------------------------------------------------------------------
 25 |     // most typenames are the same types of HTML5 <input> tag, like for example <input type="password" /> 
 26 |     // all type implementation are browser dependent and in some browsers different.
 27 |     // Use [text],  password, email, select, multiselect, list, file, radio, checkbox, number, range, url, date, time, week, month
 28 |     #form-base .item.text-type,
 29 |     #form-base .item.select-type,
 30 |     #form-base .item.multiselect-type,
 31 |     #form-base .item.checkbox-type,
 32 |     
 33 |     // make invalid css for multiselect type
 34 |     #form-base .item.multiselect-item input:invalid{ background-color: #fc5; }
 35 |     #form-base .item.multiselect-item select { height:6rem }
 36 | 
 37 | 
 38 |     // KEY specific classes -----------------------------------------------------------------------------
 39 |     // here you have direct access to each key in your data-object
 40 |     #form-base .item.lastname-key,
 41 |     #form-base .item.user-address-city-key, // deep nested key
 42 | 
 43 |     // make invalid css for individual key
 44 |     #form-base .item.address-city-key input:invalid{ background-color: #fda; }
 45 |     #form-base .item.lastname-key input:focus{ background-color: #ff9; }          
 46 |     
 47 |     
 48 |   */
 49 | 
 50 |   /* ---- General CSS ---- */
 51 |   #form-base .collection { padding: 8px;  }
 52 |   #form-base .collection .item{ background-color: #efe; border-bottom: 1px solid #0c0}
 53 |   #right-form-base .collection .item{ background-color: #eeeeff; border-bottom: 1px solid #55f}
 54 | 
 55 |   /* ---- set INPUT Pseudoselectors valid, invalid, focus css for all items ---- */
 56 |   #form-base .item input:invalid{ background-color: #fdd; }
 57 |   #form-base .item input:valid{ background-color: #dfd; }
 58 |   #form-base .item input:focus{ background-color: #ffd; }    
 59 | 
 60 |   /* ---- set TYPE CSS ---- */
 61 |  
 62 |   /* set css for all items with type text */
 63 |   #right-form-base .text-type { color: #00d }
 64 |   
 65 | 
 66 |   /* ---- set KEY CSS ---- */
 67 | 
 68 |   /* set individual invalid-css only for password key */
 69 |   #form-base .item.password-key input:invalid{ background-color: darkorange; color: white }
 70 |   #right-form-base .item.password-key input:invalid{ background-color: purple; color: white } 
 71 |   
 72 |   /* set individual css for key mselect */
 73 |   #form-base .item.nested-selections-mselect-key select{ height:8rem; background-color: yellowgreen; color:white}
 74 |   #form-base .item.select-type select{ height:3rem; background-color: yellowgreen; color:white}
 75 |   
 76 |   /* set individual css for key fileselector */
 77 |   #form-base .item.fileselector-key .button { background-color: yellowgreen; color:white}
 78 |   #form-base .item.fileselector-key .path{ background-color: yellowgreen; color:white}
 79 |   
 80 |   .small {font-size: 0.85rem; color: #555; padding: 1rem}
 81 | 
 82 | </style>
 83 | 
 84 | <template>
 85 | 
 86 |   <div id="app" >
 87 |     
 88 |     <div class="small">
 89 |       <p>Unmutated Data:</p>
 90 |       <p>{{ data }}</p>
 91 |       
 92 |       <p>Reactive State:</p>    
 93 |       <p>{{ $store.state.data }}</p>
 94 |     
 95 |       <p>Reactive Schema:</p>    
 96 |       <p>{{ $store.state.schema }}</p>
 97 |       
 98 |       <button class="btn" @click="reset()">Reset</button> 
 99 |     </div>
100 |    
101 |        
102 |       <div class="row">
103 |       
104 |         <!--use vue-form-base component LEFT-->
105 |         <div class="col m6 s12">          
106 |           <p>Left Formbase</p>
107 |           
108 |           <form-base :data="data" :schema="schema" data-state-name="data" schema-state-name="schema">
109 |                            
110 |           </form-base>
111 |         
112 |         </div>
113 |         
114 |         <!--use vue-form-base component RIGHT-->
115 |         <div class="col m6 s12">          
116 |           <p>Right Formbase (different CSS)</p>
117 | 
118 |           <form-base id="right-form-base" :data="data" :schema="schema" data-state-name="data" schema-state-name="schema" >
119 |             <!--demo use of key named slots like: key-top-slot, key-bottom-slot -->
120 |             <div slot="email-pre-slot" class="card blue white-text">key-pre-slot Item </div>       
121 |             <div slot="email-top-slot" class="card amber white-text">key-top-slot Position</div>       
122 |             <div slot="email-label-slot" class="card blue white-text">key-label-slot {{$store.state.schema &&  $store.state.schema.email.label}}</div>       
123 |             <div slot="email-mid-slot" class="card amber white-text">key-mid-slot Position</div>       
124 |             <div slot="email-input-slot" class="card blue white-text">key-input-slot replacing 
125 |               <p class="white blue-text">{{ $store.state.data && $store.state.data.email}}</p>
126 |             </div>       
127 |             <div slot="email-bottom-slot" class="card amber white-text">key-bottom-slot Position</div>       
128 |             <div slot="email-post-slot" class="card blue white-text">key-post-slot Item</div>       
129 |             <div slot="email-error-slot" class="card white red-text">Slot@Error:{{$store.state.schema && $store.state.schema.email.error}}</div>     
130 |            
131 |             <!--use nested key named slots like: mykey-top-slot, mykey-bottom-slot -->                     
132 |             <div slot="nested-selections-mselect-top-slot" class="card blue white-text">Named Slot at Top Position</div>       
133 |             <div slot="nested-selections-mselect-bottom-slot" class="card blue white-text">Named Slot at Bottom Position</div>       
134 |             
135 |           </form-base>
136 |         
137 |         </div>             
138 |         
139 |       </div>
140 |   </div>
141 | </template>
142 | 
143 | 
144 | <script>
145 |   import FormBase from './components/FormBase.vue' // use local copy  
146 |   // import FormBase from 'vue-form-base'  // use node_modules
147 |   import { cloneDeep, isString, isArray } from 'lodash'
148 | 
149 |   export default {
150 | 
151 |     data() {
152 |       return {  
153 |     
154 |         data:{
155 | 
156 |           title: 'MD',
157 |           prename:'Dahlia',          
158 |           lastname: "Wynestone",
159 |           
160 |           user: "smith",
161 |           password: '12345',
162 |           email:'smith@online.com',          
163 |           
164 |           nested:{
165 |             checkbox: 'untouched',
166 |             radio: 'Yoga', 
167 |             color: '#bcdf2f',
168 |           
169 |             selections: {
170 |               select: 'Resilience',             // preselected
171 |               mselect: ['Yoga', 'Resilience'],  // preselected 
172 |             },
173 |           
174 |           },
175 | 
176 |           fileselector:'green-tea.jpg',
177 | 
178 |         },
179 | 
180 |         schema:{    
181 |           /*  Schema Definition and available Properties
182 |               recommended info https://www.wufoo.com/html5/
183 | 
184 |               schema:{ 
185 |                 order: number,          // controls order of displaying items 
186 |                 
187 |                 type: string,           // ['text', 'list', 'password', 'email', 'url', 'select', 'multiselect', 'file', 'radio', 'checkbox', 'number', 'range', 'date', 'time', 'week', 'month'] 
188 |                 label: string,          // title of item    
189 |                 placeholder: string,    // placeholder text if value is empty 
190 |                 true: string,           // text if checkbox is checked  
191 |                 false: string,          // text if checkbox is unchecked 
192 |                 accept: string,         // only in type:'file' limit to accepted files -  audio/*, video/*, image/*, image/gif, .pdf, .doc  
193 |                 
194 |                 title: string,          // optional define your own validation message
195 |                 error: string,          // preset/set inline error msg
196 |                 
197 |                 css: string,            // inject one or more classnames at item level, 
198 |                 // Use GRID 12 column system from materializecss.com/grid.html for displaying items
199 |                 // for example a 12 column grid with responsive display would look like:
200 |                 // schema:{ item1:{ css:'col l4 m6 s12'}, item2:{ css:'col l4 m6 s12'}, item3:{ css:'next-row col l4 m6 s12'} }
201 |     
202 |                 min: number,            // limit number or range
203 |                 max: number,            // limit number or range
204 |                 step: number,        
205 |                 maxlength: number,      // max length of type text/email 
206 |                 
207 |                 pattern: regexString,   // control allowed text input via regex
208 | 
209 |                 multiple: bool,         // use with type:'file' select one or more files   
210 |                 required: bool, 
211 |                 disabled: bool, 
212 |                 readonly: bool, 
213 |                 hidden: bool,           // do not display item - could be dynamically set from another item
214 | 
215 |                 options: array,         // used with type: radio, list, text, select, mselect 
216 |                 
217 |                 // this Function MUST return a value
218 |                 mapGet: function,       function( value, obj, state, schema ) { value, obj.key, obj.value, obj.schema ->  IMPORTANT! Always return incoming mapped value }
219 |                 
220 |                 // this Function MUST return a value or a promise
221 |                 mapSet: function,       function( value, obj, state, schema ) { value, obj.key, obj.value, obj.schema ->  IMPORTANT! Always return outgoing mapped value }
222 |                 
223 |                 // Validation 
224 |                 validate: undefined     // no validation
225 |                 validate: true          // use inline error message or 
226 |                 validate: function,     function( validationMessage, obj, state, schema, validity ) { use validationMessage state to log or display validation message  } 
227 |                 // No Validation               
228 |                 noValidate: function,   function( value, obj, state, schema ) { use value, obj.key, obj.value, obj.schema to handle novalidation }
229 |               }  
230 | 
231 |           */ 
232 |         
233 |           // Responsive 12 Column Grid - http://materializecss.com/grid.html 
234 |           // finish columns with class 'next-row' -{... css:'next-row col s4' ...}  
235 |           title:{
236 |             type:'text', label:'Title', css:'col l2 m2 s2'
237 |           },
238 |           prename:{
239 |             type:'text', label:'Firstname', required:true, css:'col l4 m4 s10'
240 |           },
241 |           lastname:{
242 |             type:'text', label:'Lastname', required:true, css:'next-row col l4 m6 s12'
243 |           },
244 |           
245 |           user: { 
246 |             type:'text', label:`Type 'hide', value required`, validate:true, required:true,
247 |             // mapGet: v => v.toUpperCase(),
248 |             mapSet: (val, obj, data, schema) => { schema.email.hidden = val.toUpperCase() === 'HIDE'; return val}, 
249 |             css:'col l3 m6 s12',            
250 |           },
251 |           password:{ 
252 |             type:'password', label:'Password [0-9], custom invalidate', required:true, pattern:'[0-9]*', css:'col l3 m6 s12',          
253 |             validate:(msg, obj, data, schema, validity) => { console.warn(msg); obj.schema.error = `Customized Error: ${msg}`; schema.user.error ="Invalid Password for this User" }, 
254 |             noValidate:(val, obj, data, schema) => { schema.user.error = null; obj.schema.error = null  }, 
255 |             // validate undefined   // no validation 
256 |             // validate:true,       // show inline error message          
257 |             // validate:(msg) => console.warn(msg), 
258 |           },        
259 |           email: {
260 |             type:'email',label:'Email, custom css', validate:true, css: 'yellow lighten-4 next-row col l6 m12 s12' 
261 |           }, 
262 |         
263 |           nested:{
264 |             
265 |             checkbox: { type:'checkbox', true:'Yes!', false:'Oh No!', css: 'col s4' },
266 |             radio: { type:'radio', hidden:false, options:['Resilience','Green Tea','Yoga','Curry'], css: 'col s4' }, 
267 |             color:{ type:'color', css: 'next-row col s4' }, 
268 |           
269 |             selections: {
270 |               select: { type:'select', label:'Select One', options:['Resilience','Green Tea','Yoga','Curry']},
271 |               mselect: { type:'multiselect', label:'Select Some', required:true,  validate:true, options:['Resilience','Green Tea','Yoga','Curry']},
272 |             }, 
273 |           
274 |           },
275 | 
276 |           fileselector:{ 
277 |             type:'file', multiple:true, label:'Drag/Select Files!' 
278 |           },
279 |         
280 |         },
281 |       }
282 |     },
283 | 
284 |     methods:{
285 | 
286 |       reset(){
287 |         this.$store.state.data = cloneDeep(this.data); 
288 |         this.$store.state.schema = cloneDeep(this.schema)
289 |       }  
290 | 
291 |     },
292 | 
293 |     components: { 
294 |       FormBase 
295 |     },
296 | 
297 |   }
298 | </script>
299 | 
300 | 


--------------------------------------------------------------------------------
/example/vue-form-base/src/components/formBase.vue:
--------------------------------------------------------------------------------
  1 | <!--CSS-->
  2 | <style scoped>  
  3 |  
  4 |   /* set error fading time */
  5 |   form .fade-enter-active {  transition: opacity 0.5s } 
  6 |   form .fade-leave-active {  transition: opacity 0.5s }
  7 |   form .fade-enter, .fade-leave-to{ opacity: 0 }  
  8 |   form .error { color:red; font-size: 0.9rem; }
  9 | 
 10 |   /* adapt margin from row  http://materializecss.com/grid.html */
 11 |   form .row{margin-left:-0rem; margin-right:-0rem; }
 12 | 
 13 | </style>
 14 | 
 15 | <!--HTML-->
 16 | <template>     
 17 | 
 18 |   <form id="form-base" >
 19 | 
 20 |     <!--using grids from materialize.css the class 'row' must be set here-->
 21 |     <ul class="collection" :class="nextRowClass"> 
 22 |         
 23 |       <li  :class="getGridClassName(obj)" v-for="(obj, index) in flatCombinedArraySorted" v-if="obj.schema.hidden !== true">
 24 | 
 25 |           <div :class="getItemClassName(obj)">
 26 |          
 27 |             <!--IMPORTANT: keynamed slots ok, but duplicate slots for each item or each type are not possible in v-for loop -->
 28 |             <!--Top Slot: <form-base ...><div slot="deep-nested-key-top-slot> content here </div></form-base>    -->
 29 |             <slot :name="getTopSlot(obj)"></slot>
 30 |       
 31 |             <!-- label replacing slot   <div slot="deep-nested-key-label-slot> -->
 32 |             <slot :name="getLabelSlot(obj)" v-if="obj.schema.label !== null">
 33 |               <div class="label" >
 34 |                 <label :for="makeKeyUnique(obj)">{{obj.schema.label || obj.key}}</label>
 35 |               </div>
 36 |             </slot>
 37 |             
 38 |             <!-- mid-slot -> <div slot="deep-nested-key-mid-slot>  -->
 39 |             <slot :name="getMidSlot(obj)"></slot>
 40 |             
 41 |             <!-- replacing input slot -> <div slot="deep-nested-key-input-slot">  -->
 42 |             <slot :name="getInputSlot(obj)">
 43 | 
 44 |               <!-- type select-->
 45 |               <!--IMPORTANT class="browser-default" must be set in <select> for working VUE.JS with MATERIALIZE.CSS-->
 46 |               <select :id="makeKeyUnique(obj,index)"  class="browser-default select" v-if="obj.schema.type === 'select'" 
 47 |                 :readonly="obj.schema.readonly" :required="obj.schema.required" :disabled="obj.schema.disabled" 
 48 |                 :title="obj.schema.title" @change="setValue($event, obj)">              
 49 |                 <option v-for="val in obj.schema.options" :selected="val == obj.value" :value="val">{{val}}</option>
 50 |               </select>
 51 | 
 52 |               <!-- type multiselect -->
 53 |               <!--IMPORTANT class="browser-default" must be set in <multiselect> for working VUE.JS with MATERIALIZE.CSS-->
 54 |               <select :id="makeKeyUnique(obj,index)"  class="browser-default multiselect" v-if="obj.schema.type === 'multiselect'" multiple
 55 |                 :readonly="obj.schema.readonly" :required="obj.schema.required" :disabled="obj.schema.disabled"             
 56 |                 :title="obj.schema.title" @change="setValue($event, obj)">              
 57 |                 <option v-for="val in obj.schema.options" :selected="obj.value && obj.value.includes(val)" :value="val">{{val}}</option>
 58 |               </select>
 59 | 
 60 |               <!-- type radio -->
 61 |               <div :id="makeKeyUnique(obj)" v-if="obj.schema.type === 'radio'" >     
 62 |                 <template v-for="(val, idx) in obj.schema.options" >
 63 |                   <input :id="makeKeyUnique(obj, idx)"  :name="obj.key" type="radio" :readonly="obj.schema.readonly" 
 64 |                   :required="obj.schema.required" :disabled="obj.schema.disabled"             
 65 |                   :title="obj.schema.title" :value="val" :checked="val === obj.value" @change="setValue($event, obj)" @input="setValue($event, obj)" />
 66 |                   <label :for="makeKeyUnique(obj, idx)" >{{val}}</label>
 67 |                 </template>
 68 |               </div>
 69 |         
 70 |               <!-- type file -->
 71 |               <div class="file-field input-field" v-if="obj.schema.type === 'file'" >
 72 |                 <div class="btn button">
 73 |                   <span>{{obj.schema.label}}</span>
 74 |                   <input :id="makeKeyUnique(obj)"  type="file" 
 75 |                     :readonly="obj.schema.readonly" :required="obj.schema.required" :disabled="obj.schema.disabled" :accept="obj.schema.accept"  
 76 |                     :title="obj.schema.title" :multiple="obj.schema.multiple || false" :pattern="obj.schema.pattern" @change="setValue($event, obj)"  />
 77 |                 </div>
 78 |                 <div class="file-path-wrapper" >
 79 |                   <input class="file-path path" type="text" :value="getValue(obj)" :placeholder="placeholder(obj)" 
 80 |                   :readonly="obj.schema.readonly" :disabled="obj.schema.disabled">
 81 |                 </div>
 82 |               </div>
 83 |               
 84 | 
 85 |               <!-- all input types except radio, select or file -->
 86 |               <div v-if="obj.schema.type !== 'file' && obj.schema.type !== 'radio' && obj.schema.type !== 'select' && obj.schema.type !== 'multiselect'" >
 87 |                 
 88 |                 <input :id="makeKeyUnique(obj)" :list="makeKeyUnique(obj,index)" :type="obj.schema.type" 
 89 |                 :readonly="obj.schema.readonly" :required="obj.schema.required" :disabled="obj.schema.disabled" :placeholder="placeholder(obj)"
 90 |                 :title="obj.schema.title" :maxlength="obj.schema.maxlength" :min="obj.schema.min" :max="obj.schema.max" :step="obj.schema.step" :pattern="obj.schema.pattern" 
 91 |                 :value="getValue(obj)" :checked="setCheckbox(obj)" @change="setValue($event, obj)" @invalid="setValue($event, obj)"  @input="setValue($event, obj)" />
 92 |                 
 93 |                 <!-- if type checkbox then set label -->
 94 |                 <label v-if="obj.schema.type === 'checkbox'" :for="makeKeyUnique(obj)" >{{obj.value}}</label>
 95 |                 
 96 |                 <!-- if options has array && optional type is list -->
 97 |                 <datalist :id="makeKeyUnique(obj,index)" v-if="Array.isArray(obj.schema.options)" >
 98 |                   <option v-for="val in obj.schema.options" :value="val"></option>
 99 |                 </datalist>
100 |               
101 |               </div>
102 |       
103 |             </slot>
104 | 
105 |             <transition name="fade" >          
106 |               <!-- replacing error slot  -> <div slot="deep-nested-key-error-slot> -->
107 |               <slot :name="getErrorSlot(obj)" v-if="obj.schema.error">
108 |                 <div class="error" >
109 |                   <span>{{obj.schema.error}}</span>
110 |                 </div>
111 |               </slot>
112 |             </transition>
113 | 
114 |             <!-- bottom slot  -> <div slot="deep-nested-key-bottom-slot> -->
115 |             <slot :name="getBottomSlot(obj)"></slot>
116 |           
117 |           </div>
118 |          
119 |       </li>
120 | 
121 |     </ul>    
122 | 
123 |   </form> 
124 | 
125 | </template>
126 | 
127 | <!--Script-->
128 | <script>
129 | 
130 |   // import & declarations
131 |     import { isString, isPlainObject, isFunction, isUndefined, clone, cloneDeep, orderBy } from 'lodash'     
132 | 
133 |     const sortDirection = 'ASC'         // sort formular item 'asc' or 'desc'
134 |     const pathDelimiter = '.'               
135 |     const makeKeyUniqueDelimiter ='-'
136 |     
137 |     const nextRowName = 'next-row'
138 |     const nextRowClass = 'row'
139 | 
140 |     const typeClassAppendix = '-type'
141 |     const keyClassAppendix  = '-key'
142 | 
143 |     const topSlotAppendix   = '-top-slot'
144 |     const labelSlotAppendix = '-label-slot'
145 |     const midSlotAppendix   = '-mid-slot'
146 |     const inputSlotAppendix = '-input-slot'
147 |     const bottomSlotAppendix= '-bottom-slot'
148 |     const errorSlotAppendix = '-error-slot'
149 | 
150 |     const keyIndividualizer = Math.random().toString(36).slice(-3)  
151 |   //
152 | 
153 |   export default {
154 |     
155 |     name:'vue-form-base',
156 | 
157 |     props: {
158 |       data:{
159 |         type: Object,
160 |         required: true
161 |       },    
162 |       schema:{
163 |         type: Object,
164 |         required: true
165 |       },      
166 |       dataStateName:{
167 |         type: String,
168 |         required: true
169 |       },
170 |       schemaStateName:{
171 |         type: String,
172 |         required: false
173 |       },
174 |     },
175 | 
176 |     data(){      
177 |       return {
178 |         nextRowClass,
179 |         keyIndividualizer,
180 |         flatCombinedArray: [], 
181 |         noSchemaStateName: {}  
182 |       }
183 |     },
184 |        
185 |     computed:{
186 |       
187 |       flatCombinedArraySorted(){ return orderBy(this.flatCombinedArray, ['schema.order'], [sortDirection])  },
188 |       
189 |       dataState: { 
190 |         get(){ this.updateArrayFromState(this.flatCombinedArray, this.$store.state[this.dataStateName]); 
191 |                 return this.$store.state[this.dataStateName] || {}         
192 |         }, 
193 |         set(val){ this.$store.state[this.dataStateName] = val }      
194 |       },
195 |      
196 |       schemaState: { 
197 |         get(){ return this.schemaStateName ? this.$store.state[this.schemaStateName] || {} : this.noSchemaStateName }, 
198 |         set(val){ this.schemaStateName ? this.$store.state[this.schemaStateName] = val : this.noSchemaStateName = val }      
199 |       }      
200 | 
201 | 
202 |     },
203 |     
204 |     methods:{ 
205 |     
206 |       makeKeyUnique(obj, idx=''){
207 |         // needed to avoid conflict with same attr[id] when displaying more than one editor-base component 
208 |         return obj.key + makeKeyUniqueDelimiter + this.keyIndividualizer + idx
209 |       },
210 | 
211 |       redoMakeKeyUnique(key){
212 |         // needed to avoid conflict with same attr[id] when displaying more than one editor-base component 
213 |         return key.split(makeKeyUniqueDelimiter)[0] 
214 |       },
215 | 
216 |       getKeyClassNameWithAppendix(obj, appendix){
217 |         // get KEY specific name by replacing '.' with '-' and appending '-top-slot'  -> 'address-city-top-slot'
218 |         return this.redoMakeKeyUnique(obj.key).replace(/\./g,'-') + appendix
219 |       },
220 | 
221 |       placeholder(obj){ 
222 |         // set placeholder definition
223 |         // if placeholder is null display nothing, 
224 |         // if placeholder is undefined then take label definition as placeholder        
225 |         return obj.schema.placeholder === null ? null : obj.schema.placeholder || obj.schema.label 
226 |       },
227 | 
228 |       setCheckbox(obj){
229 |         if (obj.schema.type !== 'checkbox') return 
230 |         return obj.schema.true ? obj.schema.true === obj.value : obj.value
231 |       },
232 |       
233 |       // slot identifier  replace label, error, input 
234 | 
235 |         getTopSlot(obj){
236 |           // get KEY specific name by replacing '.' with '-' and appending '-top-slot'  -> 'address-city-top-slot' 
237 |           return this.getKeyClassNameWithAppendix(obj, topSlotAppendix)
238 |         },
239 |         getLabelSlot(obj){
240 |           // get KEY specific name by replacing '.' with '-' and appending '-label-slot'  -> 'address-city-label-slot' 
241 |           return this.getKeyClassNameWithAppendix(obj, labelSlotAppendix)
242 |         },
243 |         getMidSlot(obj){
244 |           // get KEY specific name by replacing '.' with '-' and appending '-top-slot'  -> 'address-city-top-slot' 
245 |           return this.getKeyClassNameWithAppendix(obj, midSlotAppendix)
246 |         },
247 |         getInputSlot(obj){
248 |           // get KEY specific name by replacing '.' with '-' and appending '-input-slot'  -> 'address-city-input-slot' 
249 |           return this.getKeyClassNameWithAppendix(obj, inputSlotAppendix)
250 |         },        
251 |         getBottomSlot(obj){
252 |           // get KEY specific name by replacing '.' with '-' and appending '-bottom-slot'  -> 'address-city-bottom-slot' 
253 |           return this.getKeyClassNameWithAppendix(obj, bottomSlotAppendix)
254 |         },
255 |         getErrorSlot(obj){
256 |           // get KEY specific name by replacing '.' with '-' and appending '-error-slot'  -> 'address-city-error-slot' 
257 |           return this.getKeyClassNameWithAppendix(obj, errorSlotAppendix)
258 |         },
259 |         
260 |       //
261 |       
262 |       // getClassName functions      
263 |         getGridClassName(obj){          
264 |           // when using grid generate a new row by setting css:'next-row col s6'  ->  http://materializecss.com/grid.html
265 |           // 12 column grid with 3 items in one row -> schema:{ item1:{ css:'col s4' }, item2:{ css:'col s4' } , item3:{ css:'next-row col s4' } }
266 |           return obj.schema.css && obj.schema.css.indexOf(nextRowName) > -1 ? nextRowClass : '';
267 |         },
268 |         getKeyClassName(obj){
269 |           // get KEY specific class name by replacing '.' with '-' and appending '-key'  -> 'address-city-key' 
270 |           return this.getKeyClassNameWithAppendix(obj, keyClassAppendix)
271 |         },
272 |         getTypeClassName(obj){        
273 |           // get TYPE specific class name by appending '-type' -> 'checkbox-type'
274 |           return obj.schema.type + typeClassAppendix
275 |         },
276 | 
277 |         getCssClassName(obj){        
278 |           // get a class from schema.css ->  schema:{ user:{ css:'RED', ... } ... }
279 |           return obj.schema.css ? obj.schema.css : ''
280 |         },
281 | 
282 |         getItemClassName(obj){
283 |           // each item gets a class 'item', a class 'item-type' like 'checkbox-type', a class 'item-key' like 'address-city-key' and a class from schema.css      
284 |           // console.log(`item ${this.getTypeClassName(obj)} ${this.getKeyClassName(obj)} ${this.getCssClassName(obj)}`)
285 |           return `item ${this.getTypeClassName(obj)} ${this.getKeyClassName(obj)} ${this.getCssClassName(obj)}`
286 |         },     
287 |       //
288 | 
289 |       getValidationMessage(target){
290 |         // if title has value use title as validation message
291 |         return target.title ? target.title : target.validationMessage    
292 |       },
293 | 
294 |       noValidate(value, obj, data, schema){
295 |          isFunction(obj.schema.noValidate) ? obj.schema.noValidate(value, obj, data, schema) : obj.schema && (obj.schema.error = null)          
296 |       },
297 | 
298 |       validate(msg, obj, data, schema, validity){
299 |         if (!obj.schema.validate) return 
300 |         isFunction(obj.schema.validate) ? obj.schema.validate(msg, obj, data, schema, validity) : obj.schema.error = msg          
301 |       },
302 | 
303 |       mapGet(value, obj, data, schema){
304 |         // Map Value before being displayed
305 |         // handle incoming values with mapGet()    
306 |         return isFunction(obj.schema.mapGet) ? obj.schema.mapGet(value, obj, data, schema) : value
307 |       },  
308 | 
309 |       getValue(obj){            
310 |         return this.mapGet(obj.value, obj, this.dataState, this.schemaState)
311 |       },
312 | 
313 |       mapSet(value, obj, data, schema){
314 |         // Map Value before is stored in VUEX state
315 |         // handle outgoing values with mapSet()    
316 |         return isFunction(obj.schema.mapSet) ? obj.schema.mapSet(value, obj, data, schema) : value
317 |       },
318 |       
319 |       setValue( {target}, obj){
320 |         
321 |         // execute validate(validationMessage, obj, data, schema, validity) if 'validate' defined and validationMessage is available  
322 |         target.validationMessage 
323 |           ? this.validate( this.getValidationMessage(target) , obj, this.dataState, this.schemaState, target.validity)
324 |           : this.noValidate(value, obj, this.dataState, this.schemaState);
325 | 
326 |         // get key from event.target, handles 
327 |         let key = target ? (target.list ? target.list.id : (target.type === 'radio' ? target.parentElement.id :target.id)) : null
328 |         
329 |         // get original key == path in nested object
330 |         key = this.redoMakeKeyUnique(key)
331 | 
332 |         // get value from event.target
333 |         let value =  target ? target.value : null
334 |         
335 |         // prepare value from <input type checkbox>
336 |         value =  target.type === 'checkbox' ? (target.checked ? obj.schema.true || true: obj.schema.false || false): value
337 |         
338 |         // prepare value from <select>
339 |         value = target.selectedOptions ? Array.from(target.selectedOptions).map( o => o.value ) : value 
340 | 
341 |         // prepare value from <input type file>
342 |         value = obj.schema.type === 'file' ? Array.from(target.files).map( f =>f.name ) : value
343 |         
344 |         // call mapper for setting value
345 |         value = this.mapSet(value, obj, this.dataState, this.schemaState )
346 |    
347 |         // update State with value        
348 |         this.setObjectByPath(this.dataState, obj.key, value)
349 | 
350 |         // update Array for Display with value        
351 |         this.updateArrayFromState(this.flatCombinedArray, this.$store.state[this.dataStateName])
352 | 
353 |       },
354 | 
355 |       updateArrayFromState(flatArray, dataState) {       
356 |         // update for each key the value and schema 
357 |         this.flatCombinedArray.forEach( obj => {
358 |           obj.value = this.getObjectValueByPath(dataState, obj.key)
359 |           obj.schema = this.getObjectValueByPath(this.schemaState, obj.key)
360 |         })
361 | 
362 |       },
363 | 
364 |       getObjectValueByPath(object, path){
365 |         // resolves chained keys (like 'user.address.street') on an object and returns the value 
366 |         let pathArray=path.split(pathDelimiter)
367 |         let value
368 |         pathArray.forEach((p, ix) => {
369 |           if(ix === pathArray.length -1 ) value = object[p]  
370 |           if ( isUndefined(object[p]) ) return  
371 |           object = object[p]
372 |         })
373 |         return value
374 |       },
375 | 
376 |       setObjectByPath(object, path, value) {
377 |         // resolves chained keys (like 'user.address.street') on an object and set the value 
378 |         let pathArray=path.split(pathDelimiter)
379 |         pathArray.forEach((p, ix) => {
380 |           if(ix === pathArray.length -1 ) object[p] = value
381 |           object = object[p]
382 |         })
383 |       },
384 | 
385 |       flattenObjects(dat,sch) {
386 |         let data = {}
387 |         let schema = {}
388 |       
389 |         Object.keys(dat).forEach( i => {
390 |           if ( !Array.isArray(dat[i]) && typeof dat[i] === 'object' && dat[i]){
391 |             let {data: flatData, schema: flatSchema } = this.flattenObjects(dat[i], sch[i])
392 |             Object.keys(flatData).forEach(ii => {
393 |               data[i + pathDelimiter + ii] = flatData[ii]
394 |               schema[i + pathDelimiter + ii] = flatSchema[ii]
395 |             })
396 |           } else { 
397 |             data[i] = dat[i]
398 |             schema[i] = sch[i]         
399 |           }
400 |         })
401 |    
402 |         return {data, schema}
403 |       },
404 | 
405 |       combineObjectsToArray( {data, schema} ){
406 | 
407 |         let arr = [];
408 |         Object.keys(data).forEach(key => {  
409 |           
410 |           // if schema[key] is null, undefined, string or no plain object then skip           
411 |           if (!schema[key] ) {
412 |             console.warn(`Property '${key}' in Data has no correspondingly Schema Property and will be ignored!` )
413 |             return 
414 |           }  
415 |           if (!isPlainObject(schema[key]) ) {
416 |             console.warn(`Prop '${key}' must have a correspondingly Schema Prop with at least ${key}:{ type:'text'} as value.  Prop '${key}' will be ignored!` )
417 |             return 
418 |           }  
419 | 
420 |           arr.push( {key, value:data[key], schema:schema[key]} )
421 |         
422 |         })
423 |         return arr
424 |           
425 |       },
426 | 
427 |       flattenAndCombineToArray (data,schema) {
428 |         
429 |         // flatten nested structure of two objects 'data' & 'schema'  
430 |         let flattenedObjects = this.flattenObjects(data, schema)
431 |         
432 |         // ... and combine them to an array
433 |         return this.combineObjectsToArray(flattenedObjects)
434 |         
435 |       }
436 | 
437 |     },
438 | 
439 |     mounted(){        
440 | 
441 |       // check existence of necessary props 
442 |       if (!this.data || !isPlainObject(this.data) )  throw `Check '<form-base :data="..." >'! Property 'data' seem to be not an object or undefined!`
443 |       if (!this.schema || !isPlainObject(this.schema) ) throw `Check '<form-base :schema="..." >'! Property 'schema' seem to be not an object or undefined!`
444 |       if (!this.dataStateName || !isString(this.dataStateName) ) throw `Check '<form-base :dataStateName="..." >'! Property 'dataStateName' seem to be not a string or undefined!`
445 |       if ( this.schemaStateName && !isString(this.schemaStateName) ) throw `Check '<form-base :schemaStateName="..." >'! Property 'schemaStateName' seem to be not a string!`
446 | 
447 |       // decouple state dataState/schemaState from prop data/schema
448 |       this.dataState = cloneDeep(this.data) 
449 |       this.schemaState = cloneDeep(this.schema) 
450 | 
451 |       // make flat array which combines data & schema object for displaying data
452 |       this.flatCombinedArray = this.flattenAndCombineToArray(this.dataState, this.schemaState)
453 |         
454 |     } 
455 | 
456 |   }
457 | </script>
458 | 
459 | 
460 | 


--------------------------------------------------------------------------------
/example/vue-form-base/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | const store = new Vuex.Store({
 7 |   
 8 |   state: {
 9 | 
10 |     // <form-base data-state-name="stateDataForm" />
11 |     // stateDataForm: null     
12 |     data: null,    // vuex state object holding the edited data  <form-base data-state-name="data" />
13 | 
14 |     // <form-base schema-state-name="stateSchemaForm" />     
15 |     // stateSchemaForm: null     
16 |     schema: null   // vuex state object holding the possible modified schema <form-base schema-state-name="schema" />   
17 |   
18 |   }
19 | 
20 | });
21 | 
22 | import App from './App.vue'
23 | 
24 | new Vue({
25 |   el: '#app',
26 |   store,
27 |   render: h => h(App)
28 | })
29 | 


--------------------------------------------------------------------------------
/example/vue-form-base/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 | 
13 |     loaders: [
14 |       { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader:"url?limit=10000&mimetype=application/font-woff" },
15 |       { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file" }
16 |     ],
17 |     
18 |     rules: [
19 |       {
20 |         test: /\.vue$/,
21 |         loader: 'vue-loader',
22 |         options: {
23 |           loaders: {
24 |             // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
25 |             // the "scss" and "sass" values for the lang attribute to the right configs here.
26 |             // other preprocessors should work out of the box, no loader config like this necessary.
27 |             'scss': 'vue-style-loader!css-loader!sass-loader',
28 |             'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
29 |           }
30 |           // other vue-loader options go here
31 |         }
32 |       },
33 |       {
34 |         test: /\.js$/,
35 |         loader: 'babel-loader',
36 |         exclude: /node_modules/
37 |       },
38 |       {
39 |         test: /\.(png|jpg|gif|svg)$/,
40 |         loader: 'file-loader',
41 |         options: {
42 |           name: '[name].[ext]?[hash]'
43 |         }
44 |       }
45 |     ]
46 |   },
47 |   resolve: {
48 |     alias: {
49 |       'vue$': 'vue/dist/vue.common.js'
50 |     }
51 |   },
52 |   devServer: {
53 |     historyApiFallback: true,
54 |     noInfo: true
55 |   },
56 |   performance: {
57 |     hints: false
58 |   },
59 |   devtool: '#eval-source-map'
60 | }
61 | 
62 | if (process.env.NODE_ENV === 'production') {
63 |   module.exports.devtool = '#source-map'
64 |   // http://vue-loader.vuejs.org/en/workflow/production.html
65 |   module.exports.plugins = (module.exports.plugins || []).concat([
66 |     new webpack.DefinePlugin({
67 |       'process.env': {
68 |         NODE_ENV: '"production"'
69 |       }
70 |     }),
71 |     new webpack.optimize.UglifyJsPlugin({
72 |       sourceMap: true,
73 |       compress: {
74 |         warnings: false
75 |       }
76 |     }),
77 |     new webpack.LoaderOptionsPlugin({
78 |       minimize: true
79 |     })
80 |   ])
81 | }
82 | 


--------------------------------------------------------------------------------
/images/name1.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wotamann/vue-form-base/a70906c69a530261a85a5ae50687b7e83fce90f5/images/name1.JPG


--------------------------------------------------------------------------------
/images/name2.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wotamann/vue-form-base/a70906c69a530261a85a5ae50687b7e83fce90f5/images/name2.JPG


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | //index.js
2 | var FormBase = require('./FormBase.vue')
3 | module.exports = FormBase
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-form-base",
 3 |   "version": "0.0.4",
 4 |   "description": "Form-Generator: a Vue 2.0 component, reactive Result using Vuex, responsive Display",
 5 |   "main": "FormBase.vue",
 6 |   "scripts": {
 7 |     "test": "npm run unit"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/wotamann/vue-form-base.git"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "vue 2.0",
16 |     "vuex",
17 |     "formular",
18 |     "generator",
19 |     "json",
20 |     "schema",
21 |     "responsive",
22 |     "reactive",
23 |     "select",
24 |     "multiselect"
25 |   ],
26 |   "author": "woko@aon.at",
27 |   "license": "MIT",
28 |   "bugs": {
29 |     "url": "https://github.com/wotamann/vue-form-base/issues"
30 |   },
31 |   "homepage": "https://github.com/wotamann/vue-form-base#readme"
32 | }
33 | 


--------------------------------------------------------------------------------
/publish-npm.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | 
3 | npm version patch
4 | npm publish


--------------------------------------------------------------------------------