Feature/color picker (#885)

* feat(color-picker): 新增渐变预览, 新增最近使用颜色添加操作

* feat(color-picker): 新增渐变预览, 改进增加最近使用色交互

* style(color-picker): 抽离公共逻辑文件

* fix(color-picker): color-picker, 子目录增加style相关代码

* fix(color-picker): fix: #634

fix #634

* style(color-picker): 删除demo文件中测试demo

* test(color-picker): update test files

* feat(color-picker): 使用common中的常量, 删除无用的代码, 样式BEM

* test: update test file

closed #878

* test: update test file

closed #878

src/color-picker/color-picker.tsx

@@ -1,9 +1,8 @@
-import { ComponentPublicInstance, defineComponent, onBeforeUnmount, onMounted, ref, toRefs } from 'vue';
+import { defineComponent, ref, toRefs } from 'vue';
 import useVModel from '../hooks/useVModel';
 import { renderTNodeJSXDefault } from '../utils/render-tnode';
 import props from './props';
 import { Popup as TPopup } from '../popup';
-import { useClickOutsider } from './utils/click-outsider';
 import ColorPanel from './panel';
 import DefaultTrigger from './trigger';
 import { TdColorContext } from './interfaces';
@@ -23,13 +22,6 @@ export default defineComponent({
     const [innerValue, setInnerValue] = useVModel(inputValue, modelValue, props.defaultValue, props.onChange);
 
     const refTrigger = ref<HTMLElement>();
-    const refColorPanel = ref<ComponentPublicInstance>();
-
-    const { addClickOutsider, removeClickOutsider } = useClickOutsider();
-    onMounted(() => addClickOutsider([refTrigger.value, refColorPanel.value], () => setVisible(false)));
-    onBeforeUnmount(() => {
-      removeClickOutsider();
-    });
 
     const renderPopupContent = () => {
       if (props.disabled) {
@@ -44,7 +36,6 @@ export default defineComponent({
           value={innerValue.value}
           togglePopup={setVisible}
           onChange={(value: string, context: TdColorContext) => setInnerValue(value, context)}
-          ref="refColorPanel"
         />
       );
     };
@@ -54,7 +45,6 @@ export default defineComponent({
       innerValue,
       visible,
       refTrigger,
-      refColorPanel,
       renderPopupContent,
       setVisible,
       setInnerValue,
@@ -72,6 +62,16 @@ export default defineComponent({
       overlayStyle: {
         padding: 0,
       },
+      onVisibleChange: (
+        visible: boolean,
+        context: {
+          trigger: string;
+        },
+      ) => {
+        if (context.trigger === 'document') {
+          this.setVisible(false);
+        }
+      },
     };
     return (
       <TPopup {...popProps} content={this.renderPopupContent}>