{"version":3,"file":"Palette.mjs","sources":["../../../../../src/components/color-picker-v3/src/common/Palette.vue"],"sourcesContent":["<template>\n  <div class=\"vc-compact\">\n    <template v-for=\"(v, i) in palettes\" :key=\"i\">\n      <div class=\"vc-compact__row\">\n        <template v-for=\"(v1, k) in v\" :key=\"k\">\n          <div\n            class=\"vc-compact__color-cube--wrap\"\n            @click=\"onColorChange(v1)\"\n            @mouseenter=\"onColorPre(v1)\"\n            @mouseleave=\"onResetChange()\"\n          >\n            <div\n              :class=\"[\n                'vc-compact__color_cube',\n                {\n                  advance: v1 === 'advance',\n                  transparent: v1 === 'transparent',\n                },\n              ]\"\n              :style=\"computedBgStyle(v1)\"\n            ></div>\n          </div>\n        </template>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import tinycolor from 'tinycolor2';\n  import propTypes from 'vue-types';\n  import { Color } from '../utils/color';\n\n  const defaultColors: string[][] = [\n    // 第一行\n    [\n      '#fcc02e',\n      '#f67c01',\n      '#e64a19',\n      '#d81b43',\n      '#8e24aa',\n      '#512da7',\n      '#1f87e8',\n      '#008781',\n      '#05a045',\n    ],\n    // 第二行\n    [\n      '#fed835',\n      '#fb8c00',\n      '#f5511e',\n      '#eb1d4e',\n      '#9c28b1',\n      '#5d35b0',\n      '#2097f3',\n      '#029688',\n      '#4cb050',\n    ],\n    // 第三行\n    [\n      '#ffeb3c',\n      '#ffa727',\n      '#fe5722',\n      '#eb4165',\n      '#aa47bc',\n      '#673bb7',\n      '#42a5f6',\n      '#26a59a',\n      '#83c683',\n    ],\n    // 第四行\n    [\n      '#fff176',\n      '#ffb74e',\n      '#ff8a66',\n      '#f1627e',\n      '#b968c7',\n      '#7986cc',\n      '#64b5f6',\n      '#80cbc4',\n      '#a5d6a7',\n    ],\n    // 第五行\n    [\n      '#fff59c',\n      '#ffcc80',\n      '#ffab91',\n      '#fb879e',\n      '#cf93d9',\n      '#9ea8db',\n      '#90caf8',\n      '#b2dfdc',\n      '#c8e6ca',\n    ],\n    // 最后一行\n    [\n      'transparent',\n      '#ffffff',\n      '#dedede',\n      '#a9a9a9',\n      '#4b4b4b',\n      '#353535',\n      '#212121',\n      '#000000',\n      'advance',\n    ],\n  ];\n\n  export default defineComponent({\n    name: 'Palette',\n    emits: ['change'],\n    props: {\n      color: propTypes.instanceOf(Color),\n    },\n    setup(_props, { emit }) {\n      const computedBgStyle = (color: string) => {\n        if (color === 'transparent') {\n          return color;\n        }\n        if (color === 'advance') {\n          return {};\n        }\n        return { background: tinycolor(color).toRgbString() };\n      };\n\n      const cacheColor = ref(_props.color?.hex);\n\n      const onColorChange = (color: string) => {\n        if (color !== 'advance') {\n          emit('change', color, false);\n          cacheColor.value = color;\n        } else {\n          // chrome 面版\n          emit('change', color);\n        }\n      };\n\n      // 保存预览颜色\n      const onColorPre = (color: string) => {\n        console.log('onColorPure => %o', color);\n        if (color !== 'advance') {\n          emit('change', color, true);\n        }\n      };\n\n      const onResetChange = () => {\n        cacheColor.value && emit('change', cacheColor.value);\n      };\n\n      return {\n        palettes: defaultColors,\n        computedBgStyle,\n        onColorChange,\n        onColorPre,\n        onResetChange,\n      };\n    },\n  });\n</script>\n\n<style lang=\"scss\">\n  .vc-compact {\n    margin-bottom: 15px;\n    width: auto;\n    box-shadow: 3px 0 5px rgba(0, 0, 0, 0.08);\n    display: inline-block;\n\n    &__row {\n      position: relative;\n      width: 100%;\n      margin: 0;\n      height: 25px;\n\n      & > * {\n        display: inline-block;\n        vertical-align: middle;\n      }\n    }\n\n    &__color_cube {\n      width: 100%;\n      height: 100%;\n\n      &.transparent {\n        &::before {\n          content: '';\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background: white;\n        }\n\n        &::after {\n          content: '';\n          position: absolute;\n          top: 100%;\n          left: 0;\n          transform: rotate(-45deg);\n          transform-origin: 0 0;\n          width: 35px;\n          height: 1px;\n          background: red;\n        }\n      }\n\n      &.advance {\n        background: url(data:image/png;base64,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);\n      }\n\n      .alpha {\n        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);\n        background-repeat: repeat;\n      }\n    }\n\n    &__color-cube--wrap {\n      position: relative;\n      width: 25px;\n      height: 25px;\n      cursor: pointer;\n      overflow: hidden;\n\n      &:hover {\n        transform: scale(1.2);\n        z-index: 299;\n        transition: transform 0.2s;\n      }\n    }\n  }\n</style>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_renderList"],"mappings":";;;;;;;2BAEI,MAsBW,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;yCArBT,KAoBM,EAAA,UAAA,EAAA;AAAA,KArBoCA,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAAA,IAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA,CAAA,KAAA;AAChC,MAAA,OAAAH,SAAA,EAAkB,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,QAAA,GAAA,EAAA,CAAA;;;AACY,SAAAD,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA,KAAA;AAE7B,UAAA,OAAAH,SAAA,EAA+B,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,YACnC,GAAA,EAAA,CAAA;AAAA,YACA,KAAA,EAAA,8BAAA;AAAA,YACA,OAAU,EAAA,CAAA,MAAA,KAAA,IAAA,CAAA,aAAA,CAAA,EAAA,CAAA;AAAA,YAAA,YAAA,EAAA,CAAA,MAAA,KAAA,IAAA,CAAA,UAAA,CAAA,EAAA,CAAA;YAEX,YASO,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,aAAA,EAAA,CAAA;AAAA,WAAA,EAAA;;;;;;;AADJ,iBAAA;AAAA,eAAA,CAAA;;;;;;;;;;;;;"}