import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from "@storybook/addon-actions"
import MetaObjectFieldset from '@/metaform/fieldset/MetaObjectFieldset.vue'

<Meta title="Extra: Metaform|MetaObjectFieldset" component={ MetaObjectFieldset } />

# MetaObjectFieldset

<Props of={ MetaObjectFieldset } />

`MetaObjectFieldset` allows to build an easy list of metadata objects.

<Preview>
  <Story name="default">
    {{
      components: { MetaObjectFieldset },
      data () {
        return {
          value: {
            text: '',
            date: new Date(),
            isoDate: ''
          },
          template: [
            { 
              type: 'string',
              key: 'text',
              label: 'Example Text',
              required: true,
              disabled: true
            },
            { 
              type: 'date',
              key: 'date',
              label: 'Example Date',
              required: true,
              disabled: true
            }
            ,
            { 
              type: 'iso-date',
              key: 'isoDate',
              label: 'Example Iso Date',
              required: true,
              disabled: true
            }
          ]
        }
      },
      template: `<div>{{value}}<meta-object-fieldset label="Example Object" :value="value" :template="template" @input="onInput" /></div>`,
      methods: {
        onInput: function ($event) {
          this.value = $event.value // value is always not null
        }
      }
    }}
  </Story>
</Preview>