<commit_before><template>
  <div class="c-alpha">
    <div class="checkboard-wrap">
      <checkboard></checkboard>
    </div>
    <div class="gradient" :style="{background: gradientColor}"></div>
    <div class="container" v-el:container
        @mousedown="handleMouseDown"
        @touchmove="handleChange"
        @touchstart="handleChange">
      <div class="pointer" :style="{left: colors.a * 100 + '%'}">
        <div class="picker"></div>
      </div>
    </div>
  </div>
</template>

<script>
import checkboard from './Checkboard.vue'

export default {
  name: 'Alpha',
  props: {
    colors: Object,
    onChange: Function
  },
  components:{
    checkboard
  },
  data () {
    return {}
  },
  computed: {
    gradientColor () {
      var rgba = this.colors.rgba
      return 'linear-gradient(to right, rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', 0) 0%, rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', 1) 100%)'
    }
  },
  methods:{
    handleChange (e, skip)  {
      !skip && e.preventDefault()
      var container = this.$els.container
      var containerWidth = container.clientWidth
      var left = (e.pageX || e.touches[0].pageX) - (container.getBoundingClientRect().left + window.pageXOffset)

      var a
      if (left < 0) {
        a = 0
      } else if (left > containerWidth) {
        a = 1
      } else {
        a = Math.round(left * 100 / containerWidth) / 100
      }

      if (this.colors.a !== a) {
        this.onChange({
          h: this.colors.hsl.h,
          s: this.colors.hsl.s,
          l: this.colors.hsl.l,
          a: a,
          source: 'rgba',
        })
      }
    },

    handleMouseDown (e)  {
      this.handleChange(e, true)
      window.addEventListener('mousemove', this.handleChange)
      window.addEventListener('mouseup', this.handleMouseUp)
    },
    handleMouseUp  () {
      this.unbindEventListeners()
    },
    unbindEventListeners  ()  {
      window.removeEventListener('mousemove', this.handleChange)
      window.removeEventListener('mouseup', this.handleMouseUp)
    }
  }
}
</script>
<commit_msg>[UPD] update alpha code delete data and add slot<commit_after><template>
  <div class="c-alpha">
    <div class="checkboard-wrap">
      <checkboard></checkboard>
    </div>
    <div class="gradient" :style="{background: gradientColor}"></div>
    <div class="container" v-el:container
        @mousedown="handleMouseDown"
        @touchmove="handleChange"
        @touchstart="handleChange">
      <div class="pointer" :style="{left: colors.a * 100 + '%'}">
        <slot><div class="picker"></div></slot>
      </div>
    </div>
  </div>
</template>

<script>
import checkboard from './Checkboard.vue'

export default {
  name: 'Alpha',
  props: {
    colors: Object,
    onChange: Function
  },
  components: {
    checkboard
  },
  computed: {
    gradientColor () {
      var rgba = this.colors.rgba
      var rgbStr = [rgba.r, rgba.g, rgba.b].join(',')
      return 'linear-gradient(to right, rgba(' + rgbStr + ', 0) 0%, rgba(' + rgbStr + ', 1) 100%)'
    }
  },
  methods: {
    handleChange (e, skip)  {
      !skip && e.preventDefault()
      var container = this.$els.container
      var containerWidth = container.clientWidth
      var left = (e.pageX || e.touches[0].pageX) - (container.getBoundingClientRect().left + window.pageXOffset)

      var a
      if (left < 0) {
        a = 0
      } else if (left > containerWidth) {
        a = 1
      } else {
        a = Math.round(left * 100 / containerWidth) / 100
      }

      if (this.colors.a !== a) {
        this.onChange({
          h: this.colors.hsl.h,
          s: this.colors.hsl.s,
          l: this.colors.hsl.l,
          a: a,
          source: 'rgba',
        })
      }
    },
    handleMouseDown (e)  {
      this.handleChange(e, true)
      window.addEventListener('mousemove', this.handleChange)
      window.addEventListener('mouseup', this.handleMouseUp)
    },
    handleMouseUp  () {
      this.unbindEventListeners()
    },
    unbindEventListeners  ()  {
      window.removeEventListener('mousemove', this.handleChange)
      window.removeEventListener('mouseup', this.handleMouseUp)
    }
  }
}

</script>

{'fraction_non_alphanumeric': 0.15770609318996415, 'fraction_numerical': 0.00908004778972521, 'mean_word_length': 2.3222222222222224, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4128785', 'n_tokens_mistral': 1427, 'n_tokens_neox': 1353, 'n_words': 273}