{"version":3,"file":"index.vue.mjs","sources":["../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    persistent\n  >\n    <template #content>\n      <div v-click-outside=\"hide\">\n        <div :class=\"ns.be('dropdown', 'main-wrapper')\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine v-if=\"predefine\" ref=\"predefine\" :color=\"color\" :colors=\"predefine\" />\n        <div :class=\"ns.be('dropdown', 'btns')\">\n          <span :class=\"ns.be('dropdown', 'value')\">\n            <el-input\n              v-model=\"customInput\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button size=\"small\" text :class=\"ns.be('dropdown', 'link-btn')\" @click=\"clear\">\n            清空\n          </el-button>\n          <el-button plain size=\"small\" :class=\"ns.be('dropdown', 'btn')\" @click=\"confirmValue\">\n            确定\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #default>\n      <div :class=\"[ns.b('picker'), ns.is('disabled', colorDisabled), ns.bm('picker', colorSize)]\">\n        <div v-if=\"colorDisabled\" :class=\"ns.be('picker', 'mask')\"></div>\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch\n} from 'vue'\nimport { debounce } from 'lodash-unified'\nimport ElButton from '@element-ultra/components/button'\nimport ElIcon from '@element-ultra/components/icon'\nimport { ClickOutside } from '@element-ultra/directives'\nimport { useSize, useNamespace, useFormItem } from '@element-ultra/hooks'\nimport ElTooltip from '@element-ultra/components/tooltip'\nimport ElInput from '@element-ultra/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-ultra/shared'\nimport { isValidComponentSize } from '@element-ultra/utils'\nimport { Close, ArrowDown } from 'icon-ultra'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-ultra/shared'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElTooltip,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine\n  },\n  directives: {\n    ClickOutside\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: {\n      type: Boolean,\n      default: undefined\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize\n    },\n    popperClass: String,\n    predefine: Array\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const ns = useNamespace('color')\n    const { formItem, form } = useFormItem()\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n        value: props.modelValue\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize({ props })\n    const colorDisabled = computed(() => {\n      return !!(props.disabled || form?.props.disabled)\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      newVal => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      val => {\n        customInput.value = val\n        emit('active-change', val)\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha: boolean) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value: boolean) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      formItem?.validate()\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n          value: props.modelValue\n        })\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        formItem?.validate()\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor\n    })\n\n    return {\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      ns,\n      hue,\n      svPanel,\n      alpha,\n      popper\n    }\n  }\n})\n</script>\n"],"names":["_resolveDirective","_openBlock","_createBlock","_withCtx","_withDirectives","_createElementBlock","_createElementVNode","_normalizeClass","_createVNode","_createCommentVNode","_withKeys","_normalizeStyle","_vShow"],"mappings":"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"}