element-plus-secondary 0.6.13 → 0.6.15

package/es/components/color-picker/src/color-picker.mjs

@@ -70,7 +70,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return displayedRgb(color, props.showAlpha);
     });
     const showBorder = computed(() => {
-      return ["rgb(255, 255, 255)", "rgba(255, 255, 255, 1)", "#FFFFFFFF", "#FFFFFF"].includes(props.modelValue);
+      return [
+        "rgb(255, 255, 255)",
+        "rgba(255, 255, 255, 1)",
+        "#FFFFFFFF",
+        "#FFFFFF"
+      ].includes(props.modelValue);
     });
     const computdTriggerWidth = computed(() => {
       return colorSize.value === "large" ? props.triggerWidth + 18 : props.triggerWidth;
@@ -161,16 +166,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.validateEvent) {
         formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
       }
-      nextTick(() => {
-        const newColor = new Color({
-          enableAlpha: props.showAlpha,
-          format: props.colorFormat || "",
-          value: props.modelValue
-        });
-        if (!color.compare(newColor)) {
-          resetColor();
-        }
-      });
     }
     function clear() {
       debounceSetShowPicker(false);
@@ -356,8 +351,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: normalizeClass(unref(ns).be("picker", "mask"))
             }, null, 2)) : createCommentVNode("v-if", true),
             createElementVNode("div", {
-              style: normalizeStyle(_ctx.isCustom ? { width: unref(computdTriggerWidth) ? unref(computdTriggerWidth) + "px" : "auto" } : {}),
-              class: normalizeClass([unref(ns).be("picker", "trigger"), props.prefixIcon && _ctx.isCustom && unref(ns).be("picker", "trigger-with-icon")]),
+              style: normalizeStyle(_ctx.isCustom ? {
+                width: unref(computdTriggerWidth) ? unref(computdTriggerWidth) + "px" : "auto"
+              } : {}),
+              class: normalizeClass([
+                unref(ns).be("picker", "trigger"),
+                props.prefixIcon && _ctx.isCustom && unref(ns).be("picker", "trigger-with-icon")
+              ]),
               onClick: handleTrigger
             }, [
               props.prefixIcon && _ctx.isCustom ? (openBlock(), createBlock(unref(ElIcon), {
@@ -371,7 +371,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 _: 1
               }, 8, ["class"])) : createCommentVNode("v-if", true),
               createElementVNode("span", {
-                class: normalizeClass([unref(ns).be("picker", "color"), unref(ns).is("alpha", _ctx.showAlpha), unref(showBorder) && "show-border"])
+                class: normalizeClass([
+                  unref(ns).be("picker", "color"),
+                  unref(ns).is("alpha", _ctx.showAlpha),
+                  unref(showBorder) && "show-border"
+                ])
               }, [
                 createElementVNode("span", {
                   class: normalizeClass(unref(ns).be("picker", "color-inner")),
@@ -380,7 +384,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   })
                 }, [
                   withDirectives(createVNode(unref(ElIcon), {
-                    style: normalizeStyle(_ctx.isCustom ? { marginLeft: unref(computdTriggerWidth) ? unref(computdTriggeIconWidth) + "px" : "auto" } : {}),
+                    style: normalizeStyle(_ctx.isCustom ? {
+                      marginLeft: unref(computdTriggerWidth) ? unref(computdTriggeIconWidth) + "px" : "auto"
+                    } : {}),
                     class: normalizeClass([unref(ns).be("picker", "icon"), unref(ns).is("icon-arrow-down")])
                   }, {
                     default: withCtx(() => [

package/es/components/color-picker/src/color-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.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    :teleported=\"teleported\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]\"\n    :stop-popper-mouse-event=\"false\"\n    :effect=\"effect\"\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=\"sv\" :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 @click.stop :class=\"ns.be('dropdown', 'btns')\">\n          <span :class=\"ns.be('dropdown', 'value')\">\n            <el-input\n              v-model=\"customInput\"\n              @keydown.stop\n              @keyup.stop\n              :validate-event=\"false\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"customInputChange\"\n            />\n          </span>\n          <el-icon @click.stop=\"getEyeDropper\"><EditPen /></el-icon> \n          <el-radio-group  @change=\"modeChange\" v-model=\"colorMode\" size=\"small\">\n            <el-radio-button label=\"HEX\" />\n            <el-radio-button label=\"RGB\" />\n          </el-radio-group>\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        \n        <div :style=\"isCustom ? {width: computdTriggerWidth ?  computdTriggerWidth + 'px' : 'auto'} : {}\" :class=\"[ns.be('picker', 'trigger'), (props.prefixIcon && isCustom) && ns.be('picker', 'trigger-with-icon') ]\" @click=\"handleTrigger\">\n          <ElIcon :class=\"ns.be('picker', 'custom-icon')\" v-if=\"props.prefixIcon && isCustom\" style=\"font-size: 16px\">\n            <component :is=\"props.prefixIcon\"></component>\n          </ElIcon>\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha), showBorder && 'show-border']\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                :style=\"isCustom ? { marginLeft: computdTriggerWidth ? computdTriggeIconWidth + 'px' : 'auto' } : {}\"\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n              <svg viewBox=\"0 0 24 24\" id=\"icon-icon_down_outlined-1\"><path d=\"m12 15.864 8.132-8.132a.5.5 0 0 1 .707 0l.707.707a.5.5 0 0 1 0 .707l-8.839 8.84a1 1 0 0 1-1.414 0l-8.839-8.84a.5.5 0 0 1 0-.707l.707-.707a.5.5 0 0 1 .707 0L12 15.864Z\"></path></svg>\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'\n// import { ElButton } from '@element-plus/components/button'\nimport { ElRadioGroup} from '@element-plus/components/radio'\nimport { ElRadioButton } from '@element-plus/components/radio'\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  useDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useSize,\n} from '@element-plus/hooks'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn } from '@element-plus/utils'\nimport { Close, EditPen } 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'\nimport { useEyeDropper } from '@vueuse/core'\ndefineOptions({\n  name: 'ElColorPicker',\n})\nconst props = defineProps(colorPickerProps)\nconst emit = defineEmits(colorPickerEmits)\nconst { isSupported, open, sRGBHex } = useEyeDropper()\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useSize()\nconst colorDisabled = useDisabled()\n\n\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 || props.modelValue?.startsWith('#') ? 'hex' : 'rgb',\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 showBorder = computed(() => {\n  return ['rgb(255, 255, 255)', 'rgba(255, 255, 255, 1)', '#FFFFFFFF', '#FFFFFF'].includes(props.modelValue as string)\n})\n\nconst computdTriggerWidth = computed(() => {\n  return colorSize.value === 'large' ? props.triggerWidth + 18 : props.triggerWidth\n})\n\nconst computdTriggeIconWidth = computed(() => {\n  return colorSize.value === 'large' ? computdTriggerWidth.value * 2 - 67 : computdTriggerWidth.value * 2 - 62 - (props.prefixIcon ? 72 : 0)\n})\n\n\n\n\nconst getEyeDropper = () => {\n  if (!isSupported) return\n  open()\n}\nconst colorMode = ref(props.modelValue?.startsWith('#') ? 'HEX' : 'RGB')\n\nconst currentColor = computed(() => {\n  return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst modeChange = (val: string | number | boolean) => {\n  color.format = (val as string).toLowerCase()\n  handleConfirm()\n  customInput.value = color.value\n}\n\nfunction customInputChange() {\n  handleConfirm()\n  customInput.value = color.value\n  confirmValue()\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.is('custom', props.isCustom),\n    ns.is('effect', props.effect === 'dark'),\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  setTimeout(() => {\n    if (colorDisabled.value) return\n    setShowPicker(true)\n  }, 100)\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  showPicker.value && 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\n\nwatch(sRGBHex, (newValue) => {\n  color.fromString(newValue)\n  customInput.value = color.value\n})\n\nwatch(\n  () => customInput.value,\n  (newValue, oldValue) => {\n    if(newValue !== oldValue) {\n      confirmValue()\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>"],"names":[],"mappings":"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"}
+{"version":3,"file":"color-picker.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    :teleported=\"teleported\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]\"\n    :stop-popper-mouse-event=\"false\"\n    :effect=\"effect\"\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=\"sv\" :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 @click.stop :class=\"ns.be('dropdown', 'btns')\">\n          <span :class=\"ns.be('dropdown', 'value')\">\n            <el-input\n              v-model=\"customInput\"\n              @keydown.stop\n              @keyup.stop\n              :validate-event=\"false\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"customInputChange\"\n            />\n          </span>\n          <el-icon @click.stop=\"getEyeDropper\"><EditPen /></el-icon>\n          <el-radio-group @change=\"modeChange\" v-model=\"colorMode\" size=\"small\">\n            <el-radio-button label=\"HEX\" />\n            <el-radio-button label=\"RGB\" />\n          </el-radio-group>\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\n        <div\n          :style=\"\n            isCustom\n              ? {\n                  width: computdTriggerWidth\n                    ? computdTriggerWidth + 'px'\n                    : 'auto',\n                }\n              : {}\n          \"\n          :class=\"[\n            ns.be('picker', 'trigger'),\n            props.prefixIcon &&\n              isCustom &&\n              ns.be('picker', 'trigger-with-icon'),\n          ]\"\n          @click=\"handleTrigger\"\n        >\n          <ElIcon\n            :class=\"ns.be('picker', 'custom-icon')\"\n            v-if=\"props.prefixIcon && isCustom\"\n            style=\"font-size: 16px\"\n          >\n            <component :is=\"props.prefixIcon\"></component>\n          </ElIcon>\n          <span\n            :class=\"[\n              ns.be('picker', 'color'),\n              ns.is('alpha', showAlpha),\n              showBorder && 'show-border',\n            ]\"\n          >\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                :style=\"\n                  isCustom\n                    ? {\n                        marginLeft: computdTriggerWidth\n                          ? computdTriggeIconWidth + 'px'\n                          : 'auto',\n                      }\n                    : {}\n                \"\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <svg viewBox=\"0 0 24 24\" id=\"icon-icon_down_outlined-1\">\n                  <path\n                    d=\"m12 15.864 8.132-8.132a.5.5 0 0 1 .707 0l.707.707a.5.5 0 0 1 0 .707l-8.839 8.84a1 1 0 0 1-1.414 0l-8.839-8.84a.5.5 0 0 1 0-.707l.707-.707a.5.5 0 0 1 .707 0L12 15.864Z\"\n                  ></path>\n                </svg>\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\";\n// import { ElButton } from '@element-plus/components/button'\nimport { ElRadioGroup } from \"@element-plus/components/radio\";\nimport { ElRadioButton } from \"@element-plus/components/radio\";\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  useDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useSize,\n} from \"@element-plus/hooks\";\nimport { useLocale, useNamespace } from \"@element-plus/hooks\";\nimport { UPDATE_MODEL_EVENT } from \"@element-plus/constants\";\nimport { debugWarn } from \"@element-plus/utils\";\nimport { Close, EditPen } 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\";\nimport { useEyeDropper } from \"@vueuse/core\";\ndefineOptions({\n  name: \"ElColorPicker\",\n});\nconst props = defineProps(colorPickerProps);\nconst emit = defineEmits(colorPickerEmits);\nconst { isSupported, open, sRGBHex } = useEyeDropper();\nconst { t } = useLocale();\nconst ns = useNamespace(\"color\");\nconst { formItem } = useFormItem();\nconst colorSize = useSize();\nconst colorDisabled = useDisabled();\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:\n      props.colorFormat || props.modelValue?.startsWith(\"#\") ? \"hex\" : \"rgb\",\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 showBorder = computed(() => {\n  return [\n    \"rgb(255, 255, 255)\",\n    \"rgba(255, 255, 255, 1)\",\n    \"#FFFFFFFF\",\n    \"#FFFFFF\",\n  ].includes(props.modelValue as string);\n});\n\nconst computdTriggerWidth = computed(() => {\n  return colorSize.value === \"large\"\n    ? props.triggerWidth + 18\n    : props.triggerWidth;\n});\n\nconst computdTriggeIconWidth = computed(() => {\n  return colorSize.value === \"large\"\n    ? computdTriggerWidth.value * 2 - 67\n    : computdTriggerWidth.value * 2 - 62 - (props.prefixIcon ? 72 : 0);\n});\n\nconst getEyeDropper = () => {\n  if (!isSupported) return;\n  open();\n};\nconst colorMode = ref(props.modelValue?.startsWith(\"#\") ? \"HEX\" : \"RGB\");\n\nconst currentColor = computed(() => {\n  return !props.modelValue && !showPanelColor.value ? \"\" : color.value;\n});\n\nconst modeChange = (val: string | number | boolean) => {\n  color.format = (val as string).toLowerCase();\n  handleConfirm();\n  customInput.value = color.value;\n};\n\nfunction customInputChange() {\n  handleConfirm();\n  customInput.value = color.value;\n  confirmValue();\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.is(\"custom\", props.isCustom),\n    ns.is(\"effect\", props.effect === \"dark\"),\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  setTimeout(() => {\n    if (colorDisabled.value) return;\n    setShowPicker(true);\n  }, 100);\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}\nfunction confirmValue() {\n  // noChange.value = true\n  const value = color.value;\n  emit(UPDATE_MODEL_EVENT, value);\n  showPicker.value && 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\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  // noChange.value = false;\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(sRGBHex, (newValue) => {\n  color.fromString(newValue);\n  customInput.value = color.value;\n});\n\nwatch(\n  () => customInput.value,\n  (newValue, oldValue) => {\n    if (newValue !== oldValue) {\n      confirmValue();\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":"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"}