import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from '@storybook/addon-actions'
import BaseInput from '@/elements/input/BaseInput.vue'
import BaseSearchInput from '@/elements/input/BaseSearchInput.vue'

<Meta title="Elements|Input" component={BaseInput} />

# Text Input

## Base Input

<Props of={BaseInput} />

## Usage

```ts
import BaseInput from '@revas/korala-library/src/elements/input/BaseInput.vue'
```

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

## Base Search Input

## Usage

```ts
import BaseSearchInput from '@revas/korala-library/src/elements/input/BaseSearchInput.vue'
```

<Props of={BaseSearchInput} />

<Preview>
  <Story name="Search">
    {{
        components: { BaseSearchInput },
        data () {
          return {
            value: 'hello world'
          }
        },
        template: '<base-search-input placeholder="Search something" :value="value" @input="onInput" />',
        methods: { onInput ($event) { this.value = $event.value } }
    }}
  </Story>
</Preview>

## Known issues

- On user input, if the value prop is not updated, the component shows user input instead of stored value.