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

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

# KeyValueFieldset

<Props of={ KeyValueFieldset } />

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

<Preview>
  <Story name="default">
    {{
        components: { KeyValueFieldset },
        data () {
          return {
            values: [
              { key: 'key', value: 'value' }
            ]
          }
        },
        template: `<key-value-fieldset :values="values" @input="onInput" />`,
        methods: {
          onInput: function ($event) {
            this.values = $event.value // value is always not null
          }
        }
    }}
  </Story>
</Preview>