{"version":3,"file":"Display.mjs","sources":["../../../../../src/components/color-picker-v3/src/common/Display.vue"],"sourcesContent":["<template>\n  <div class=\"vc-display\">\n    <div class=\"vc-current-color vc-transparent\">\n      <div class=\"color-cube\" :style=\"getBgColorStyle\"></div>\n    </div>\n    <div class=\"vc-color-input\">\n      <input :value=\"state.hex\" @input=\"onInputChange\" />\n    </div>\n    <div class=\"vc-alpha-input\" v-if=\"!disableAlpha\">\n      <input class=\"vc-alpha-input__inner\" :value=\"state.alpha\" @input=\"onAlphaBlur\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, reactive, watch } from 'vue';\n  import propTypes from 'vue-types';\n  import { Color } from '../utils/color';\n  import { whenever, useDebounceFn } from '@vueuse/core';\n  import tinycolor from 'tinycolor2';\n\n  export default defineComponent({\n    name: 'Display',\n    props: {\n      color: propTypes.instanceOf(Color),\n      disableAlpha: propTypes.bool.def(false),\n    },\n    emits: ['update:color', 'change'],\n    setup(props, { emit }) {\n      const state = reactive({\n        color: props.color,\n        hex: props.color?.hex,\n        alpha: props.color?.alpha + '%',\n        previewBgColor: props.color?.toRgbString(),\n      });\n\n      const getBgColorStyle = computed(() => {\n        return {\n          background: state.previewBgColor,\n        };\n      });\n\n      const onAlphaBlur: any = useDebounceFn((event: any) => {\n        if (!event.target.value) {\n          return;\n        }\n\n        const opacity = parseInt(event.target.value.replace('%', ''));\n        if (!isNaN(opacity) && state.color) {\n          state.color.alpha = opacity;\n        }\n\n        emit('update:color', state.color);\n        emit('change', state.color);\n      }, 300);\n\n      const onInputChange = useDebounceFn((event) => {\n        if (!event.target.value) {\n          return;\n        }\n\n        const _hex = event.target.value.replace('#', '');\n        if (tinycolor(_hex).isValid() && state.color) {\n          state.color.hex = _hex;\n        }\n\n        emit('update:color', state.color);\n        emit('change', state.color);\n      }, 300);\n\n      whenever(\n        () => props.color,\n        (value: Color) => {\n          if (value) {\n            state.color = value;\n            state.alpha = state.color.alpha + '%';\n            state.hex = state.color.hex;\n          }\n        },\n        { deep: true },\n      );\n\n      whenever(\n        () => state.color,\n        () => {\n          if (state.color) {\n            state.previewBgColor = state.color.toRgbString();\n          }\n        },\n        { deep: true },\n      );\n\n      return { state, getBgColorStyle, onAlphaBlur, onInputChange };\n    },\n  });\n</script>\n\n<style lang=\"scss\">\n  .vc-display {\n    margin-top: 16px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n\n    .vc-current-color {\n      margin-right: 10px;\n      width: 50px;\n      height: 100%;\n      box-shadow: 3px 0 5px #00000014;\n      position: relative;\n      cursor: pointer;\n      overflow: hidden;\n      display: inline-block;\n      vertical-align: middle;\n\n      &.vc-transparent {\n        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);\n        background-repeat: repeat;\n      }\n\n      .color-cube {\n        width: 100%;\n        height: 100%;\n      }\n    }\n\n    .vc-color-input {\n      height: 100%;\n      flex: 1;\n      flex-shrink: 0;\n      box-sizing: border-box;\n      position: relative;\n\n      input {\n        padding: 0;\n        border: 0;\n        outline: none;\n        cursor: pointer;\n        color: #33383e;\n        font-size: 14px;\n        text-align: center;\n        box-sizing: border-box;\n        background-color: #f1f2f4;\n        border-radius: 4px;\n        height: 100%;\n        width: 100%;\n      }\n    }\n\n    .vc-alpha-input {\n      margin-left: 8px;\n      width: 56px;\n      height: 100%;\n      border: none;\n      display: -ms-flexbox;\n      display: flex;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -ms-flex-align: center;\n      align-items: center;\n      background-color: #f1f2f4;\n      border-radius: 4px;\n      font-size: 14px;\n\n      > input {\n        width: 100%;\n        padding: 0;\n        text-align: center;\n        color: inherit;\n        font-size: inherit;\n      }\n\n      &__inner {\n        padding: 10px 16px;\n        border-radius: 4px;\n        color: #000;\n        font-size: 14px;\n        line-height: 20px;\n        background: transparent;\n        outline: none;\n        border: none;\n        display: block;\n        box-sizing: border-box;\n        cursor: pointer;\n      }\n    }\n  }\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;;;;qBAKS,KAAM,EAAA,YAAA,EAAA,CAAA;;;;MAGN,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;;AANX,SAAA,WAAA,CAAA,IAAA,EAEM,QAFN,MAEM,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SADJA,SAAuD,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,kBAAA,CAA5C,KAAY,EAAA,UAAA,EAAA;AAAA,MAAAA,kBAAA,CAAO,KAAE,EAAA;AAAA,QAAA,KAAA,EAAA,YAAA;;OAI5B,EAAA,IAAA,EAAA,CAAA,CAAA;AAAA,KAAA,CAAA;uBADW,KAAS,EAAA,UAAA,EAAA;AAAA,MAAQA,kBAAA,CAAA,OAAA,EAAA;AAAA,QAAA,KAAA,EAAA,IAAA,CAAA,KAAA,CAAA,GAAA;;OAEa,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAAA,KAAA,CAAA;AAC7C,IAAA,CAAA,IAAA,CAAA,YAAA,IAAAF,SAAA,EAAoC,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,MAAAC,kBAAA,CAAe,OAAK,EAAA;AAAA,QAAG,KAAK,EAAA,uBAAA;AAAA,QAAA,KAAA,EAAA,IAAA,CAAA,KAAA,CAAA,KAAA;;;;;;;;;;"}