From 8dcfd410914cdab20c3cb6d4c1278d709fd48aa7 Mon Sep 17 00:00:00 2001 From: smohan Date: Tue, 28 Jun 2022 17:47:10 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(color-picker):=20fix:=20=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E9=80=89=E6=8B=A9=E5=99=A8=E6=A0=B7=E5=BC=8F=E5=BC=82?= =?UTF-8?q?=E5=B8=B8(#1044)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1044 --- src/color-picker/color-picker.tsx | 33 +++++++++++-------------------- src/color-picker/panel/index.tsx | 5 +---- 2 files changed, 13 insertions(+), 25 deletions(-) diff --git a/src/color-picker/color-picker.tsx b/src/color-picker/color-picker.tsx index 1dfc4ad03..fb328dd57 100644 --- a/src/color-picker/color-picker.tsx +++ b/src/color-picker/color-picker.tsx @@ -1,16 +1,8 @@ -import { - ComponentPublicInstance, - defineComponent, - onBeforeUnmount, - onMounted, - ref, - toRefs, -} from '@vue/composition-api'; +import { defineComponent, ref, toRefs } from '@vue/composition-api'; 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'; @@ -42,21 +34,10 @@ export default defineComponent({ props.onPaletteBarChange(context); }; - const refTrigger = ref(); - const refColorPanel = ref(); - - const { addClickOutsider, removeClickOutsider } = useClickOutsider(); - onMounted(() => addClickOutsider([refTrigger.value, refColorPanel.value], () => setVisible(false))); - onBeforeUnmount(() => { - removeClickOutsider(); - }); - return { baseClassName, innerValue, visible, - refTrigger, - refColorPanel, setVisible, setInnerValue, handleChange, @@ -97,6 +78,16 @@ export default defineComponent({ overlayStyle: { padding: 0, }, + onVisibleChange: ( + visible: boolean, + context: { + trigger: string; + }, + ) => { + if (context.trigger === 'document') { + this.setVisible(false); + } + }, }; return ( -
setVisible(!this.visible)} ref="refTrigger"> +
setVisible(!this.visible)}> {renderTNodeJSXDefault( this, 'default', diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx index bacaeccfa..7ff93c06e 100644 --- a/src/color-picker/panel/index.tsx +++ b/src/color-picker/panel/index.tsx @@ -324,10 +324,7 @@ export default defineComponent({ }; return ( -
e.stopPropagation()} - > +
Date: Thu, 4 Aug 2022 17:12:54 +0800 Subject: [PATCH 2/2] style(color-picker): update color-picker style --- src/_common | 2 +- src/color-picker/panel/alpha.tsx | 1 + src/color-picker/panel/format/index.tsx | 3 +- src/color-picker/panel/format/inputs.tsx | 2 + src/color-picker/panel/header.tsx | 16 +- src/color-picker/panel/hue.tsx | 1 + src/color-picker/panel/index.tsx | 25 +- src/color-picker/panel/linear-gradient.tsx | 1 + src/color-picker/panel/slider.tsx | 18 +- test/ssr/__snapshots__/ssr.test.js.snap | 186 +++++--- .../__snapshots__/demo.test.js.snap | 418 +++++++++++------- 11 files changed, 429 insertions(+), 244 deletions(-) diff --git a/src/_common b/src/_common index a71cdcae4..d2d878e8c 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit a71cdcae443325613834fbe9a1259c927bd14154 +Subproject commit d2d878e8cb64cb110f383a6177d3af99f372811b diff --git a/src/color-picker/panel/alpha.tsx b/src/color-picker/panel/alpha.tsx index c0048ece1..97e809037 100644 --- a/src/color-picker/panel/alpha.tsx +++ b/src/color-picker/panel/alpha.tsx @@ -48,6 +48,7 @@ export default defineComponent({ rail-style={this.railStyle} max-value={100} disabled={this.disabled} + type="alpha" /> ); }, diff --git a/src/color-picker/panel/format/index.tsx b/src/color-picker/panel/format/index.tsx index 3ff0d5f05..3b3c9e198 100644 --- a/src/color-picker/panel/format/index.tsx +++ b/src/color-picker/panel/format/index.tsx @@ -72,7 +72,8 @@ export default defineComponent({
{ - props.togglePopup?.(false); - }; watch( () => props.mode, (v) => { @@ -44,10 +41,12 @@ export default defineComponent({ return { baseClassName, modeValue, - handleClosePopup, }; }, render() { + if (this.colorModes?.length === 1) { + return null; + } const { baseClassName } = this; return (
@@ -69,15 +68,6 @@ export default defineComponent({ )}
- {this.closeBtn ? ( - - - - ) : null}
); }, diff --git a/src/color-picker/panel/hue.tsx b/src/color-picker/panel/hue.tsx index 427ba0815..e043a014b 100644 --- a/src/color-picker/panel/hue.tsx +++ b/src/color-picker/panel/hue.tsx @@ -26,6 +26,7 @@ export default defineComponent({ value={this.color.hue} handleChange={this.handleChange} disabled={this.disabled} + type="hue" /> ); }, diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx index 7ff93c06e..8d1d65847 100644 --- a/src/color-picker/panel/index.tsx +++ b/src/color-picker/panel/index.tsx @@ -323,6 +323,8 @@ export default defineComponent({ ); }; + const isGradient = this.mode === 'linear-gradient'; + return (
- {this.mode === 'linear-gradient' ? ( + {isGradient ? ( ) : null} - - {this.enableAlpha ? ( - - ) : null} +
+
+ + {this.enableAlpha ? ( + + ) : null} +
+
+ +
+
+ , }, + type: { + type: String as PropType<'hue' | 'alpha'>, + default: 'hue', + }, }, setup(props, { emit }) { const baseClassName = useBaseClassName(); @@ -96,12 +100,18 @@ export default defineComponent({ }, render() { const { - baseClassName, className, railStyle, styles, + baseClassName, className, railStyle, styles, type, color, } = this; + const paddingStyle = { + background: `linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, ${color.rgb} 93%, ${color.rgb} 100%)`, + }; return ( -
-
- +
+ {type === 'alpha' &&
} +
+
+ +
); }, diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 19066d464..6e1fe1745 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -3309,19 +3309,29 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/enable-alpha.vu
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
-
RGB +
+
@@ -3329,28 +3339,28 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/enable-alpha.vu
-
+
-
+
-
+
-
+
@@ -3508,16 +3518,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/panel.vue corre
-
-
-
+
+
+
+
+
+
+
+
+
+
-
+
-
-
RGB +
+
@@ -3525,21 +3542,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/panel.vue corre
-
+
-
+
-
+
@@ -3699,16 +3716,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vu
-
-
-
+
+
+
+
+
+
+
+
+
+
-
+
-
-
RGB +
+
@@ -3716,21 +3740,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vu
-
+
-
+
-
+
@@ -3911,16 +3935,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vu
-
-
-
+
+
+
+
+
+
+
+
+
+
-
+
-
-
RGB +
+
@@ -3928,21 +3959,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vu
-
+
-
+
-
+
@@ -4111,16 +4142,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/status-readonly
-
-
-
+
+
+
+
+
+
+
+
+
+
-
+
-
-
RGB +
+
@@ -4128,21 +4166,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/status-readonly
-
+
-
+
-
+
@@ -4302,16 +4340,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/swatch-color.vu
-
-
-
+
+
+
+
+
+
+
+
+
+
-
+
-
-
RGB +
+
@@ -4319,21 +4364,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/swatch-color.vu
-
+
-
+
-
+
@@ -4384,16 +4429,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/swatch-color.vu
-
-
-
+
+
+
+
+
+
+
+
+
+
-
+
-
-
RGB +
+
@@ -4401,21 +4453,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/swatch-color.vu
-
+
-
+
-
+
diff --git a/test/unit/color-picker/__snapshots__/demo.test.js.snap b/test/unit/color-picker/__snapshots__/demo.test.js.snap index 7804276a6..6b3861590 100644 --- a/test/unit/color-picker/__snapshots__/demo.test.js.snap +++ b/test/unit/color-picker/__snapshots__/demo.test.js.snap @@ -225,35 +225,62 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = `
- -
-
+ class="t-color-picker__sliders" + > +
+
+
+ +
+
+
+
+
+
+ +
+
+
- + class="t-color-picker__sliders-preview t-color-picker--bg-alpha" + > + +
- - RGB - @@ -320,7 +342,7 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` style="flex: 1;" >
- + class="t-color-picker__sliders" + > +
+
+
+ +
+
+
+
+ +
- - RGB - @@ -1113,7 +1150,7 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` style="flex: 1;" >
- + class="t-color-picker__sliders" + > +
+
+
+ +
+
+
+
+ +
- - RGB - @@ -1885,7 +1937,7 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` style="flex: 1;" >
- + class="t-color-picker__sliders" + > +
+
+
+ +
+
+
+
+ +
- - RGB - @@ -2769,7 +2836,7 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` style="flex: 1;" >
- + class="t-color-picker__sliders" + > +
+
+
+ +
+
+
+
+ +
- - RGB - @@ -3549,7 +3631,7 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` style="flex: 1;" >
- + class="t-color-picker__sliders" + > +
+
+
+ +
+
+
+
+ +
- - RGB - @@ -4324,7 +4421,7 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = ` style="flex: 1;" >
- + class="t-color-picker__sliders" + > +
+
+
+ +
+
+
+
+ +
- - RGB - @@ -4671,7 +4783,7 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = ` style="flex: 1;" >