{"version":3,"file":"color-picker2.mjs","sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popper\"\n :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=\"`${ns.namespace.value}-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\n v-if=\"predefine\"\n ref=\"predefine\"\n :color=\"color\"\n :colors=\"predefine\"\n />\n <div :class=\"ns.be('dropdown', 'btns')\">\n <span :class=\"ns.be('dropdown', 'value')\">\n <el-input\n v-model=\"customInput\"\n :validate-event=\"false\"\n size=\"small\"\n @keyup.enter=\"handleConfirm\"\n @blur=\"handleConfirm\"\n />\n </span>\n <el-button\n :class=\"ns.be('dropdown', 'link-btn')\"\n text\n size=\"small\"\n @click=\"clear\"\n >\n {{ t('el.colorpicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n :class=\"ns.be('dropdown', 'btn')\"\n @click=\"confirmValue\"\n >\n {{ t('el.colorpicker.confirm') }}\n </el-button>\n </div>\n </div>\n </template>\n <template #default>\n <div\n :id=\"buttonId\"\n :class=\"btnKls\"\n role=\"button\"\n :aria-label=\"buttonAriaLabel\"\n :aria-labelledby=\"buttonAriaLabelledby\"\n :aria-description=\"\n t('el.colorpicker.description', { color: modelValue || '' })\n \"\n :tabindex=\"tabindex\"\n @keydown.enter=\"handleTrigger\"\n >\n <div v-if=\"colorDisabled\" :class=\"ns.be('picker', 'mask')\" />\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\" setup>\nimport {\n computed,\n nextTick,\n onMounted,\n provide,\n reactive,\n ref,\n watch,\n} from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElInput } from '@element-plus/components/input'\nimport {\n useFormDisabled,\n useFormItem,\n useFormItemInputId,\n useFormSize,\n} from '@element-plus/components/form'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn } from '@element-plus/utils'\nimport { ArrowDown, Close } from '@element-plus/icons-vue'\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 './utils/color'\nimport {\n colorPickerContextKey,\n colorPickerEmits,\n colorPickerProps,\n} from './color-picker'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\ndefineOptions({\n name: 'ElColorPicker',\n})\nconst props = defineProps(colorPickerProps)\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\n\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: formItem,\n})\n\nconst hue = ref<InstanceType<typeof HueSlider>>()\nconst sv = ref<InstanceType<typeof SvPanel>>()\nconst alpha = ref<InstanceType<typeof AlphaSlider>>()\nconst popper = ref<TooltipInstance>()\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst color = reactive(\n new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat || '',\n value: props.modelValue,\n })\n) as Color\n\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\nconst customInput = ref('')\n\nconst displayedColor = computed(() => {\n if (!props.modelValue && !showPanelColor.value) {\n return 'transparent'\n }\n return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n return !isLabeledByFormItem.value\n ? props.label || t('el.colorpicker.defaultLabel')\n : undefined\n})\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n return [\n ns.b('picker'),\n ns.is('disabled', colorDisabled.value),\n ns.bm('picker', colorSize.value),\n ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n if (!(color instanceof Color)) {\n throw new TypeError('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\nfunction setShowPicker(value: boolean) {\n showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100)\n\nfunction show() {\n if (colorDisabled.value) return\n setShowPicker(true)\n}\n\nfunction hide() {\n debounceSetShowPicker(false)\n resetColor()\n}\n\nfunction resetColor() {\n nextTick(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n } else {\n color.value = ''\n nextTick(() => {\n showPanelColor.value = false\n })\n }\n })\n}\n\nfunction handleTrigger() {\n if (colorDisabled.value) return\n debounceSetShowPicker(!showPicker.value)\n}\n\nfunction handleConfirm() {\n color.fromString(customInput.value)\n}\n\nfunction confirmValue() {\n const value = color.value\n emit(UPDATE_MODEL_EVENT, value)\n emit('change', value)\n if (props.validateEvent) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\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\nfunction clear() {\n debounceSetShowPicker(false)\n emit(UPDATE_MODEL_EVENT, null)\n emit('change', null)\n if (props.modelValue !== null && props.validateEvent) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\n resetColor()\n}\n\nonMounted(() => {\n if (props.modelValue) {\n customInput.value = currentColor.value\n }\n})\n\nwatch(\n () => props.modelValue,\n (newVal) => {\n if (!newVal) {\n showPanelColor.value = false\n } else if (newVal && newVal !== color.value) {\n shouldActiveChange = false\n color.fromString(newVal)\n }\n }\n)\n\nwatch(\n () => currentColor.value,\n (val) => {\n customInput.value = val\n shouldActiveChange && emit('activeChange', val)\n shouldActiveChange = true\n }\n)\n\nwatch(\n () => color.value,\n () => {\n if (!props.modelValue && !showPanelColor.value) {\n showPanelColor.value = true\n }\n }\n)\n\nwatch(\n () => showPicker.value,\n () => {\n nextTick(() => {\n hue.value?.update()\n sv.value?.update()\n alpha.value?.update()\n })\n }\n)\n\nprovide(colorPickerContextKey, {\n currentColor,\n})\n\ndefineExpose({\n /**\n * @description current color object\n */\n color,\n /**\n * @description manually show ColorPicker\n */\n show,\n /**\n * @description manually hide ColorPicker\n */\n hide,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAyIc,CAAA;AAAA,EACZ,IAAM,EAAA,eAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAM,MAAA,EAAE,MAAM,SAAU,EAAA,CAAA;AACxB,IAAM,MAAA,EAAA,GAAK,aAAa,OAAO,CAAA,CAAA;AAC/B,IAAM,MAAA,EAAE,aAAa,WAAY,EAAA,CAAA;AACjC,IAAA,MAAM,YAAY,WAAY,EAAA,CAAA;AAC9B,IAAA,MAAM,gBAAgB,eAAgB,EAAA,CAAA;AAEtC,IAAA,MAAM,EAAE,OAAA,EAAS,QAAU,EAAA,mBAAA,EAAA,GAAwB,mBAAmB,KAAO,EAAA;AAAA,MAC3E,eAAiB,EAAA,QAAA;AAAA,KAClB,CAAA,CAAA;AAED,IAAA,MAAM,MAAM,GAAoC,EAAA,CAAA;AAChD,IAAA,MAAM,KAAK,GAAkC,EAAA,CAAA;AAC7C,IAAA,MAAM,QAAQ,GAAsC,EAAA,CAAA;AACpD,IAAA,MAAM,SAAS,GAAqB,EAAA,CAAA;AAGpC,IAAA,IAAI,kBAAqB,GAAA,IAAA,CAAA;AAEzB,IAAM,MAAA,KAAA,GAAQ,QACZ,CAAA,IAAI,KAAM,CAAA;AAAA,MACR,aAAa,KAAM,CAAA,SAAA;AAAA,MACnB,MAAA,EAAQ,MAAM,WAAe,IAAA,EAAA;AAAA,MAC7B,OAAO,KAAM,CAAA,UAAA;AAAA,KACd,CACH,CAAA,CAAA;AAEA,IAAM,MAAA,UAAA,GAAa,IAAI,KAAK,CAAA,CAAA;AAC5B,IAAM,MAAA,cAAA,GAAiB,IAAI,KAAK,CAAA,CAAA;AAChC,IAAM,MAAA,WAAA,GAAc,IAAI,EAAE,CAAA,CAAA;AAE1B,IAAM,MAAA,cAAA,GAAiB,SAAS,MAAM;AACpC,MAAA,IAAI,CAAC,KAAA,CAAM,UAAc,IAAA,CAAC,eAAe,KAAO,EAAA;AAC9C,QAAO,OAAA,aAAA,CAAA;AAAA,OACT;AACA,MAAO,OAAA,YAAA,CAAa,KAAO,EAAA,KAAA,CAAM,SAAS,CAAA,CAAA;AAAA,KAC3C,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,SAAS,MAAM;AAClC,MAAA,OAAO,CAAC,KAAM,CAAA,UAAA,IAAc,CAAC,cAAe,CAAA,KAAA,GAAQ,KAAK,KAAM,CAAA,KAAA,CAAA;AAAA,KAChE,CAAA,CAAA;AAED,IAAM,MAAA,eAAA,GAAkB,SAA6B,MAAM;AACzD,MAAA,OAAO,CAAC,mBAAoB,CAAA,KAAA,GACxB,MAAM,KAAS,IAAA,CAAA,CAAE,6BAA6B,CAC9C,GAAA,KAAA,CAAA,CAAA;AAAA,KACL,CAAA,CAAA;AAED,IAAM,MAAA,oBAAA,GAAuB,SAA6B,MAAM;AAC9D,MAAO,OAAA,mBAAA,CAAoB,KAAQ,GAAA,QAAA,IAAoB,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,OAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KACxD,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,SAAS,MAAM;AAC5B,MAAO,OAAA;AAAA,QACL,EAAA,CAAG,EAAE,QAAQ,CAAA;AAAA,QACb,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,aAAA,CAAc,KAAK,CAAA;AAAA,QACrC,EAAG,CAAA,EAAA,CAAG,QAAU,EAAA,SAAA,CAAU,KAAK,CAAA;AAAA,OACjC,CAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,SAAA,YAAA,CAAsB,QAAc,SAAoB,EAAA;AACtD,MAAI,IAAA,oBAAmB,KAAQ,CAAA,EAAA;AAC7B,QAAM,MAAA,IAAI,UAAU,0CAA0C,CAAA,CAAA;AAAA,OAChE;AAEA,MAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,CAAA,EAAA,GAAM,OAAM,KAAM,EAAA,CAAA;AAChC,MAAA,OAAO,SACH,GAAA,CAAA,KAAA,EAAQ,CAAM,CAAA,EAAA,EAAA,CAAA,CAAA,EAAA,EAAM,CAAM,CAAA,EAAA,EAAA,MAAA,CAAM,GAAI,CAAA,OAAO,CAAI,GAAA,GAAA,CAAA,CAAA,CAAA,GAC/C,CAAO,IAAA,EAAA,CAAA,CAAA,EAAA,EAAM,CAAM,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,KACzB;AAEA,IAAA,SAAA,aAAA,CAAuB,KAAgB,EAAA;AACrC,MAAA,UAAA,CAAW,KAAQ,GAAA,KAAA,CAAA;AAAA,KACrB;AAEA,IAAM,MAAA,qBAAA,GAAwB,QAAS,CAAA,aAAA,EAAe,GAAG,CAAA,CAAA;AAEzD,IAAgB,SAAA,IAAA,GAAA;AACd,MAAA,IAAI,aAAc,CAAA,KAAA;AAAO,QAAA,OAAA;AACzB,MAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAAA,KACpB;AAEA,IAAgB,SAAA,IAAA,GAAA;AACd,MAAA,qBAAA,CAAsB,KAAK,CAAA,CAAA;AAC3B,MAAW,UAAA,EAAA,CAAA;AAAA,KACb;AAEA,IAAsB,SAAA,UAAA,GAAA;AACpB,MAAA,QAAA,CAAS,MAAM;AACb,QAAA,IAAI,MAAM,UAAY,EAAA;AACpB,UAAM,KAAA,CAAA,UAAA,CAAW,MAAM,UAAU,CAAA,CAAA;AAAA,SAC5B,MAAA;AACL,UAAA,KAAA,CAAM,KAAQ,GAAA,EAAA,CAAA;AACd,UAAA,QAAA,CAAS,MAAM;AACb,YAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAA;AAAA,WACxB,CAAA,CAAA;AAAA,SACH;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAEA,IAAyB,SAAA,aAAA,GAAA;AACvB,MAAA,IAAI,aAAc,CAAA,KAAA;AAAO,QAAA,OAAA;AACzB,MAAsB,qBAAA,CAAA,CAAC,WAAW,KAAK,CAAA,CAAA;AAAA,KACzC;AAEA,IAAyB,SAAA,aAAA,GAAA;AACvB,MAAM,KAAA,CAAA,UAAA,CAAW,YAAY,KAAK,CAAA,CAAA;AAAA,KACpC;AAEA,IAAwB,SAAA,YAAA,GAAA;AACtB,MAAA,MAAM,QAAQ,KAAM,CAAA,KAAA,CAAA;AACpB,MAAA,IAAA,CAAK,oBAAoB,KAAK,CAAA,CAAA;AAC9B,MAAA,IAAA,CAAK,UAAU,KAAK,CAAA,CAAA;AACpB,MAAA,IAAI,MAAM,aAAe,EAAA;AACvB,QAAU,QAAA,IAAA,IAAA,GAAS,SAAU,QAAO,CAAQ,QAAA,CAAA,QAAU,OAAI,CAAA,CAAA,GAAA,KAAA,SAAA,CAAA,GAAA,CAAA,CAAA,CAAA;AAAA,OAC5D;AACA,MAAA,qBAAA,CAAsB,KAAK,CAAA,CAAA;AAE3B,MAAA,QAAA,CAAS,MAAM;AACb,QAAM,MAAA,QAAA,GAAW,IAAI,KAAM,CAAA;AAAA,UACzB,aAAa,KAAM,CAAA,SAAA;AAAA,UACnB,MAAA,EAAQ,MAAM,WAAe,IAAA,EAAA;AAAA,UAC7B,OAAO,KAAM,CAAA,UAAA;AAAA,SACd,CAAA,CAAA;AACD,QAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,QAAQ,CAAG,EAAA;AAC5B,UAAW,UAAA,EAAA,CAAA;AAAA,SACb;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAEA,IAAiB,SAAA,KAAA,GAAA;AACf,MAAA,qBAAA,CAAsB,KAAK,CAAA,CAAA;AAC3B,MAAA,IAAA,CAAK,oBAAoB,IAAI,CAAA,CAAA;AAC7B,MAAA,IAAA,CAAK,UAAU,IAAI,CAAA,CAAA;AACnB,MAAA,IAAI,KAAM,CAAA,UAAA,KAAe,IAAQ,IAAA,KAAA,CAAM,aAAe,EAAA;AACpD,QAAU,QAAA,IAAA,IAAA,GAAS,SAAU,QAAO,CAAQ,QAAA,CAAA,QAAU,OAAI,CAAA,CAAA,GAAA,KAAA,SAAA,CAAA,GAAA,CAAA,CAAA,CAAA;AAAA,OAC5D;AACA,MAAW,UAAA,EAAA,CAAA;AAAA,KACb;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,MAAM,UAAY,EAAA;AACpB,QAAA,WAAA,CAAY,QAAQ,YAAa,CAAA,KAAA,CAAA;AAAA,OACnC;AAAA,KACD,CAAA,CAAA;AAED,IAAA,KAAA,CACE,MAAM,KAAA,CAAM,UACZ,EAAA,CAAC,MAAW,KAAA;AACV,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAA;AAAA,OACd,MAAA,IAAA,MAAA,IAAU,MAAW,KAAA,KAAA,CAAM,KAAO,EAAA;AAC3C,QAAqB,kBAAA,GAAA,KAAA,CAAA;AACrB,QAAA,KAAA,CAAM,WAAW,MAAM,CAAA,CAAA;AAAA,OACzB;AAAA,KAEJ,CAAA,CAAA;AAEA,IAAA,KAAA,CACE,MAAM,YAAA,CAAa,KACnB,EAAA,CAAC,GAAQ,KAAA;AACP,MAAA,WAAA,CAAY,KAAQ,GAAA,GAAA,CAAA;AACpB,MAAsB,kBAAA,IAAA,IAAA,CAAK,gBAAgB,GAAG,CAAA,CAAA;AAC9C,MAAqB,kBAAA,GAAA,IAAA,CAAA;AAAA,KAEzB,CAAA,CAAA;AAEA,IACE,KAAA,CAAA,MAAM,KAAM,CAAA,KAAA,EACZ,MAAM;AACJ,MAAA,IAAI,CAAC,KAAA,CAAM,UAAc,IAAA,CAAC,eAAe,KAAO,EAAA;AAC9C,QAAA,cAAA,CAAe,KAAQ,GAAA,IAAA,CAAA;AAAA,OACzB;AAAA,KAEJ,CAAA,CAAA;AAEA,IACE,KAAA,CAAA,MAAM,UAAW,CAAA,KAAA,EACjB,MAAM;AACJ,MAAA,QAAA,CAAS,MAAM;AACb,QAAA,IAAI,QAAc,EAAA,CAAA;AAClB,QAAA,CAAA,EAAG,OAAO,KAAO,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,EAAA,CAAA;AACjB,QAAA,CAAA,EAAA,GAAM,QAAc,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,EAAA,CAAA;AAAA,QACrB,CAAA,EAAA,GAAA,KAAA,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,EAAA,CAAA;AAAA,OAEL,CAAA,CAAA;AAEA,KAAA,CAAA,CAAA;AAA+B,IAC7B,OAAA,CAAA,qBAAA,EAAA;AAAA,MACD,YAAA;AAED,KAAa,CAAA,CAAA;AAAA,IAIX,MAAA,CAAA;AAAA,MAIA,KAAA;AAAA,MAIA,IAAA;AAAA,MACD,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
