<template>
  <div>
    <group title="Default">
      <x-number
        v-model="v0"
        name="number"
        title="Number"
      />
    </group>

    <group title="listen to change events">
      <x-number
        v-model="v1"
        name="listen"
        title="Number"
        :min="0"
        @on-change="change"
      />
    </group>

    <group title="set width=100">
      <x-number
        v-model="v7"
        title="Number"
        :width="100"
      />
    </group>

    <group title="set step=0.5">
      <x-number
        v-model="v6"
        title="Number"
        :step="0.5"
      />
    </group>

    <group title="set value=1, min=-5 and max=8">
      <x-number
        v-model="v2"
        title="Number"
        :min="-5"
        :max="8"
      />
    </group>

    <group title="fillable = false">
      <x-number
        v-model="v3"
        title="Number"
        :fillable="false"
      />
    </group>

    <group title="with other element">
      <x-number
        v-model="v4"
        title="Number"
        :min="-5"
        :max="8"
        type="inline"
      />
      <x-number
        v-model="v5"
        title="Number"
        :min="-5"
        :max="8"
        type="inline"
      />
      <x-switch
        v-model="show"
        title="Other element"
      />
    </group>
    <group title="custom Number">
      <x-number
        v-model="v4"
        title="Number"
        :shell="false"
        :min="-5"
        :max="8"
        type="inline"
        input-classes="input"
      >
        <a
          slot="add"
          style="dispaly:inline-block;width:20px;height:20px;"
          href="javascript:void(0);"
        >A</a>
        <a
          slot="sub"
          style="dispaly:inline-block;width:20px;height:20px;"
          href="javascript:void(0);"
        >S</a>
      </x-number>
    </group>
  </div>
</template>

<script>
import { Group, XNumber, XSwitch } from '../components/_index'

export default {
  components: {
    XNumber,
    Group,
    XSwitch
  },
  data () {
    return {
      show: true,
      v0: 0,
      v1: 0,
      v2: 1,
      v3: 10,
      v4: 1,
      v5: 1,
      v6: 0,
      v7: 0
    }
  },
  methods: {
    change (val) {
      console.log('change', val)
    }
  }
}
</script>
<style lang="less">
  .input {
    border: 1px solid red;
  }
</style>
