diff --git a/packages/common b/packages/common index 5aedfdf7ab..4f8e9bfadf 160000 --- a/packages/common +++ b/packages/common @@ -1 +1 @@ -Subproject commit 5aedfdf7ab0457141b0a886d2126e22bbdb42cae +Subproject commit 4f8e9bfadf5aec9c6bd48fde0ee046156d6baac6 diff --git a/packages/components/color-picker/__tests__/__snapshots__/color-picker-panel.test.tsx.snap b/packages/components/color-picker/__tests__/__snapshots__/color-picker-panel.test.tsx.snap index 5150da8729..ec4d41c0ae 100644 --- a/packages/components/color-picker/__tests__/__snapshots__/color-picker-panel.test.tsx.snap +++ b/packages/components/color-picker/__tests__/__snapshots__/color-picker-panel.test.tsx.snap @@ -123,6 +123,40 @@ exports[`ColorPickerPanel > :props > :colorModes[monochrome,linear-gradient] 1`] style="background: rgb(0, 31, 151);" /> +
+ + + + + + + +
:props > :colorModes[monochrome,linear-gradient] 2`] class="t-color-picker__sliders-preview-inner" />
+
+ + + + + + + +
:props > :colorModes[monochrome,linear-gradient] 3`] class="t-color-picker__sliders-preview-inner" />
+
+ + + + + + + +
:ui > :mount 1`] = ` style="background: rgb(0, 31, 151);" />
+
+ + + + + + + +
, /** 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 */ diff --git a/packages/components/color-picker/components/panel/index.tsx b/packages/components/color-picker/components/panel/index.tsx index 9688bab301..30cd40230f 100644 --- a/packages/components/color-picker/components/panel/index.tsx +++ b/packages/components/color-picker/components/panel/index.tsx @@ -9,6 +9,8 @@ import { GradientColorPoint, initColorFormat, TD_COLOR_USED_COLORS_MAX_SIZE, + // PR合并后需要从子包导入 + // getEyeDropper, } from '@tdesign/common-js/color-picker/index'; import { useCommonClassName, useConfig, useDefaultValue, useVModel } from '@tdesign/shared-hooks'; import props from '../../color-picker-panel-props'; @@ -22,6 +24,9 @@ import HueSlider from './hue'; import LinearGradient from './linear-gradient'; import SaturationPanel from './saturation'; import SwatchesPanel from './swatches'; +// PR合并后需要删除这个导入语句 +import { getEyeDropper } from '../../utils/eyedropper'; +import { SipIcon } from 'tdesign-icons-vue-next'; export default defineComponent({ name: 'ColorPanel', @@ -229,6 +234,17 @@ export default defineComponent({ emitColorChange(trigger); }; + const openEyeDropper = async (trigger?: ColorPickerChangeTrigger): Promise => { + const eyeDropper = getEyeDropper(); + + const result = await eyeDropper.open(); + if (!result) { + return; + } + color.value.update(result.sRGBHex); + emitColorChange(trigger); + }; + return () => { const baseProps = { color: color.value, @@ -317,6 +333,11 @@ export default defineComponent({ />
) : null} + {props.showEyeDropper ? ( +
openEyeDropper('eyedropper')}> + +
+ ) : null} diff --git a/packages/components/color-picker/props.ts b/packages/components/color-picker/props.ts index f0757763bc..aa69d411ca 100644 --- a/packages/components/color-picker/props.ts +++ b/packages/components/color-picker/props.ts @@ -93,6 +93,11 @@ export default { type: String, default: '', }, + /** 是否显示拾色器功能 */ + showEyeDropper: { + type: Boolean, + default: true, + }, /** 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 */ onChange: Function as PropType, /** 清空按钮点击时触发 */ diff --git a/packages/components/color-picker/type.ts b/packages/components/color-picker/type.ts index dae9992b4b..986150523d 100644 --- a/packages/components/color-picker/type.ts +++ b/packages/components/color-picker/type.ts @@ -198,7 +198,8 @@ export type ColorPickerChangeTrigger = | 'palette-alpha-bar' | 'input' | 'preset' - | 'recent'; + | 'recent' + | 'eyedropper'; export interface ColorObject { alpha: number; diff --git a/packages/components/color-picker/utils/eyedropper.ts b/packages/components/color-picker/utils/eyedropper.ts new file mode 100644 index 0000000000..8b49b21ffb --- /dev/null +++ b/packages/components/color-picker/utils/eyedropper.ts @@ -0,0 +1,45 @@ +/** + * @see https://developer.mozilla.org/zh-CN/docs/Web/API/EyeDropper + * PR合并后 该文件可以删除 + * */ + +declare global { + interface Window { + EyeDropper?: new () => { + open(options?: EyeDropperOpenOptions): Promise; + }; + } +} + +export interface EyeDropperOpenResult { + sRGBHex: string; +} + +export interface EyeDropperOpenOptions { + signal?: AbortSignal; +} + +export const getEyeDropper = () => { + if (typeof window === 'undefined') return undefined; + + const EyeDropperClass = window.EyeDropper; + if (EyeDropperClass === undefined) { + // 浏览器不支持 EyeDropper 兼容性:https://developer.mozilla.org/zh-CN/docs/Web/API/EyeDropper#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7 + return undefined; + } + + const eyeDropper = new EyeDropperClass(); + const originOpen = eyeDropper.open.bind(eyeDropper); + eyeDropper.open = async (options?: EyeDropperOpenOptions) => { + try { + return await originOpen(options); + } catch (e) { + // 用户取消操作 + if (e instanceof DOMException && e.name === 'AbortError') { + return undefined; + } + throw e; + } + }; + return eyeDropper; +}; diff --git a/packages/tdesign-vue-next/.changelog/pr-6830.md b/packages/tdesign-vue-next/.changelog/pr-6830.md new file mode 100644 index 0000000000..8378c25c40 --- /dev/null +++ b/packages/tdesign-vue-next/.changelog/pr-6830.md @@ -0,0 +1,6 @@ +--- +pr_number: 6830 +contributor: yuxi-ovo +--- + +- fix(Swiper): 修复只有两个轮播图内容场景下切换逻辑错误的问题 @yuxi-ovo ([#6830](https://github.com/Tencent/tdesign-vue-next/pull/6830))