feat(components): [color-picker] add custom trigger

[tyj-321]

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow contributing guide English | (中文 | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer to relative issues for your PR.

[pull-request-triage]

👋 @tyj-321, seems like this is your first time contribution to element-plus.

• Please make sure that you have read our guidelines and code of conduct before making a contribution.
• You can comment with /label Components:[component_name] to add a label for which component you are working on.
• You may join our for staying tuned.

[github-actions]

[github-actions]

Hello @tyj-321, thank you for contributing to element-plus, please see our guideline to see how to make contribution

[github-actions]

🧪 Playground Preview: https://element-plus.run/?pr=16684
Please comment the example via this playground if needed.

[tyj-321]

color-picker can be used like this

<template>
  <el-color-picker v-model="color">
    <el-button :color="color">trigger</el-button>
  </el-color-picker>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const color = ref('rgba(19, 206, 102, 0.8)')
</script>

[btea]

LGTM. However, you may need to be compatible with other states of colorPicker.
example

[tyj-321]

LGTM. However, you may need to be compatible with other states of colorPicker. example

Sorry, I didn't think it through carefully.

But I'm a little confused, why only color-picker uses mask to control the diabled state? example

If all use the is-disabled class style, wouldn't the code style be more unified?

So I think colorPicker should also use the is-disabled class style, so that there won't be the problem you mentioned above

At the same time, using a custom trigger, I think this disabled capability can be given to the custom trigger itself

demo

@btea

[btea]

If all use the is-disabled class style, wouldn't the code style be more unified?

So I think colorPicker should also use the is-disabled class style, so that there won't be the problem you mentioned above

The is-disabled class has been logically added, but there seems to be no corresponding style.

At the same time, using a custom trigger, I think this disabled capability can be given to the custom trigger itself

If color-picker is set to disabled, it may be better to inherit and use the mask to uniformly cover it directly. After all, we not sure what the user-defined content is.

[tyj-321]

The is-disabled class has been logically added, but there seems to be no corresponding style.

You are right, so you also think should use the is-disabled class style to delete the mask element, right? I am willing to modify and contribute the code (I should open a new PR)

If color-picker is set to disabled, it may be better to inherit and use the mask to uniformly cover it directly. After all, we not sure what the user-defined content is.

I need to think of a good way to do this

I noticed that when the popover uses the disabled prop, it does not modify the style of the slot content, but only disables the original click event, so is this okay? demo

@btea

[btea]

Thank you for raising this question. I think this may be a problem related to popover style. Maybe we can set a mask layer like color-picker to represent the disabled state.
I think more people's opinions could be sought. @element-plus/backers

[kooriookami]

Do we need a reference slot like Popconfirm?

  <el-popconfirm title="Are you sure to delete this?">
    <template #reference>
      <el-button>Delete</el-button>
    </template>
  </el-popconfirm>

[tyj-321]

The bad news is that Popconfirm also only disables click events and does not inherit the disablde status style.
example

At the same time, Tooltip is the same
example