{"version":3,"file":"WrapContainer.mjs","sources":["../../../../../src/components/color-picker-v3/src/common/WrapContainer.vue"],"sourcesContent":["<template>\n  <div class=\"vc-colorpicker\">\n    <div class=\"vc-colorpicker--container\">\n      <div class=\"vc-colorpicker--tabs\" v-if=\"showTab\">\n        <div class=\"vc-colorpicker--tabs__inner\">\n          <div\n            :class=\"[\n              'vc-colorpicker--tabs__btn',\n              {\n                'vc-btn-active': state.activeKey === 'pure',\n              },\n            ]\"\n            @click=\"onActiveKeyChange('pure')\"\n          >\n            <button>\n              <div class=\"vc-btn__content\">{{ lang === 'ZH-cn' ? '纯色' : 'Pure' }}</div>\n            </button>\n          </div>\n          <div\n            :class=\"[\n              'vc-colorpicker--tabs__btn',\n              {\n                'vc-btn-active': state.activeKey === 'gradient',\n              },\n            ]\"\n            @click=\"onActiveKeyChange('gradient')\"\n          >\n            <button>\n              <div class=\"vc-btn__content\">{{ lang === 'ZH-cn' ? '渐变色' : 'Gradient' }}</div>\n            </button>\n          </div>\n          <div\n            class=\"vc-colorpicker--tabs__bg\"\n            :style=\"{\n              width: `50%`,\n              left: `calc(${state.activeKey === 'gradient' ? 50 : 0}%)`,\n            }\"\n          ></div>\n        </div>\n      </div>\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, inject, reactive, watch } from 'vue';\n  import propTypes from 'vue-types';\n  import { whenever } from '@vueuse/core';\n  import { ColorPickerProviderKey } from '../utils/type';\n  import type { ColorPickerProvider } from '../utils/type';\n\n  export default defineComponent({\n    name: 'WrapContainer',\n    props: {\n      showTab: propTypes.bool.def(false),\n      activeKey: propTypes.oneOf(['pure', 'gradient']).def('pure'),\n    },\n    emits: ['update:activeKey', 'change'],\n    setup(props, { emit }) {\n      const state = reactive({\n        activeKey: props.activeKey,\n      });\n\n      const parent = inject<ColorPickerProvider>(ColorPickerProviderKey);\n\n      const onActiveKeyChange = (key: string) => {\n        state.activeKey = key;\n        emit('update:activeKey', key);\n        emit('change', key);\n      };\n\n      watch(\n        () => props.activeKey,\n        (value) => {\n          state.activeKey = value;\n        },\n      );\n\n      return { state, onActiveKeyChange, lang: parent?.lang };\n    },\n  });\n</script>\n\n<style lang=\"scss\">\n  .vc-colorpicker {\n    position: relative;\n    box-sizing: border-box;\n    border-radius: 3px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);\n    user-select: none;\n    background-color: white;\n    width: 258px;\n    padding-bottom: 10px;\n    z-index: 10000;\n\n    * {\n      outline: none;\n      line-height: 1;\n    }\n\n    &--container {\n      padding: 16px;\n    }\n\n    &--tabs {\n      padding: 2px;\n      background: #f6f7f9;\n      border-radius: 6px;\n      position: relative;\n      margin-bottom: 12px;\n\n      &__inner {\n        display: -ms-flexbox;\n        display: flex;\n        -ms-flex-pack: justify;\n        justify-content: space-between;\n        padding: 0;\n        background: #f6f7f9;\n        border-bottom: none;\n        position: relative;\n        box-sizing: border-box;\n      }\n\n      &__btn {\n        -ms-flex: 1;\n        flex: 1;\n        z-index: 2;\n        color: #636c78;\n        font-size: 14px;\n        border-radius: 4px;\n        cursor: pointer;\n\n        &.vc-btn-active {\n          color: #33383e;\n          font-weight: 600;\n        }\n\n        button {\n          width: 100%;\n          background-color: initial;\n          padding: 6px 0;\n          font-size: 14px;\n          line-height: 20px;\n          color: #636c78;\n          border: 0;\n          border-radius: 0;\n          outline: 0;\n          cursor: pointer;\n          -webkit-appearance: none;\n          font-weight: inherit;\n\n          .vc-btn__content {\n            position: relative;\n            white-space: nowrap;\n          }\n        }\n      }\n\n      &__bg {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: #fff;\n        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);\n        border-radius: 4px;\n        z-index: 1;\n        transition: left 0.2s ease-in-out;\n      }\n    }\n  }\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeStyle","_createCommentVNode"],"mappings":";;;;;;;MAGW,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;AAyBE,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,6BAAiB,EAAA,CAAA;;;AA1BtC,SAAA,WAAA,CAAA,IAAA,EAuCM,QAvCN,MAuCM,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAtCoCA,SAAO,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAA/CC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,MAAA,IAAA,CACE,sBAaQ,EAAAD,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,QAXEC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,UAAAA,kBAAA,CAAA,KAAA,EAAA;;;;;;;YAQN,OAES,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,iBAAA,CAAA,MAAA,CAAA,CAAA;AAAA,WAAA,EAAA;;;AAEX,aAAA,CAAA;AAAA,WAAA,EACG,CAAK,CAAA;AAAA,UAAAA,kBAAA,CAAA,KAAA,EAAA;;;;;;;YAQN,OAES,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,iBAAA,CAAA,UAAA,CAAA,CAAA;AAAA,WAAA,EAAA;;;AAEX,aAAA,CAAA;AAAA,WAAA,EACE,CAAM,CAAA;AAAA,UACAA,kBAAA,CAAA,KAAA,EAAA;AAAA,YAAA,KAAA,EAAA,0BAAA;AAAkE,YAAA,KAAA,EAAAC,cAAA,CAAA;AAAA,cAAA,KAAA,EAAA,CAAA,GAAA,CAAA;;;;;AAO9E,OAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;;;;"}