Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(components): [color-picker] can't select predefine value #8205

Merged
merged 1 commit into from Jun 28, 2022
Merged

fix(components): [color-picker] can't select predefine value #8205

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 13 additions & 9 deletions packages/components/color-picker/src/index.vue
View file
Open in desktop
Expand Up @@ -67,7 +67,7 @@
:aria-label="buttonAriaLabel"
:aria-labelledby="buttonAriaLabelledby"
:aria-description="
t('el.colorpicker.description', { color: modelValue })
t('el.colorpicker.description', { color: modelValue || '' })
"
:tabindex="tabindex"
@keydown.enter="handleTrigger"
Expand Down Expand Up @@ -192,20 +192,21 @@ export default defineComponent({
}
)

const hue = ref(null)
const svPanel = ref(null)
const alpha = ref(null)
const hue = ref<InstanceType<typeof HueSlider>>()
const svPanel = ref<InstanceType<typeof SvPanel>>()
const alpha = ref<InstanceType<typeof AlphaSlider>>()
const popper = ref(null)
// active-change is used to prevent modelValue changes from triggering.
let shouldActiveChange = true
// data
const color = reactive(
new Color({
enableAlpha: props.showAlpha,
format: props.colorFormat,
format: props.colorFormat || '',
value: props.modelValue,
})
)
type ColorType = typeof color
const showPicker = ref(false)
const showPanelColor = ref(false)
const customInput = ref('')
Expand Down Expand Up @@ -263,7 +264,7 @@ export default defineComponent({
)

// methods
function displayedRgb(color, showAlpha) {
function displayedRgb(color: ColorType, showAlpha: boolean) {
if (!(color instanceof Color)) {
throw new TypeError('color should be instance of _color Class')
}
Expand All @@ -274,7 +275,7 @@ export default defineComponent({
: `rgb(${r}, ${g}, ${b})`
}

function setShowPicker(value) {
function setShowPicker(value: boolean) {
showPicker.value = value
}

Expand All @@ -290,7 +291,10 @@ export default defineComponent({
if (props.modelValue) {
color.fromString(props.modelValue)
} else {
showPanelColor.value = false
color.value = ''
nextTick(() => {
showPanelColor.value = false
})
}
})
}
Expand All @@ -314,7 +318,7 @@ export default defineComponent({
nextTick(() => {
const newColor = new Color({
enableAlpha: props.showAlpha,
format: props.colorFormat,
format: props.colorFormat || '',
value: props.modelValue,
})
if (!color.compare(newColor)) {
Expand Down