Skip to content

Commit

Permalink
Update Conditional Demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@wotamann
wotamann committed May 18, 2019
1 parent b4436dc commit d0bbc0d
Show file tree
Hide file tree
Showing 9 changed files with 317 additions and 213 deletions.
4 changes: 2 additions & 2 deletions example/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import complex from '@/components/complex.vue'
import array from '@/components/array.vue'
import conditional from '@/components/conditional.vue'
const items = ['Simple Form','Responsive Grid', 'CSS & Slots', 'Deep nested Object', 'Values with Arrays', 'Partial & Linked', 'Conditional', 'Complete Form']
const items = ['Simple Form', 'Responsive Grid', 'CSS & Slots', 'Deep nested Object', 'Values with Arrays', 'Partial & Linked', 'Conditional Display', 'Complete Form']
export default {
components: {
Expand All @@ -40,7 +40,7 @@ export default {
data () {
return {
items,
view: items[0]
view: items[6]
}
}
}
Expand Down
80 changes: 52 additions & 28 deletions example/src/components/array.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,8 @@
<template>
<v-container fluid >

<!-- Integrated Solution (recommended) -->
<h4>Display Values containing Arrays - integrated Solution</h4>
<v-form-base id="integrated" :value= "myValue" :schema= "mySchema" @update:integrated= "update" />

<!-- Slot Solution -->
<!-- <h4>Slot based Solution</h4>
<v-form-base :value= "myValue" :schema= "mySchema" @update= "update" >
<template slot="slot-array-key-arrayOne" slot-scope="{item}">
<v-form-base id="slot-based" :value= "item" :schema= "mySchema.arrayOne.schema" @update:slot-based= "update"/>
</template>
</v-form-base> -->
<h4>Display Arrays - Leftside: Schema from Template Object - Rightside: Schema based on Array</h4>
<v-form-base id="array-demo" :value= "myValue" :schema= "mySchema" @update:array-demo= "update" />

<infoline :value= "myValue" :schema= "mySchema"></infoline>

Expand All @@ -33,33 +24,66 @@ export default {
data () {
return {
myValue: {
name: 'Jumo',
position: 'Coder',
tasks: [
{
tasksA: [
{
done: true,
title: 'make refactoring'
},
{
done: true,
title: 'write documentation'
},
{
done: true,
title: 'remove logs'
}
],
tasksB: [
{
done: true,
title: 'make refactoring'
title: 'make refactoring'
},
{
done: false,
title: 'write documentation'
{
done: true,
title: 'write documentation'
},
{
{
done: true,
title: 'remove logs'
}
]
title: 'remove logs'
}
]
},
mySchema: {
name: {type:'text', label:'Name', flex:{ xs:12, sm:6 } },
position: {type:'text', label:'Position', flex:{ xs:12, sm:6 } },
tasks: { type: 'array', flex:12, schema: { done:{ type:'checkbox', label:'done', flex:3}, title:{ type:'text'}, flex:9 } },
tasksA: {
type: 'array',
flex: 5,
// Template Object
schema: { done: { type: 'checkbox', label: 'Ok', flex: 3 }, title: { type: 'text' }, flex: 8 }
},
tasksB: {
type: 'array',
flex: 5,
offset:1,
// Array with Schema-Objects
schema: [
{ done: { type: 'checkbox', label: 'Ok 1', color:'brown', flex: 3 }, title: { type: 'text' }, flex: 8 },
{ done: { type: 'checkbox', label: 'Ok 2', color:'green', flex: 3 }, title: { type: 'text' }, flex: 8 },
{ done: { type: 'checkbox', label: 'Ok 3', color:'blue',flex: 3 }, title: { type: 'text' }, flex: 8 },
]
}
}
}
},
methods: {
update ({ on, parentId, id, key, value, obj, event, params, data, schema }) {
console.log('Update [ on, parentId, id, key, value, params, data, schema]', on, parentId, id, key, value, params, data, schema)
update ({ on, parentId, id, index, key, value, obj, event, params, data, schema }) {
console.log( 'UPDATED: On', on, ' ID:', id, ' Obj:', obj, ' Key|Value|Params|Index:', key, value, params, index, ' Data|Schema:', data, schema, ' Parent:', parent)
if (key === 'done') {
data.title = Math.random()
schema.title.disabled = !value
schema.done.label = index + ' Done'
schema.done.color = value ? 'green' : 'red'
}
}
}
}
Expand Down
56 changes: 28 additions & 28 deletions example/src/components/complex.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<style>
<style>
/* scoped doesn't work in nested components */
#form-base-complete .key-subgroups-content { border: 1px solid #919191; background-color: #e9e9e9; padding: 1rem }
#form-base-complete .key-subgroups-tasks { border: 1px solid #4b8ad6; background-color: #e2eaf5; padding: 1rem}
@media print {
html * { position: fixed; visibility: hidden; }
.key-subgroups-content textarea { visibility: visible; left: 0; top: 0; bottom: 0 }
Expand Down Expand Up @@ -32,16 +32,16 @@ import Infoline from '@/components/infoline'
const items = ['Tesla', 'Jobs', 'Taleb', 'Harari']
/* Helper & Partial Functions */
const toUpper = ({ value }) => value && value.toUpperCase()
const minLen = l => v => (v && v.length >= l) || `min. ${l} Characters`
const maxLen = l => v => (v && v.length <= l) || `max. ${l} Characters`
const required = msg => v => !!v || msg
const rules = {
requiredEmail: required('E-mail is required'),
max12: maxLen(12),
min6: minLen(6),
validEmail: v => /.+@.+\..+/.test(v) || 'E-mail must be valid'
}
const toUpper = ({ value }) => value && value.toUpperCase()
const minLen = l => v => (v && v.length >= l) || `min. ${l} Characters`
const maxLen = l => v => (v && v.length <= l) || `max. ${l} Characters`
const required = msg => v => !!v || msg
const rules = {
requiredEmail: required('E-mail is required'),
max12: maxLen(12),
min6: minLen(6),
validEmail: v => /.+@.+\..+/.test(v) || 'E-mail must be valid'
}
//
export default {
components: { VFormBase, Infoline },
Expand All @@ -58,25 +58,25 @@ export default {
combobox: null,
autocomplete: null,
tasks: [
{ done:false, title: 'shopping'},
{ done:true, title: 'coding'},
{ done:false, title: 'walking'},
{ done: false, title: 'shopping' },
{ done: true, title: 'coding' },
{ done: false, title: 'walking' }
],
content: `Design principles of Vuetify ...`
}
},
mySchema: {
email: { type:'email', label:'Email', rules: [rules.validEmail, rules.requiredEmail], flex: {xs: 12, sm: 6} },
password: { type:'password', label:'Password', hint:'6 to 12 Chars', appendIcon: 'visibility', counter: 12, rules: [rules.min6, rules.max12], clearable: true, flex: {xs: 12, sm: 6} },
email: { type: 'email', label: 'Email', rules: [rules.validEmail, rules.requiredEmail], flex: { xs: 12, sm: 6 } },
password: { type: 'password', label: 'Password', hint: '6 to 12 Chars', appendIcon: 'visibility', counter: 12, rules: [rules.min6, rules.max12], clearable: true, flex: { xs: 12, sm: 6 } },
subgroups: {
select: { type: 'select', label: 'Select', items, flex: { xs: 12, sm:6, md: 3 } },
multiple: { type: 'select', label: 'Multi-Select', items, multiple: true, flex: { xs: 12, sm:6, md: 3 } },
combobox: { type: 'combobox', label: 'Combobox', items, flex: { xs: 12, sm:6, md: 3 } },
autocomplete: { type: 'autocomplete', label: 'AutoComplete', items, flex: { xs: 12, sm:6, md: 3 } },
tasks: { type:'array', schema:{ done: { type: 'checkbox', label: 'Ok', flex:3 }, title: { type:'text', placeholder:'to do...', flex:8 } }, flex:{ xs:12, sm:6 }, },
content: { type: 'textarea', label: 'Content', hint: 'Auto-Growing...', autoGrow: true, prependInnerIcon: 'print', rules: [ required('Content required') ], flex:{ xs:12, sm:6 }, }
}
select: { type: 'select', label: 'Select', items, flex: { xs: 12, sm: 6, md: 3 } },
multiple: { type: 'select', label: 'Multi-Select', items, multiple: true, flex: { xs: 12, sm: 6, md: 3 } },
combobox: { type: 'combobox', label: 'Combobox', items, flex: { xs: 12, sm: 6, md: 3 } },
autocomplete: { type: 'autocomplete', label: 'AutoComplete', items, flex: { xs: 12, sm: 6, md: 3 } },
tasks: { type: 'array', schema: { done: { type: 'checkbox', label: 'Ok', flex: 3 }, title: { type: 'text', placeholder: 'to do...', flex: 8 } }, flex: { xs: 12, sm: 6 } },
content: { type: 'textarea', label: 'Content', hint: 'Auto-Growing...', autoGrow: true, prependInnerIcon: 'print', rules: [ required('Content required') ], flex: { xs: 12, sm: 6 } }
}
}
}
},
Expand All @@ -92,11 +92,11 @@ export default {
this.mySchema.checkbox[2].checkbox1[0].hidden = !this.mySchema.checkbox[2].checkbox1[0].hidden
console.log('this.mySchema.checkbox[2].checkbox1[0].hidden', this.mySchema.checkbox[2].checkbox1[0].hidden)
},
update ({ on, id, key, value, obj, event, params, data, schema }) {
console.log('Update [ on, id, key, value, params]', on, id, key, value, params)
update ({ on, id, index, key, value, obj, event, params, data, schema, parent }) {
console.log( 'UPDATED: On', on, ' ID:', id, ' Obj:', obj, ' Key|Value|Params|Index:', key, value, params, index, ' Data|Schema:', data, schema, ' Parent:', parent)
// print content
if (on === 'click' && key === 'subgroups.content' && (params && params.text) === 'print') {
if (on === 'click' && key === 'subgroups.content' && (params && params.text) === 'print') {
window.print()
}
Expand Down
131 changes: 81 additions & 50 deletions example/src/components/conditional.vue
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,118 @@
<style>
<style>
/* scoped doesn't work in nested components */
#form-base-complete .key-subgroups-tasks { border: 1px solid #4b8ad6; background-color: #e2eaf5; padding: 1rem}
#form-base-complete .key-subgroups-tasks { border: 1px solid #4b8ad6; background-color: #e2eaf5; padding: 1rem}
</style>

<template>
<v-container fluid >

<h4>Conditional on Value or Action</h4>

<v-btn small @click="toggle">Toggle</v-btn>

<h4>Conditional Display</h4>

<v-form-base id="form-base-complete" :value= "myValue" :schema= "mySchema" @update:form-base-complete= "update" />

<infoline :value= "myValue" :schema= "mySchema"></infoline>

</v-container>
</template>

<script>
import { cloneDeep } from 'lodash'
import VFormBase from '@/components/vFormBase'
import Infoline from '@/components/infoline'
const items = ['Tesla', 'Jobs', 'Taleb', 'Harari']
const green = 'green lighten-4'
const red = 'red lighten-4'
const task = { done: true, title: 'New...' }
export default {
components: { VFormBase, Infoline },
data () {
return {
hidden: true,
color: red,
color: 'blue lighten-4',
myValue: {
button: null,
add: null,
conditional: '',
subgroups: {
select: 'Tesla',
multiple: ['Jobs'],
combobox: null,
autocomplete: null,
tasks: [
{ done:false, title: 'shopping'},
{ done:true, title: 'coding'},
{ done:false, title: 'walking'},
],
}
tasks: [
{ done: true, title: 'shopping' },
{ done: true, title: 'coding' },
{ done: true, title: 'walking' }
]
}
}
},
computed:{
// computed schema
mySchema(){ return {
conditional: { type:'text', label:'Conditional on Value ', hint:`try typing 'show'`,backgroundColor:this.color, flex: 12 },
subgroups: {
select: { color:this.color, type: 'select', hidden:this.hidden , label: 'Select', items, flex: { xs: 12, sm:6, md: 3 } },
multiple: { type: 'select', label: 'Multi-Select', items, multiple: true, hidden: this.hidden, flex: { xs: 12, sm:6, md: 3 } },
combobox: { type: 'combobox', label: 'Combobox', items, hidden: this.hidden, flex: { xs: 12, sm:6, md: 3 } },
autocomplete: { type: 'autocomplete', label: 'AutoComplete', items, hidden: this.hidden, flex: { xs: 12, sm:6, md: 3 } },
tasks: {
type:'array',
hidden: this.hidden,
flex:{ xs:12, sm:6 },
schema:{
done: { type: 'checkbox', label: 'Ok', flex:3 },
title: { type:'text', placeholder:'to do...', flex:8 }
}
}
}
computed: {
mySchema () {
return {
button: { type: 'button', block: true, label: `Click or Type 'Show'`, dark: true, color: 'blue', iconLeft: 'edit', iconRight: 'toggle' },
add: { type: 'button', block: true, label: `Add ToDo`, dark: true, color: 'blue', iconRight: 'add' },
conditional: { type: 'text', label: 'Conditional on Value ', hint: `try typing 'show'`, backgroundColor: this.color, flex: 12 },
tasks: {
type: 'array',
hidden: this.hidden,
flex: { xs: 12, sm: 6 },
// OPTION A: Schema as Object: Is Template for all Items in Array (Schema-Objects are NOT independent )
// schema: {
// done: { type: 'checkbox', label: 'Ok', disabled: false, color:'green', flex: 3 },
// title: { type: 'text', placeholder: 'to do...', disabled: false, flex: 8 }
// },
// OPTION B: Schema as Array: define independent Schema for each Item
template: {
done: { type: 'checkbox', label: 'Ok', disabled: false, color:'brown', flex: 3 },
title: { type: 'text', placeholder: 'to do...', disabled: false, flex: 8 }
},
schema: [
{
done: { type: 'checkbox', label: 'Ok', disabled: false, color:'green', flex: 3 },
title: { type: 'text', placeholder: 'to do...', disabled: false, flex: 8 }
},{
done: { type: 'checkbox', label: 'No', disabled: false, color:'red', flex: 3 },
title: { type: 'text', placeholder: 'to do...', disabled: false, flex: 8 }
},{
done: { type: 'checkbox', label: 'Ok', disabled: false, color:'blue', flex: 3 },
title: { type: 'text', placeholder: 'to do...', disabled: false, flex: 8 }
}
]
}
}
}
}
},
methods: {
toggle() {
this.hidden =!this.hidden
this.color = this.color !== green ? green : red
update (updated) {
let { on, id, index, parentId, key, value, obj, event, params, data, schema, parent } = updated
this.log(updated)
if (key === 'button') this.toggle()
if (key === 'conditional') this.hidden = value !== 'show'
if (key === 'add') {
// MODIFY Value & Schema Array
this.myValue.tasks.unshift({...task})
let insert = cloneDeep(this.mySchema.tasks.template)
this.mySchema.tasks.schema.unshift(insert)
}
if (key === 'done' && value === true) {
// MODIFY Value & Schema Array
this.myValue.tasks.splice(index, 1)
this.mySchema.tasks.schema.splice(index, 1)
}
},
toggle () {
this.hidden = !this.hidden
},
update ({ on, id, key, value, obj, event, params, data, schema }) {
console.log('Update [ on, id, key, value, params]', on, id, key, value, params)
if (key === 'conditional'){
this.hidden = value === 'show' ? false : true
this.color = value === 'show' ? green : red
}
log ({ on, id, index, parentId, key, value, obj, event, params, data, schema, parent } = {}) {
console.log( 'UPDATED: On', on, ' ID:', id, ' Obj:', obj, ' Key|Value|Params|Index:', key, value, params, index, ' Data|Schema:', data, schema, ' Parent:', parent)
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion example/src/components/css.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
/* CSS Component --- Container */
#form-base-css { border: 1px solid #c2b82b; background-color: #f7f7ea; padding:2rem }
@media only screen and (max-width: 800px) {
#form-base-css { border: 1px solid rgb(74, 179, 14); background-color: #e5f0e0; padding:1rem }
#form-base-css .key-controls-checkbox { background-color: #bae9af }
Expand Down
Loading

0 comments on commit d0bbc0d

Please sign in to comment.