<template>
  <div>
    <nly-form-input v-model="text" placeholder="姓名"></nly-form-input>
    <div class="mt-2">Value: {{ text }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: '',
      }
    },
  }
</script>

<!-- v-model.name -->
<!-- nly-from-input.vue -->

<template>
  <nly-form-group :label="label">
    <nly-form-input v-model="value" :type="type" />
    <select class="form-control" v-model="type">
      <option>text</option>
      <option>password</option>
      <option>email</option>
      <option>number</option>
      <option>url</option>
      <option>tel</option>
      <option>search</option>
      <option>range</option>
      <option>color</option>
      <option>date</option>
      <option>time</option>
      <option>datetime</option>
      <option>datetime-local</option>
      <option>month</option>
      <option>week</option>
    </select>
  </nly-form-group>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        type: 'text',
      }
    },
    computed: {
      label() {
        return `类型为 ${this.type}, 值为 ${this.value}`
      },
    },
  }
</script>

<!-- type.name -->
<!-- nly-from-input.vue -->

<template>
  <div>
    <label for="range-1">range default</label>
    <nly-form-input id="range-1" v-model="value" type="range"></nly-form-input>
    <div class="mt-2">Value: {{ value }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '2',
      }
    },
  }
</script>

<!-- range.name -->
<!-- nly-from-input.vue -->

<template>
  <div>
    <label for="range-2">range default</label>
    <nly-form-input
      id="range-2"
      v-model="value"
      type="range"
      min="20"
      max="50"
    ></nly-form-input>
    <div class="mt-2">Value: {{ value }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '35',
      }
    },
  }
</script>

<!-- min-max.name -->
<!-- nly-from-input.vue -->

```html
<template>
  <div>
    <label for="range-1">range default</label>
    <nly-form-input
      id="range-1"
      v-model="value"
      type="range"
      step="10"
    ></nly-form-input>
    <div class="mt-2">Value: {{ value }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '50',
      }
    },
  }
</script>

<!-- step.name -->
<!-- nly-from-input.vue -->

<template>
  <nly-form-input type="range" :variant="variant" v-model="variantNum" />
</template>

<script>
  export default {
    data() {
      return {
        variantNum: '50',
      }
    },
    computed: {
      variant() {
        return this.variantNum >= 0 && this.variantNum < 10
          ? 'secondary'
          : this.variantNum >= 10 && this.variantNum < 20
          ? 'success'
          : this.variantNum >= 10 && this.variantNum < 20
          ? 'info'
          : this.variantNum >= 20 && this.variantNum < 30
          ? 'warning'
          : this.variantNum >= 30 && this.variantNum < 40
          ? 'danger'
          : this.variantNum >= 40 && this.variantNum < 50
          ? 'dark'
          : this.variantNum >= 50 && this.variantNum < 60
          ? 'lightblue'
          : this.variantNum >= 60 && this.variantNum < 70
          ? 'navy'
          : this.variantNum >= 70 && this.variantNum < 80
          ? 'olive'
          : this.variantNum >= 80 && this.variantNum < 90
          ? 'fuchsia'
          : this.variantNum >= 90 && this.variantNum < 100
          ? 'maroon'
          : 'indigo'
      },
    },
  }
</script>

<!-- variant.name -->
<!-- nly-from-input.vue -->

<div>
  <nly-form-group
    label-cols-xs="4"
    label-cols-lg="2"
    label-size="sm"
    label="Small"
    label-for="input-sm"
  >
    <nly-form-input id="input-sm" size="sm"></nly-form-input>
  </nly-form-group>

  <nly-form-group
    label-cols-xs="4"
    label-cols-lg="2"
    label="Default"
    label-for="input-default"
  >
    <nly-form-input id="input-default"></nly-form-input>
  </nly-form-group>

  <nly-form-group
    label-cols-xs="4"
    label-cols-lg="2"
    label-size="lg"
    label="Large"
    label-for="input-lg"
  >
    <nly-form-input id="input-lg" size="lg"></nly-form-input>
  </nly-form-group>
</div>

<!-- size.name -->
<!-- nly-form-input.vue -->

<nly-row>
  <nly-form-input xs="7" md="4" lg="6" placeholder="xs='5' sm='4' md='3'" />
  <nly-form-input xs="4" md="4" lg="2" placeholder="xs='4' sm='3' md='5' " />
  <nly-form-input xs="1" md="4" lg="4" placeholder="xs='3' sm='5' md='4'" />
</nly-row>

<!-- 宽度.name -->
<!-- nly-form-input.vue -->

<nly-row>
  <nly-form-input
    order-xs="5"
    order-sm="4"
    order-md="3"
    col
    placeholder="order-xs='5' order-sm='4' order-md='3'"
  />
  <nly-form-input
    col
    order-xs="4"
    order-sm="3"
    order-md="5"
    placeholder="order-xs='4' order-sm='3' order-md='5' "
  />
  <nly-form-input
    col
    order-xs="3"
    order-sm="5"
    order-md="4"
    placeholder="order-xs='3' order-sm='5' order-md='4'"
  />
</nly-row>

<!-- 顺序.name -->
<!-- nly-form-input.vue -->

<nly-row>
  <nly-form-input
    offset-xs="5"
    offset-sm="4"
    offset-md="3"
    col
    placeholder="offset-xs='5' offset-sm='4' offset-md='3'"
  />
</nly-row>

<!-- 偏移.name -->
<!-- nly-form-input.vue -->

<div>
  <nly-form-group label-cols-xs="3" label="invalid">
    <nly-form-input valid="invalid" />
  </nly-form-group>
  <nly-form-group label-cols-xs="3" label="valid">
    <nly-form-input valid="valid" />
  </nly-form-group>
  <nly-form-group label-cols-xs="3" label="warning">
    <nly-form-input valid="warning" />
  </nly-form-group>
  <nly-form-group label-cols-xs="3" label="loading">
    <nly-form-input valid="loading" />
  </nly-form-group>
</div>

<!-- valid.name -->
<!-- nly-form-input.vue -->

<div>
  <nly-form-input valid="valid" />
  <nly-form-feedback> 我是valid</nly-form-feedback>
  <nly-form-input valid="invalid" />
  <nly-form-feedback state="invalid"> 我是invalid</nly-form-feedback>
  <nly-form-input valid="warning" />
  <nly-form-feedback state="warning"> 我是warning</nly-form-feedback>
</div>

<!-- valid.name -->
<!-- nly-form-input.vue -->

<template>
  <nly-row>
    <nly-col>
      <nly-form-group
        id="fieldset-1"
        description="请输入姓名"
        label="姓名"
        label-for="input-1"
        :invalid-feedback="invalidFeedback"
        :valid-feedback="validFeedback"
        :warning-feedback="warningFeedback"
        :valid="state"
      >
        <nly-form-input
          id="input-1"
          v-model="name"
          :valid="state"
          trim
        ></nly-form-input>
      </nly-form-group>
    </nly-col>
  </nly-row>
</template>

<script>
  export default {
    computed: {
      state() {
        return this.name.length >= 8
          ? 'valid'
          : this.name.length < 4
          ? 'invalid'
          : 'warning'
      },
      invalidFeedback() {
        if (this.name.length > 4) {
          return ''
        } else if (this.name.length > 0) {
          return '请输入至少4个字符串'
        } else {
          return '内容不能为空'
        }
      },
      validFeedback() {
        return this.state === 'valid' ? 'ok，完美' : ''
      },
      warningFeedback() {
        return this.state === 'warning' ? '还是差一点点' : ''
      },
    },
    data() {
      return {
        name: '',
      }
    },
  }
</script>

<!-- nly-form-group.name -->
<!-- nly-form-input.vue -->

<template>
  <div>
    <nly-form-group
      class="mb-0"
      label="formatter 值，在input事件中触发"
      label-for="input-formatter"
      description="直接格式化"
    >
      <nly-form-input
        id="input-formatter"
        v-model="text1"
        placeholder="姓名"
        :formatter="formatter"
      ></nly-form-input>
    </nly-form-group>
    <p><b>Value:</b> {{ text1 }}</p>

    <nly-form-group
      class="mb-0"
      label="lazy formatter 值， 在blur时间中触发"
      label-for="input-lazy"
      description="惰性格式化"
    >
      <nly-form-input
        id="input-lazy"
        v-model="text2"
        placeholder="姓名"
        lazy-formatter
        :formatter="formatter"
      ></nly-form-input>
    </nly-form-group>
    <p class="mb-0"><b>Value:</b> {{ text2 }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text1: '',
        text2: '',
      }
    },
    methods: {
      formatter(value) {
        return value.toLowerCase()
      },
    },
  }
</script>

<!-- formatter.name -->
<!-- nly-form-input.vue -->

<nly-form-input placeholder="default" readonly />

<!-- readonly.name -->
<!-- nly-form-input.vue -->

<nly-form-input disabled />

<!-- disabled.name -->
<!-- nly-form-input.vue -->

<nly-form-input plaintext placeholder="default" />

<!-- plaintext.name -->
<!-- nly-form-input.vue -->

<div>
  <nly-form-input type="text" list="url_list" />
  <datalist id="url_list">
    <option label="W3Schools" value="http://www.w3schools.com" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
  </datalist>
</div>

<!-- Datalist.name -->
<!-- nly-form-input.vue -->

<template>
  <div>
    <nly-form-input v-model="value" type="text" debounce="0"></nly-form-input>
    <div class="mt-2">Value: "{{ value }}"</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
      }
    },
  }
</script>

<!-- debounce.name -->
<!-- nly-form-input.vue -->