<template>
  <div>
    <divider>default</divider>
    <box gap="10px 10px">
      <x-button>submit</x-button>
      <x-button type="primary">
        primary
      </x-button>
      <x-button type="warn">
        Delete
      </x-button>

      <divider>mini</divider>
      <x-button mini>
        submit
      </x-button>
      <x-button
        mini
        type="primary"
      >
        primary
      </x-button>
      <x-button
        mini
        type="warn"
      >
        Delete
      </x-button>
      <br>
      <x-button
        mini
        plain
      >
        submit
      </x-button>
      <x-button
        mini
        plain
        type="primary"
      >
        primary
      </x-button>

      <divider>plain</divider>
      <x-button plain>
        submit
      </x-button>
      <x-button
        plain
        type="primary"
      >
        primary
      </x-button>

      <divider>disabled</divider>
      <x-button disabled>
        disable submit
      </x-button>
      <x-button
        type="primary"
        disabled
        css-classes="marT"
      >
        disable primary
      </x-button>
      <x-button
        type="warn"
        disabled
      >
        disable Delete
      </x-button>

      <divider>use :text and :disabled</divider>
      <x-button
        :text="submit001"
        :disabled="disable001"
        type="primary"
        @click="processButton001"
      />

      <divider>自定义样式如何传入</divider>
      <x-button
        type="primary"
        disabled
        css-classes="marT"
      >
        自定义样式
      </x-button>
      <divider>combined with flexbox</divider>
      <flexbox>
        <flexbox-item>
          <x-button type="primary">
            primary
          </x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="warn">
            Delete
          </x-button>
        </flexbox-item>
      </flexbox>
      <divider>combined with flexbox</divider>
      <flexbox>
        <flexbox-item>
          <x-button type="default">
            default
          </x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="primary">
            primary
          </x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="warn">
            Delete
          </x-button>
        </flexbox-item>
      </flexbox>
    </box>
  </div>
</template>

<script>
import {
  XButton,
  Box,
  Flexbox,
  FlexboxItem,
  Divider
} from '../components/_index'
export default {
  components: {
    XButton,
    Box,
    Flexbox,
    FlexboxItem,
    Divider
  },
  data() {
    return {
      submit001: 'click me',
      disable001: false
    }
  },
  methods: {
    change(value) {
      console.log('change:', value)
    },
    processButton001() {
      this.submit001 = 'processing'
      this.disable001 = true
    }
  }
}
</script>
