import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from '@storybook/addon-actions'

import BaseFieldset from '@/elements/form/BaseFieldset.vue'
import BaseField from '@/elements/form/BaseField.vue'

import BaseInput from '@/elements/input/BaseInput.vue'

<Meta title="Elements|Form" />

# Fieldset

`BaseFieldset` is a container for `BaseField` objects.

<Props of={BaseFieldset} />

## Base Field

`BaseField` is a container for input form components that need consistency across the system.

<Props of={BaseField} />

<Preview>
  <Story name="Simple Field">
    {{
        components: { BaseField, BaseInput },
        data () {
          return {
            value: 'hello world'
          }
        },
        template: 
          `<base-field
            label="Example value">
            <base-input :value="value" @input="onInput" />
          </base-field>`,
        methods: { onInput ($event) { this.value = $event.value } }
    }}
  </Story>
</Preview>

## Field with Description

<Preview>
  <Story name="Field with Description">
    {{
        components: { BaseField, BaseInput },
        data () {
          return {
            value: 'hello world'
          }
        },
        template: 
          `<base-field
            label="Example value"
            description="This is the example value you can find in the proper section.">
            <base-input :value="value" @input="onInput" />
          </base-field>`,
        methods: { onInput ($event) { this.value = $event.value } }
    }}
  </Story>
</Preview>

## Field with Error Message

<Preview>
  <Story name="Field with Error Message">
    {{
        components: { BaseField, BaseInput },
        data () {
          return {
            value: 'hello world'
          }
        },
        template: 
          `<base-field
            label="Example value"
            message="This is required, don't leave it empty."
            :error="true">
            <base-input :error="true" :value="value" @input="onInput" />
          </base-field>`,
        methods: { onInput ($event) { this.value = $event.value } }
    }}
  </Story>
</Preview>