Skip to content
This repository was archived by the owner on Dec 1, 2023. It is now read-only.

Commit 8b471e6

Browse files
janschoenherrjanschoenherr
committed
update "show" handling
1 parent 391f6a7 commit 8b471e6

File tree

3 files changed

+76
-83
lines changed

3 files changed

+76
-83
lines changed

‎src/fields.vue‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22

33
<div>
4-
<div v-for="field in fields" :key="field.name">
4+
<div v-for="field in fields" v-show="evaluate(field.show)" :key="field.name">
55
<label v-if="field.type != 'checkbox'">{{ field.label }}</label>
66
<component :is="field.component" :field="field" :values="values" @change="change"/>
77
</div>
@@ -18,7 +18,7 @@
1818
import FieldSelect from './components/Select.vue';
1919
import FieldRange from './components/Range.vue';
2020
import FieldNumber from './components/Number.vue';
21-
import {assign, each, get, parse, isArray, isString, set, warn} from './util';
21+
import {assign, each, get, parse, isArray, isString, isUndefined, set, warn} from './util';
2222
2323
export default {
2424
@@ -40,12 +40,12 @@
4040
4141
config: {
4242
type: [Object, Array],
43-
default: () => {}
43+
default: () => ({})
4444
},
4545
4646
values: {
4747
type: Object,
48-
default: () => {}
48+
default: () => ({})
4949
},
5050
5151
prefix: {
@@ -76,6 +76,10 @@
7676
7777
try {
7878
79+
if (isUndefined(expression)) {
80+
return true;
81+
}
82+
7983
if (isString(expression)) {
8084
expression = parse(expression);
8185
}
@@ -113,9 +117,7 @@
113117
field.component = prefix + field.type;
114118
}
115119
116-
if (!field.show || this.evaluate(field.show)) {
117-
fields.push(field);
118-
}
120+
fields.push(field);
119121
120122
} else {
121123
warn(`Field name missing ${JSON.stringify(field)}`);

‎stories/components/FieldsCustom.vue‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,10 @@
1-
<template>
1+
<template functional>
22

33
<div>
4-
<div v-for="field in fields" :key="field.name" class="form-group">
4+
<div v-for="field in parent.fields" v-show="parent.evaluate(field.show)" :key="field.name" class="form-group">
55
<label v-if="field.type != 'checkbox'">{{ field.label }}</label>
6-
<component :is="field.component" :field="field" :values="values" class="form-control" @change="change"/>
6+
<component :is="field.component" :field="field" :values="parent.values" class="form-control" @change="parent.change"/>
77
</div>
88
</div>
99

1010
</template>
11-
12-
<script>
13-
14-
import Vue from 'vue';
15-
16-
export default {
17-
18-
extends: Vue.component('fields')
19-
20-
};
21-
22-
</script>

‎stories/components/FieldsStory.vue‎

Lines changed: 64 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88
<div class="col-md-6">
99
<div class="panel panel-default">
1010
<div class="panel-heading"><h2 class="panel-title">Default</h2></div>
11-
<FieldsCustom :config="fields" :values="values" class="panel-body" @change="change"/>
11+
<FieldsCustom class="panel-body" @change="change"/>
1212
</div>
1313
</div>
1414
<div class="col-md-6">
1515
<div class="panel panel-default">
1616
<div class="panel-heading"><h2 class="panel-title">Custom</h2></div>
17-
<FieldsCustom :config="fields" :values="values" class="panel-body" @change="change"/>
17+
<FieldsCustom class="panel-body" @change="change"/>
1818
</div>
1919
</div>
2020
</div>
@@ -27,88 +27,91 @@
2727

2828
<script>
2929
30+
import Vue from 'vue';
3031
import FieldsCustom from './FieldsCustom.vue';
3132
import {action} from '@storybook/addon-actions';
3233
33-
export default {
34+
const fields = {
3435
35-
components: {
36-
FieldsCustom
36+
text: {
37+
label: 'Text'
3738
},
3839
39-
data: () => ({
40+
textarea: {
41+
label: 'Textarea',
42+
type: 'textarea'
43+
},
4044
41-
fields: {
45+
select: {
46+
label: 'Select',
47+
type: 'select',
48+
default: 1,
49+
options: {
50+
one: 1,
51+
two: 2,
52+
three: 3
53+
}
54+
},
4255
43-
text: {
44-
label: 'Text'
45-
},
56+
number: {
57+
label: 'Number',
58+
type: 'number'
59+
},
4660
47-
textarea: {
48-
label: 'Textarea',
49-
type: 'textarea'
50-
},
61+
// custom: {
62+
// label: 'Custom',
63+
// type: 'custom'
64+
// },
5165
52-
select: {
53-
label: 'Select',
54-
type: 'select',
55-
default: 1,
56-
options: {
57-
one: 1,
58-
two: 2,
59-
three: 3
60-
}
61-
},
66+
show: {
67+
type: 'checkbox',
68+
default: true
69+
},
6270
63-
number: {
64-
label: 'Number',
65-
type: 'number'
66-
},
71+
_show: {
72+
label: 'Show/Hide',
73+
type: 'text',
74+
show: 'show == true'
75+
},
6776
68-
// custom: {
69-
// label: 'Custom',
70-
// type: 'custom'
71-
// },
77+
enable: {
78+
type: 'checkbox',
79+
default: true
80+
},
7281
73-
show: {
74-
type: 'checkbox',
75-
default: true
76-
},
82+
_enable: {
83+
label: 'Enable/Disable',
84+
type: 'text',
85+
enable: ({enable}) => enable
86+
},
7787
78-
_show: {
79-
label: 'Show/Hide',
80-
type: 'text',
81-
show: 'show == true'
82-
},
88+
'nested.text': {
89+
label: 'Nested Text',
90+
type: 'text'
91+
}
8392
84-
enable: {
85-
type: 'checkbox',
86-
default: true
87-
},
93+
};
8894
89-
_enable: {
90-
label: 'Enable/Disable',
91-
type: 'text',
92-
enable: ({enable}) => enable
93-
},
95+
export default {
9496
95-
'nested.text': {
96-
label: 'Nested Text',
97-
type: 'text'
98-
}
97+
components: {
98+
FieldsCustom
99+
},
99100
100-
},
101+
extends: Vue.component('fields'),
101102
102-
values: {}
103+
computed: {
103104
104-
}),
105+
fields() {
106+
return this.prepare(fields);
107+
}
105108
106-
methods: {
109+
},
107110
108-
change(value, {name}) {
111+
mounted() {
112+
this.$on('change', (value, {name}) => {
109113
action(`@change (${name})`)(value);
110-
}
111-
114+
});
112115
}
113116
114117
};

0 commit comments

Comments
 (0)