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.
pagekit · Jun 1, 2019 · 193903f · 193903f
1 parent 0252ba4
commit 193903f
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 112 deletions.
diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1,7 @@
+export {default as FieldText} from './Text.vue';
+export {default as FieldTextarea} from './Textarea.vue';
+export {default as FieldRadio} from './Radio.vue';
+export {default as FieldCheckbox} from './Checkbox.vue';
+export {default as FieldSelect} from './Select.vue';
+export {default as FieldRange} from './Range.vue';
+export {default as FieldNumber} from './Number.vue';
diff --git a/src/field.js b/src/field.js
@@ -9,11 +9,6 @@ export default {
         field: {
             type: Object,
             required: true
-        },
-
-        values: {
-            type: Object,
-            required: true
         }
 
     },
@@ -34,7 +29,7 @@ export default {
 
             get() {
 
-                const value = get(this.values, this.name);
+                const value = get(this.$parent.values, this.name);
 
                 if (isUndefined(value) && !isUndefined(this.default)) {
                     return this.value = this.default;
@@ -44,7 +39,7 @@ export default {
             },
 
             set(value) {
-                this.$emit('change', value, this);
+                this.$parent.change(value, this.field);
             }
 
         },

diff --git a/src/fields.vue b/src/fields.vue
@@ -1,35 +1,25 @@
 <template>
 
-    <div>
-        <div v-for="field in fields" v-show="evaluate(field.show)" :key="field.name">
-            <label v-if="field.type != 'checkbox'">{{ field.label }}</label>
-            <component :is="field.component" :field="field" :values="values" @change="change"/>
-        </div>
-    </div>
+    <component :is="tag">
+        <slot :fields="fields" :evaluate="evaluate">
+            <div v-for="field in fields" v-show="evaluate(field.show)" :key="field.name">
+                <label v-if="field.type !== 'checkbox'">{{ field.label }}</label>
+                <component :is="field.component" :field="field"/>
+            </div>
+        </slot>
+    </component>
 
 </template>
 
 <script>
 
-    import FieldText from './components/Text.vue';
-    import FieldTextarea from './components/Textarea.vue';
-    import FieldRadio from './components/Radio.vue';
-    import FieldCheckbox from './components/Checkbox.vue';
-    import FieldSelect from './components/Select.vue';
-    import FieldRange from './components/Range.vue';
-    import FieldNumber from './components/Number.vue';
+    import * as FieldComponents from './components';
     import {assign, each, get, parse, isArray, isString, isFunction, isUndefined, set, warn} from './util';
 
     export default {
 
         components: {
-            FieldText,
-            FieldTextarea,
-            FieldRadio,
-            FieldCheckbox,
-            FieldSelect,
-            FieldRange,
-            FieldNumber
+            ...FieldComponents
         },
 
         provide() {
@@ -51,6 +41,11 @@
             prefix: {
                 type: String,
                 default: 'field-'
+            },
+
+            tag: {
+                type: String,
+                default: 'div'
             }
 
         },

diff --git a/stories/components/FieldsCustom.vue b/stories/components/FieldsCustom.vue
diff --git a/stories/components/FieldsStory.vue b/stories/components/FieldsStory.vue
@@ -5,18 +5,36 @@
         <h1>Fields</h1>
 
         <div class="row">
+
             <div class="col-md-6">
+
                 <div class="panel panel-default">
                     <div class="panel-heading"><h2 class="panel-title">Default</h2></div>
-                    <FieldsCustom/>
+
+                    <Fields :config="$options.fields" :values="values" @change="logChange"/>
                 </div>
+
             </div>
+
             <div class="col-md-6">
+
                 <div class="panel panel-default">
+
                     <div class="panel-heading"><h2 class="panel-title">Custom</h2></div>
-                    <FieldsCustom/>
+
+                    <Fields :config="$options.fields" :values="values" class="panel-body" tag="fieldset" @change="logChange">
+                        <template v-slot:default="{fields, evaluate}">
+                            <div v-for="field in fields" v-show="evaluate(field.show)" :key="field.name" class="form-group">
+                                <label v-if="field.type !== 'checkbox'">{{ field.label }}</label>
+                                <component :is="field.component" :field="field" class="form-control"/>
+                            </div>
+                        </template>
+                    </Fields>
+
                 </div>
+
             </div>
+
         </div>
 
         <pre>{{ values }}</pre>
@@ -27,91 +45,86 @@
 
 <script>
 
-    import Vue from 'vue';
-    import FieldsCustom from './FieldsCustom.vue';
+    import Fields from 'vue-fields/fields.vue';
+    import * as FieldComponents from 'vue-fields/components';
     import {action} from '@storybook/addon-actions';
 
-    const fields = {
-
-        text: {
-            label: 'Text'
-        },
-
-        textarea: {
-            label: 'Textarea',
-            type: 'textarea'
-        },
+    export default {
 
-        select: {
-            label: 'Select',
-            type: 'select',
-            default: 1,
-            options: {
-                one: 1,
-                two: 2,
-                three: 3
+        fields: {
+
+            text: {
+                label: 'Text'
+            },
+
+            textarea: {
+                label: 'Textarea',
+                type: 'textarea'
+            },
+
+            select: {
+                label: 'Select',
+                type: 'select',
+                default: 1,
+                options: {
+                    one: 1,
+                    two: 2,
+                    three: 3
+                }
+            },
+
+            number: {
+                label: 'Number',
+                type: 'number'
+            },
+
+            // custom: {
+            //     label: 'Custom',
+            //     type: 'custom'
+            // },
+
+            show: {
+                type: 'checkbox',
+                default: true
+            },
+
+            _show: {
+                label: 'Show/Hide',
+                type: 'text',
+                show: 'show == true'
+            },
+
+            enable: {
+                type: 'checkbox',
+                default: true
+            },
+
+            _enable: {
+                label: 'Enable/Disable',
+                type: 'text',
+                enable: ({enable}) => enable
+            },
+
+            'nested.text': {
+                label: 'Nested Text',
+                type: 'text'
             }
-        },
-
-        number: {
-            label: 'Number',
-            type: 'number'
-        },
 
-        // custom: {
-        //     label: 'Custom',
-        //     type: 'custom'
-        // },
-
-        show: {
-            type: 'checkbox',
-            default: true
-        },
-
-        _show: {
-            label: 'Show/Hide',
-            type: 'text',
-            show: 'show == true'
-        },
-
-        enable: {
-            type: 'checkbox',
-            default: true
         },
 
-        _enable: {
-            label: 'Enable/Disable',
-            type: 'text',
-            enable: ({enable}) => enable
-        },
-
-        'nested.text': {
-            label: 'Nested Text',
-            type: 'text'
-        }
-
-    };
-
-    export default {
-
         components: {
-            FieldsCustom
+            Fields,
+            ...FieldComponents
         },
 
-        extends: Vue.component('fields'),
+        data: () => ({
+            values: {}
+        }),
 
-        computed: {
-
-            fields() {
-                return this.prepare(fields);
-            }
-
-        },
-
-        mounted() {
-            this.$on('change', (value, {name}) => {
+        methods: {
+            logChange(value, {name}) {
                 action(`@change (${name})`)(value);
-            });
+            }
         }
 
     };