<template>
  <div id="app">
    <header class="header">
      <h1 class="title">Vue material checkbox</h1>
      <div class="flex">
      <a href="https://github.com/xrei/vue-material-checkbox"><button class="btn">Github</button></a>
      <a href="https://www.npmjs.com/package/vue-material-checkbox"><button class="btn">npm</button></a>
      </div>
    </header>
    <div class="example">
      <div class="flex">
        <div class="example-cont">
        <h2>Group check</h2>
          <div class="flex">
            <Checkbox 
              value="cat"
              v-model="values"
              color="#f50057"
              checked
            >Cat</Checkbox>
            <Checkbox id="" :value="55" v-model="values">55</Checkbox>
            <Checkbox id="" value="husky" v-model="values">Husky</Checkbox>
            <Checkbox id="" value="fish" v-model="values">fish</Checkbox>
          </div>
          <span>{{ values }}</span>
        </div>
        <div class="example-code">
          <pre v-pre>
            <code class="html">
  &#x3C;Checkbox value="cat" v-model="values" color="#f50057">Cat&#x3C;/Checkbox&#x3E;
  &#x3C;Checkbox value="dog" v-model="values">Dog&#x3C;/Checkbox&#x3E;
  &#x3C;Checkbox value="husky" v-model="values">Husky&#x3C;/Checkbox&#x3E;
  &#x3C;Checkbox value="fish" v-model="values">fish&#x3C;/Checkbox&#x3E;
            </code>
          </pre>
        </div>
      </div>
      <p>There is no ID's on Checkboxes and they will'be autogenerated, But i recommend specify them yourself.</p>
    </div>
    <br>
    <div class="example">
      <div class="flex">
        <div class="example-cont">
          <h2>Simple check/checked/disabled</h2>
          <div class="flex">
            <Checkbox
              v-for="(box, id) in checks"
              :key="id"
              :value="box.check"
              :checked="box.checked"
              :disabled="box.disabled"
              @change="handleChange(box)"
            >{{ box.check }}</Checkbox>
          </div>
        </div>
        <div class="example-code">
          <pre v-pre>
            <code class="html">
&#x3C;Checkbox
  v-for="(box, id) in checks"
  :key="id"
  :value="box.check"
  :checked="box.checked"
  :disabled="box.disabled"
  @change="handleChange(box)"
&#x3E;{{ box.check }}&#x3C;/Checkbox&#x3E;
            </code>
          </pre>
        </div>
      </div>
    </div>
    <br>
    <div class="example">
      <div class="flex">
        <div class="example-cont">
          <h2>Checkbox sizes</h2>
          <div class="flex">
            <Checkbox
              v-model="csize1" 
              :value="csize1v"
              color="#f50057"
              :size="48"
              :fontSize="20"
            >size 48px</Checkbox>
            <Checkbox 
              v-model="csize2"
              :value="100"
              color="#0070ff"
              checked
              :size="32"
              :fontSize="20"
            >size 32px</Checkbox>
          </div>
          <p>This component must be used with <code>v-model</code> to work properly</p>
        </div>
        <div class="example-code">
          <pre v-pre>
            <code class="html">
  &#x3C;Checkbox v-model="model" value="any value" color="#f50057" :size="48">size 48px&#x3C;/Checkbox&#x3E;
  &#x3C;Checkbox v-model="model" color="#0070ff" :size="32">size 32px&#x3C;/Checkbox&#x3E;
            </code>
          </pre>
        </div>
      </div>
    </div>
    <br>
    <footer>&copy; Roman 2017-2019</footer>
  </div>
</template>

<script>
import Checkbox from '../../src/main'

export default {
  components: { Checkbox },
  name: 'app',
  data() { 
    return {
      checks: [
        { check: false },
        { check: false, checked: true },
        { check: false, disabled: true },
      ],
      values: [],
      csize1: false,
      csize1v: {x: 1},
      csize2: false
    }
  },
  methods: {
    handleChange(box) {
      box.check = !box.check
    }
  }
}
</script>

<style lang="stylus">
*
  box-sizing: border-box
  margin: 0
  padding: 0
  &:before, &:after
    box-sizing: inherit

body, html
  width: 100%
  height: 100%
  color: #212121
  background-color: #263238
  font-family: 'Roboto'
  line-height: 1.5

a
  text-decoration: none

#app
  width: 62.5rem
  margin: 0 auto
  display: flex
  justify-content: flex-start
  flex-flow: column
  padding: 0 1rem 1rem
  @media screen and (max-width: 39.9375em)
    min-height: 100%
    width: 100%
    padding: 0 .75rem .75rem

header
  display: flex
  justify-content: center
  margin: 1.5rem
  flex-flow: column
  align-items: center
  .flex
    flex-flow: row

.title
  margin-bottom: 1rem
  text-align: center
  color: #fff

.example
  background-color: #fff
  border: 1px solid rgba(0,0,0, .05)
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)
  padding: 1rem
  position: relative

  .example-cont
    width: 35%
    display: flex
    flex-flow: column

    .flex
      flex-flow: row
    h2
      margin-bottom: 1rem
      font-size: 20px
    @media screen and (max-width: 39.9375em)
      width: 100%

  .example-code
    position: relative
    display: flex
    justify-content: center
    align-items: center
    width: 65%
    @media screen and (max-width: 39.9375em)
      width: 100%
    pre
      width: 100%
      font-size: 14px
      overflow: scroll
      code
        padding: 1rem
.flex
  display: flex
  @media screen and (max-width: 39.9375em)
    flex-flow: column

footer
  display: flex
  justify-content: center
  align-items: center
  margin: 2rem 0 0
  color: #fff
  opacity: .4

.btn
  background-color: #00e5ff
  text-transform: uppercase
  align-items: center
  border-radius: 2px
  border: 0
  display: inline-flex
  height: 36px
  flex: 0 1 auto
  font-size: 16px
  font-weight: 500
  justify-content: center
  margin: .5rem
  min-width: 9rem
  outline: 0
  text-decoration: none
  transition: .3s cubic-bezier(.25,.8,.25,1), color 1ms
  position: relative
  vertical-align: middle
  cursor: pointer
  a
    text-decoration: none
    color: inherit
  &:focus, &:hover
    background-color: darken(#00e5ff, 5)
  &:active
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)

</style>
