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

Commit 60d117e

Browse files
miljan-aleksicmiljan-aleksic
committed
refactor plus improvements
- Removes field `change` event and `values` prop in favor of a more direct child/parent communication. - Adds `slot` support and `tag` prop allowing for more simple layout customizations.
1 parent 0252ba4 commit 60d117e

File tree

5 files changed

+112
-112
lines changed

5 files changed

+112
-112
lines changed

‎src/components/index.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export {default as FieldText} from './Text.vue';
2+
export {default as FieldTextarea} from './Textarea.vue';
3+
export {default as FieldRadio} from './Radio.vue';
4+
export {default as FieldCheckbox} from './Checkbox.vue';
5+
export {default as FieldSelect} from './Select.vue';
6+
export {default as FieldRange} from './Range.vue';
7+
export {default as FieldNumber} from './Number.vue';

‎src/field.js

+2-7
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,6 @@ export default {
99
field: {
1010
type: Object,
1111
required: true
12-
},
13-
14-
values: {
15-
type: Object,
16-
required: true
1712
}
1813

1914
},
@@ -34,7 +29,7 @@ export default {
3429

3530
get() {
3631

37-
const value = get(this.values, this.name);
32+
const value = get(this.Fields.values, this.name);
3833

3934
if (isUndefined(value) && !isUndefined(this.default)) {
4035
return this.value = this.default;
@@ -44,7 +39,7 @@ export default {
4439
},
4540

4641
set(value) {
47-
this.$emit('change', value, this);
42+
this.Fields.change(value, this.field);
4843
}
4944

5045
},

‎src/fields.vue

+15-20
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,25 @@
11
<template>
22

3-
<div>
4-
<div v-for="field in fields" v-show="evaluate(field.show)" :key="field.name">
5-
<label v-if="field.type != 'checkbox'">{{ field.label }}</label>
6-
<component :is="field.component" :field="field" :values="values" @change="change"/>
7-
</div>
8-
</div>
3+
<component :is="tag">
4+
<slot :fields="fields" :evaluate="evaluate">
5+
<div v-for="field in fields" v-show="evaluate(field.show)" :key="field.name">
6+
<label v-if="field.type !== 'checkbox'">{{ field.label }}</label>
7+
<component :is="field.component" :field="field"/>
8+
</div>
9+
</slot>
10+
</component>
911

1012
</template>
1113

1214
<script>
1315
14-
import FieldText from './components/Text.vue';
15-
import FieldTextarea from './components/Textarea.vue';
16-
import FieldRadio from './components/Radio.vue';
17-
import FieldCheckbox from './components/Checkbox.vue';
18-
import FieldSelect from './components/Select.vue';
19-
import FieldRange from './components/Range.vue';
20-
import FieldNumber from './components/Number.vue';
16+
import * as FieldComponents from './components/index.js';
2117
import {assign, each, get, parse, isArray, isString, isFunction, isUndefined, set, warn} from './util';
2218
2319
export default {
2420
2521
components: {
26-
FieldText,
27-
FieldTextarea,
28-
FieldRadio,
29-
FieldCheckbox,
30-
FieldSelect,
31-
FieldRange,
32-
FieldNumber
22+
...FieldComponents
3323
},
3424
3525
provide() {
@@ -51,6 +41,11 @@
5141
prefix: {
5242
type: String,
5343
default: 'field-'
44+
},
45+
46+
tag: {
47+
type: String,
48+
default: 'div'
5449
}
5550
5651
},

‎stories/components/FieldsCustom.vue

-10
This file was deleted.

‎stories/components/FieldsStory.vue

+88-75
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,36 @@
55
<h1>Fields</h1>
66

77
<div class="row">
8+
89
<div class="col-md-6">
10+
911
<div class="panel panel-default">
1012
<div class="panel-heading"><h2 class="panel-title">Default</h2></div>
11-
<FieldsCustom/>
13+
14+
<Fields :config="$options.fields" :values="values" @change="logChange"/>
1215
</div>
16+
1317
</div>
18+
1419
<div class="col-md-6">
20+
1521
<div class="panel panel-default">
22+
1623
<div class="panel-heading"><h2 class="panel-title">Custom</h2></div>
17-
<FieldsCustom/>
24+
25+
<Fields :config="$options.fields" :values="values" class="panel-body" tag="fieldset" @change="logChange">
26+
<template v-slot:default="{fields, evaluate}">
27+
<div v-for="field in fields" v-show="evaluate(field.show)" :key="field.name" class="form-group">
28+
<label v-if="field.type !== 'checkbox'">{{ field.label }}</label>
29+
<component :is="field.component" :field="field" class="form-control"/>
30+
</div>
31+
</template>
32+
</Fields>
33+
1834
</div>
35+
1936
</div>
37+
2038
</div>
2139

2240
<pre>{{ values }}</pre>
@@ -27,91 +45,86 @@
2745

2846
<script>
2947
30-
import Vue from 'vue';
31-
import FieldsCustom from './FieldsCustom.vue';
48+
import Fields from 'vue-fields/fields.vue';
49+
import * as FieldComponents from 'vue-fields/components';
3250
import {action} from '@storybook/addon-actions';
3351
34-
const fields = {
35-
36-
text: {
37-
label: 'Text'
38-
},
39-
40-
textarea: {
41-
label: 'Textarea',
42-
type: 'textarea'
43-
},
52+
export default {
4453
45-
select: {
46-
label: 'Select',
47-
type: 'select',
48-
default: 1,
49-
options: {
50-
one: 1,
51-
two: 2,
52-
three: 3
54+
fields: {
55+
56+
text: {
57+
label: 'Text'
58+
},
59+
60+
textarea: {
61+
label: 'Textarea',
62+
type: 'textarea'
63+
},
64+
65+
select: {
66+
label: 'Select',
67+
type: 'select',
68+
default: 1,
69+
options: {
70+
one: 1,
71+
two: 2,
72+
three: 3
73+
}
74+
},
75+
76+
number: {
77+
label: 'Number',
78+
type: 'number'
79+
},
80+
81+
// custom: {
82+
// label: 'Custom',
83+
// type: 'custom'
84+
// },
85+
86+
show: {
87+
type: 'checkbox',
88+
default: true
89+
},
90+
91+
_show: {
92+
label: 'Show/Hide',
93+
type: 'text',
94+
show: 'show == true'
95+
},
96+
97+
enable: {
98+
type: 'checkbox',
99+
default: true
100+
},
101+
102+
_enable: {
103+
label: 'Enable/Disable',
104+
type: 'text',
105+
enable: ({enable}) => enable
106+
},
107+
108+
'nested.text': {
109+
label: 'Nested Text',
110+
type: 'text'
53111
}
54-
},
55-
56-
number: {
57-
label: 'Number',
58-
type: 'number'
59-
},
60112
61-
// custom: {
62-
// label: 'Custom',
63-
// type: 'custom'
64-
// },
65-
66-
show: {
67-
type: 'checkbox',
68-
default: true
69-
},
70-
71-
_show: {
72-
label: 'Show/Hide',
73-
type: 'text',
74-
show: 'show == true'
75-
},
76-
77-
enable: {
78-
type: 'checkbox',
79-
default: true
80113
},
81114
82-
_enable: {
83-
label: 'Enable/Disable',
84-
type: 'text',
85-
enable: ({enable}) => enable
86-
},
87-
88-
'nested.text': {
89-
label: 'Nested Text',
90-
type: 'text'
91-
}
92-
93-
};
94-
95-
export default {
96-
97115
components: {
98-
FieldsCustom
116+
Fields,
117+
...FieldComponents
99118
},
100119
101-
extends: Vue.component('fields'),
120+
data: () => ({
121+
values: {}
122+
}),
102123
103-
computed: {
104-
105-
fields() {
106-
return this.prepare(fields);
107-
}
108-
109-
},
110-
111-
mounted() {
112-
this.$on('change', (value, {name}) => {
124+
methods: {
125+
logChange(value, {name}) {
113126
action(`@change (${name})`)(value);
114-
});
127+
}
115128
}
116129
117130
};

0 commit comments

Comments
 (0)