<commit_before><template>
  <div class="c-photoshop">
    <div class="head">{{head}}</div>
    <div class="body">
      <div class="saturation-wrap">
        <saturation :colors.sync="colors" :on-change="childChange"></saturation>
      </div>
      <div class="hue-wrap">
        <hue :colors.sync="colors" :on-change="childChange" direction="vertical">
          <div class="hue-pointer">
            <i class="left"></i><i class="right"></i>
          </div>
        </hue>  
      </div>
      <div class="controls">
        <div class="previews">
          <div class="label">new</div>
          <div class="swatches">
            <div class="pr-color" :style="{background: colors.hex}"></div>
            <div class="pr-color" :style="{background: currentColor}"></div>
          </div>
          <div class="label">current</div>
        </div>
        <div class="actions">
          <div class="ac-btn" @click="handleAccept">OK</div>
          <div class="ac-btn" @click="handleCancel">Cancel</div>
          <div class="fields">
            <!-- hsla -->
            <ed-in label="h" :val.sync="colors.hsl.h" 
              :on-change="inputChange"></ed-in>
            <ed-in label="s" :val.sync="colors.hsl.s"
              :on-change="inputChange"></ed-in>
            <ed-in label="v" :val.sync="colors.hsl.l"
              :on-change="inputChange"></ed-in>
            <div class="divider"></div>
            <!-- rgba -->
            <ed-in label="r" :val.sync="colors.rgba.r" 
              :on-change="inputChange"></ed-in>
            <ed-in label="g" :val.sync="colors.rgba.g" 
              :on-change="inputChange"></ed-in>
            <ed-in label="b" :val.sync="colors.rgba.b"
              :on-change="inputChange"></ed-in>
            <div class="divider"></div>
            <!-- hex -->
            <ed-in label="#" class="hex"
              :val.sync="colors.hex"
              :on-change="inputChange"></ed-in>    
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import colorMixin from '../mixin/color'
import editableInput from './common/EditableInput.vue'
import saturation from './common/Saturation.vue'
import hue from './common/Hue.vue'
import alpha from './common/Alpha.vue'

export default {
  name: 'Photoshop',
  mixins: [colorMixin],
  props: {
    head: {
      type: String,
      default: 'Color Picker'
    }
  },
  components: {
    saturation,
    hue,
    alpha,
    'ed-in': editableInput
  },
  data () {
    return {
      currentColor: '#FFF'
    }
  },
  created () {
    this.currentColor = this.colors.hex
  },
  methods: {
    childChange (data) {
      this.colorChange(data)
    },
    inputChange (data) {
      if (!data) {
        return
      }
      if (data['#']) {
        this.isValidHex(data['#']) && this.colorChange({
          hex: data['#'],
          source: 'hex'
        })
      } else if (data.r || data.g || data.b || data.a) {
        this.colorChange({
          r: data.r || this.colors.rgba.r,
          g: data.g || this.colors.rgba.g,
          b: data.b || this.colors.rgba.b,
          a: data.a || this.colors.rgba.a,
          source: 'rgba'
        })
      }
    },
    handleAccept () {
      console.log('accept')
    },
    handleCancel () {
      console.log('cancel')
    }
  }

}
</script>

<style lang="stylus">
.c-photoshop
  background #DCDCDC
  border-radius 4px
  box-shadow 0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15)
  box-sizing initial
  width 513px
  font-family Roboto
  .head
    background-image linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%)
    border-bottom 1px solid #B1B1B1
    box-shadow inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02)
    height 23px
    line-height 24px
    border-radius 4px 4px 0 0
    font-size 13px
    color #4D4D4D
    text-align center
  .body
    padding 15px
    display flex
  .saturation-wrap
    width 256px
    height 256px
    position relative
    border 2px solid #B3B3B3
    border-bottom 2px solid #F0F0F0
    overflow hidden
  .hue-wrap
    position relative
    height 256px
    width 19px
    margin-left 10px
    border 2px solid #B3B3B3
    border-bottom 2px solid #F0F0F0
  .hue-pointer
    position relative
    .left
    .right
      position absolute
      width 0
      height 0
      border-style solid
      border-width 5px 0 5px 8px
      border-color transparent transparent transparent #555
      &:after
        content ""
        width 0
        height 0<commit_msg>[UPD] update ps picker<commit_after><template>
  <div class="c-photoshop">
    <div class="head">{{head}}</div>
    <div class="body">
      <div class="saturation-wrap">
        <saturation :colors.sync="colors" :on-change="childChange"></saturation>
      </div>
      <div class="hue-wrap">
        <hue :colors.sync="colors" :on-change="childChange" direction="vertical">
          <div class="hue-pointer">
            <i class="left"></i><i class="right"></i>
          </div>
        </hue>  
      </div>
      <div class="controls">
        <div class="previews">
          <div class="label">new</div>
          <div class="swatches">
            <div class="pr-color" :style="{background: colors.hex}"></div>
            <div class="pr-color" :style="{background: currentColor}"></div>
          </div>
          <div class="label">current</div>
        </div>
        <div class="actions">
          <div class="ac-btn" @click="handleAccept">OK</div>
          <div class="ac-btn" @click="handleCancel">Cancel</div>
          <div class="fields">
            <!-- hsla -->
            <ed-in label="h" :val.sync="colors.hsl.h" 
              :on-change="inputChange"></ed-in>
            <ed-in label="s" :val.sync="colors.hsl.s"
              :on-change="inputChange"></ed-in>
            <ed-in label="v" :val.sync="colors.hsl.l"
              :on-change="inputChange"></ed-in>
            <div class="divider"></div>
            <!-- rgba -->
            <ed-in label="r" :val.sync="colors.rgba.r" 
              :on-change="inputChange"></ed-in>
            <ed-in label="g" :val.sync="colors.rgba.g" 
              :on-change="inputChange"></ed-in>
            <ed-in label="b" :val.sync="colors.rgba.b"
              :on-change="inputChange"></ed-in>
            <div class="divider"></div>
            <!-- hex -->
            <ed-in label="#" class="hex"
              :val.sync="colors.hex"
              :on-change="inputChange"></ed-in>    
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import colorMixin from '../mixin/color'
import editableInput from './common/EditableInput.vue'
import saturation from './common/Saturation.vue'
import hue from './common/Hue.vue'
import alpha from './common/Alpha.vue'

export default {
  name: 'Photoshop',
  mixins: [colorMixin],
  props: {
    head: {
      type: String,
      default: 'Color Picker'
    }
  },
  components: {
    saturation,
    hue,
    alpha,
    'ed-in': editableInput
  },
  data () {
    return {
      currentColor: '#FFF'
    }
  },
  created () {
    this.currentColor = this.colors.hex
  },
  methods: {
    childChange (data) {
      this.colorChange(data)
    },
    inputChange (data) {
      if (!data) {
        return
      }
      if (data['#']) {
        this.isValidHex(data['#']) && this.colorChange({
          hex: data['#'],
          source: 'hex'
        })
      } else if (data.r || data.g || data.b || data.a) {
        this.colorChange({
          r: data.r || this.colors.rgba.r,
          g: data.g || this.colors.rgba.g,
          b: data.b || this.colors.rgba.b,
          a: data.a || this.colors.rgba.a,
          source: 'rgba'
        })
      }
    },
    handleAccept () {
      console.log('accept')
    },
    handleCancel () {
      console.log('cancel')
    }
  }

}
</script>

<style lang="stylus">
.c-photoshop
  background #DCDCDC
  border-radius 4px
  box-shadow 0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15)
  box-sizing initial
  width 513px
  font-family Roboto
  .head
    background-image linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%)
    border-bottom 1px solid #B1B1B1
    box-shadow inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02)
    height 23px
    line-height 24px
    border-radius 4px 4px 0 0
    font-size 13px
    color #4D4D4D
    text-align center
  .body
    padding 15px
    display flex
  .saturation-wrap
    width 256px
    height 256px
    position relative
    border 2px solid #B3B3B3
    border-bottom 2px solid #F0F0F0
    overflow hidden
    .circle
      width 12px
      height 12px
  .hue-wrap
    position relative
    height 256px
    width 19px
    margin-left 10px
    border 2px solid #B3B3B3
    border-bottom 2px solid #F0F0F0
  .hue-pointer
    position relative
    .left
    .right
      position absolute
      width 0
      height 0
      border-style solid
      border-width 5px 0 5px 8px
      border-color transparent transparent transparent #555
      &:after
        content ""
        width 0
        height 0
{'fraction_non_alphanumeric': 0.15924619792814634, 'fraction_numerical': 0.02622878554110646, 'mean_word_length': 1.9445165476963011, 'pattern_counts': {'":': 0, '<': 139, '<?xml version=': 0, '>': 139, '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': '2985896', 'n_tokens_mistral': 3244, 'n_tokens_neox': 3028, 'n_words': 645}