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

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

# MetaKeyValueFieldset

<Props of={ MetaKeyValueFieldset } />

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

<Preview>
  <Story name="default">
    {{
      components: { MetaKeyValueFieldset },
      data () {
        return {
          values: [
            { key: 'key', value: 'value' }
          ],
          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>{{values}}<meta-key-value-fieldset label="Example Object" :values="values" :template="template" @input="onInput" /></div>`,
      methods: {
        onInput: function ($event) {
          this.values = $event.value // value is always not null
        }
      }
    }}
  </Story>
</Preview>