diff --git a/src/_common b/src/_common index 9f8cf06b2..8e95615c1 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 9f8cf06b2b8f3da2872dcc6d29ab0e3ddbdeea91 +Subproject commit 8e95615c102dc951cf75c5aae857dfd7df8ee418 diff --git a/src/color-picker/_usage/props.json b/src/color-picker/_usage/props.json index c8b5c031e..67168d52f 100644 --- a/src/color-picker/_usage/props.json +++ b/src/color-picker/_usage/props.json @@ -1,10 +1,4 @@ [ - { - "name": "closeBtn", - "type": "Boolean", - "defaultValue": true, - "options": [] - }, { "name": "disabled", "type": "Boolean", diff --git a/src/color-picker/color-picker.en-US.md b/src/color-picker/color-picker.en-US.md index 52da099e1..2bcb229c8 100644 --- a/src/color-picker/color-picker.en-US.md +++ b/src/color-picker/color-picker.en-US.md @@ -8,24 +8,23 @@ name | type | default | description | required -- | -- | -- | -- | -- borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -closeBtn | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N colorModes | Array | ["monochrome", "linear-gradient"] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N disabled | Boolean | undefined | \- | N enableAlpha | Boolean | false | \- | N enableMultipleGradient | Boolean | true | \- | N -format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N +format | String | RGB | When `enableAlpha` is true, `HEX8/RGBA/HSLA/HSVA` are valid。options: HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N -multiple | Boolean | false | \- | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N -recentColors | Array | [] | used color recently。`.sync` is supported。Typescript：`boolean \| Array \| null` | N -defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`boolean \| Array \| null` | N +recentColors | Array | [] | used color recently。`.sync` is supported。Typescript：`Array \| boolean \| null` | N +defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`Array \| boolean \| null` | N selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N showPrimaryColorPreview | Boolean | true | \- | N size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -swatchColors | Array | - | swatch colors。Typescript：`Array \| null` | N +swatchColors | Array | undefined | swatch colors。Typescript：`Array \| null \| undefined` | N value | String | - | color value。`v-model` is supported | N defaultValue | String | - | color value。uncontrolled property | N onChange | Function | | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `
| N +onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onPaletteBarChange | Function | | Typescript：`(context: { color: ColorObject }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`
| N onRecentColorsChange | Function | | Typescript：`(value: Array) => void`
| N @@ -34,5 +33,6 @@ onRecentColorsChange | Function | | Typescript：`(value: Array) => voi name | params | description -- | -- | -- change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `
+clear | `(context: { e: MouseEvent })` | \- palette-bar-change | `(context: { color: ColorObject })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`
recent-colors-change | `(value: Array)` | \- diff --git a/src/color-picker/color-picker.md b/src/color-picker/color-picker.md index ceead6bc4..2c8b920b1 100644 --- a/src/color-picker/color-picker.md +++ b/src/color-picker/color-picker.md @@ -8,24 +8,23 @@ -- | -- | -- | -- | -- borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N -closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N colorModes | Array | ["monochrome", "linear-gradient"] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N disabled | Boolean | undefined | 是否禁用组件 | N enableAlpha | Boolean | false | 是否开启透明通道 | N enableMultipleGradient | Boolean | true | 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色 | N -format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N +format | String | RGB | 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效。可选项：HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N -multiple | Boolean | false | 【开发中】是否允许选中多个颜色 | N popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N -recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。支持语法糖 `.sync`。TS 类型：`boolean \| Array \| null` | N -defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean \| Array \| null` | N +recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”。支持语法糖 `.sync`。TS 类型：`Array \| boolean \| null` | N +defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`Array \| boolean \| null` | N selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N showPrimaryColorPreview | Boolean | true | 是否展示颜色选择条右侧的颜色预览区域 | N size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array \| null` | N +swatchColors | Array | undefined | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array \| null \| undefined` | N value | String | - | 色值。支持语法糖 `v-model` | N defaultValue | String | - | 色值。非受控属性 | N onChange | Function | | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `
| N +onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
清空按钮点击时触发 | N onPaletteBarChange | Function | | TS 类型：`(context: { color: ColorObject }) => void`
调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`
| N onRecentColorsChange | Function | | TS 类型：`(value: Array) => void`
最近使用颜色发生变化时触发 | N @@ -34,5 +33,6 @@ onRecentColorsChange | Function | | TS 类型：`(value: Array) => void 名称 | 参数 | 描述 -- | -- | -- change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `
+clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发 palette-bar-change | `(context: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`
recent-colors-change | `(value: Array)` | 最近使用颜色发生变化时触发 diff --git a/src/color-picker/panel/format/index.tsx b/src/color-picker/panel/format/index.tsx index f3a4b6fb0..8bd53ea06 100644 --- a/src/color-picker/panel/format/index.tsx +++ b/src/color-picker/panel/format/index.tsx @@ -1,12 +1,10 @@ import { defineComponent, PropType, ref, watch, } from '@vue/composition-api'; -import { upperCase } from 'lodash-es'; import { TdColorHandler } from '../../../color-picker/interfaces'; import { TdColorPickerProps } from '../../type'; import props from '../../props'; -import { FORMATS } from '../../../_common/js/color-picker/constants'; -import { Color } from '../../utils'; +import { Color, type ColorFormat, getColorFormatOptions } from '../../utils'; import { Select as TSelect, Option as TOption } from '../../../select'; import { Input as TInput } from '../../../input'; import FormatInputs from './inputs'; @@ -27,10 +25,6 @@ export default defineComponent({ color: { type: Object as PropType, }, - handleFormatModeChange: { - type: Function as PropType, - default: () => () => {}, - }, handleFormatInputChange: { type: Function as PropType, default: () => () => {}, @@ -48,9 +42,8 @@ export default defineComponent({ * 格式化类型改变触发 * @param v */ - const handleModeChange = (v: TdColorPickerProps['format']) => { + const handleModeChange = (v: ColorFormat) => { formatModel.value = v; - props.handleFormatModeChange(v); }; return { @@ -83,8 +76,8 @@ export default defineComponent({ onChange={handleModeChange} disabled={this.disabled} > - {FORMATS.map((item) => ( - + {getColorFormatOptions(this.enableAlpha).map((item) => ( + ))} diff --git a/src/color-picker/panel/format/inputs.tsx b/src/color-picker/panel/format/inputs.tsx index 3fce5558e..ad30e77a3 100644 --- a/src/color-picker/panel/format/inputs.tsx +++ b/src/color-picker/panel/format/inputs.tsx @@ -1,14 +1,13 @@ import { - computed, defineComponent, PropType, reactive, watch, + defineComponent, PropType, reactive, watch, } from '@vue/composition-api'; import { throttle } from 'lodash-es'; import { TdColorHandler } from '../../interfaces'; import props from '../../props'; -import { Color } from '../../utils'; +import { Color, getColorFormatInputs, getColorFormatMap } from '../../utils'; import { Select as TSelect, Option as TOption } from '../../../select'; import TInput from '../../../input'; import TInputNumber from '../../../input-number'; -import { FORMAT_INPUT_CONFIG } from './config'; export default defineComponent({ name: 'FormatInputs', @@ -30,21 +29,6 @@ export default defineComponent({ }, }, setup(props) { - const inputConfigs = computed(() => { - const configs = [...FORMAT_INPUT_CONFIG[props.format]]; - if (props.enableAlpha) { - configs.push({ - type: 'inputNumber', - key: 'a', - min: 0, - max: 100, - format: (value: number) => `${value}%`, - flex: 1.15, - }); - } - return configs; - }); - // 这些值需要初始化一下 const modelValues = reactive({ r: 0, @@ -64,51 +48,20 @@ export default defineComponent({ }); const lastModelValue = reactive({}); - /** - * 获取不同格式的输入输出值 - * @param type 'encode' | 'decode' - * @returns - */ - const getFormatColorMap = (type: 'encode' | 'decode') => { - const { color } = props; - if (type === 'encode') { - return { - HSV: color.getHsva(), - HSL: color.getHsla(), - RGB: color.getRgba(), - CMYK: color.getCmyk(), - CSS: { - css: color.css, - }, - HEX: { - hex: color.hex, - }, - }; - } - // decode - return { - HSV: Color.object2color(modelValues, 'HSV'), - HSL: Color.object2color(modelValues, 'HSL'), - RGB: Color.object2color(modelValues, 'RGB'), - CMYK: Color.object2color(modelValues, 'CMYK'), - CSS: modelValues.css, - HEX: modelValues.hex, - }; - }; - - // 更新modelValues const updateModelValue = () => { const { format, color } = props; - const values: any = getFormatColorMap('encode')[format]; + const values = getColorFormatMap(color, 'encode')[format]; + // @ts-ignore values.a = Math.round(color.alpha * 100); Object.keys(values).forEach((key) => { + // @ts-ignore modelValues[key] = values[key]; + // @ts-ignore lastModelValue[key] = values[key]; }); }; updateModelValue(); - const throttleUpdate = throttle(updateModelValue, 100); watch(() => { @@ -119,16 +72,26 @@ export default defineComponent({ }, throttleUpdate); const handleChange = (key: string, v: number | string) => { - if (v === lastModelValue[key]) { - return; + if (v === lastModelValue[key]) return; + + if (key === 'a') { + // 透明通道 + // eslint-disable-next-line vue/no-mutating-props, no-param-reassign + props.color.alpha = (v as number) / 100; + } else if (key === 'hex' || key === 'css') { + // 纯字符串类型的格式 + props.color.update(v as string); + } else { + // 需要进一步转换的格式 + props.color.update(Color.object2color(modelValues, props.format)); } - const value = getFormatColorMap('decode')[props.format]; - props.handleFormatInputChange(value, modelValues.a / 100, key, v); + + const value = getColorFormatMap(props.color, 'decode')[props.format]; + props.handleFormatInputChange(value, props.color.alpha, key, v); }; return { modelValues, - inputConfigs, handleChange, }; }, @@ -138,7 +101,7 @@ export default defineComponent({ }; return (
- {this.inputConfigs.map((config) => ( + {getColorFormatInputs(this.format, this.enableAlpha).map((config) => (
(isGradient.value ? DEFAULT_LINEAR_GRADIENT : DEFAULT_COLOR)); - const mode = ref(props.colorModes?.length === 1 ? props.colorModes[0] : 'monochrome'); + const getModeByColor = (input: string) => { + if (props.colorModes.length === 1) return props.colorModes[0]; + return props.colorModes.includes('linear-gradient') && Color.isGradientColor(input) + ? 'linear-gradient' + : 'monochrome'; + }; + const mode = ref(getModeByColor(innerValue.value)); + const isGradient = computed(() => mode.value === 'linear-gradient'); + const defaultEmptyColor = computed(() => (isGradient.value ? DEFAULT_LINEAR_GRADIENT : DEFAULT_COLOR)); const color = ref(new Color(innerValue.value || defaultEmptyColor.value)); - const updateColor = () => color.value.update(innerValue.value || defaultEmptyColor.value); - const formatModel = ref(color.value.isGradient ? 'CSS' : 'RGB'); + const formatModel = ref(initColorFormat(props.format, props.enableAlpha)); + const [recentlyUsedColors, setRecentlyUsedColors] = useDefaultValue( recentColors, props.defaultRecentColors, @@ -64,14 +75,6 @@ export default defineComponent({ 'recentColorsChange', ); - const formatValue = () => { - // 渐变模式下直接输出css样式 - if (mode.value === 'linear-gradient') { - return color.value.linearGradient; - } - return color.value.getFormatsColorMap()[props.format] || color.value.css; - }; - /** * 添加最近使用颜色 * @returns void @@ -107,32 +110,35 @@ export default defineComponent({ * @param trigger */ const emitColorChange = (trigger?: ColorPickerChangeTrigger) => { - setInnerValue(formatValue(), { + const value = color.value.getFormattedColor(props.format, props.enableAlpha); + setInnerValue(value, { color: getColorObject(color.value), trigger: trigger || 'palette-saturation-brightness', }); }; - watch(() => [props.defaultValue, props.enableAlpha], updateColor); - watch( () => innerValue.value, (newColor: string) => { - if (newColor !== formatValue()) { - updateColor(); - mode.value = color.value.isGradient ? 'linear-gradient' : 'monochrome'; - } + const newMode = getModeByColor(newColor); + mode.value = newMode; + color.value.isGradient = newMode === 'linear-gradient'; + color.value.update(newColor); }, ); /** * mode change - * @param value + * @param newMode * @returns */ - const handleModeChange = (value: TdColorModes) => { - mode.value = value; - if (value === 'linear-gradient') { + const handleModeChange = (newMode: TdColorModes) => { + mode.value = newMode; + + const isGradientMode = newMode === 'linear-gradient'; + color.value.isGradient = isGradientMode; + + if (isGradientMode) { color.value.update( color.value.gradientColors.length > 0 ? color.value.linearGradient : DEFAULT_LINEAR_GRADIENT, ); @@ -142,16 +148,8 @@ export default defineComponent({ emitColorChange(); }; - /** - * 格式变化 - * @param format - * @returns - */ - const handleFormatModeChange = (format: TdColorPickerProps['format']) => (formatModel.value = format); - /** * 饱和度亮度变化 - * @param param0 */ const handleSatAndValueChange = ({ saturation, value }: { saturation: number; value: number }) => { const { saturation: sat, value: val } = color.value; @@ -198,9 +196,8 @@ export default defineComponent({ * @param input * @param alpha */ - const handleInputChange = (input: string, alpha?: number) => { + const handleInputChange = (input: string) => { color.value.update(input); - color.value.alpha = alpha; emitColorChange('input'); }; @@ -236,23 +233,12 @@ export default defineComponent({ * @param type * @param value */ - const handleSetColor = (type: 'system' | 'used', value: string) => { - const isGradientValue = Color.isGradientColor(value); - if (isGradientValue) { - if (props.colorModes.includes('linear-gradient')) { - mode.value = 'linear-gradient'; - color.value.update(value); - color.value.updateCurrentGradientColor(); - } else { - console.warn('该模式不支持渐变色'); - } - } else if (mode.value === 'linear-gradient') { - color.value.updateStates(value); - color.value.updateCurrentGradientColor(); - } else { - color.value.update(value); - } - emitColorChange(); + const handleSetColor = (value: string, trigger: ColorPickerChangeTrigger) => { + const newMode = getModeByColor(value); + mode.value = newMode; + color.value.isGradient = newMode === 'linear-gradient'; + color.value.update(value); + emitColorChange(trigger); }; // 预览颜色 @@ -276,23 +262,34 @@ export default defineComponent({ handleAlphaChange, handleGradientChange, handleSetColor, - handleFormatModeChange, handleInputChange, handleRecentlyUsedColorsChange, }; }, render() { const { - baseClassName, statusClassNames, t, global, swatchColors, previewColorStyle, isGradient, + baseClassName, statusClassNames, t, global, swatchColors, previewColorStyle, isGradient, colorModes, } = this; - const showUsedColors = this.recentlyUsedColors !== null && this.recentlyUsedColors !== false; + // 只支持渐变模式 + const onlySupportGradient = colorModes.length === 1 && colorModes.includes('linear-gradient'); + + // 最近使用颜色 + let recentColors = this.recentlyUsedColors; + if (onlySupportGradient && Array.isArray(recentColors)) { + recentColors = recentColors.filter((color) => Color.isGradientColor(color)); + } + const showUsedColors = Array.isArray(this.recentlyUsedColors) || this.recentlyUsedColors === true; + // 系统预设颜色 let systemColors = swatchColors; if (systemColors === undefined) { systemColors = [...DEFAULT_SYSTEM_SWATCH_COLORS]; } - const showSystemColors = systemColors?.length > 0; + if (onlySupportGradient) { + systemColors = systemColors.filter((color) => Color.isGradientColor(color)); + } + const showSystemColors = Array.isArray(systemColors) && systemColors.length > 0; const renderSwatches = () => { if (!showSystemColors && !showUsedColors) { @@ -308,9 +305,7 @@ export default defineComponent({ editable colors={this.recentlyUsedColors} handleAddColor={this.addRecentlyUsedColor} - handleSetColor={(color: string) => { - this.handleSetColor('used', color); - }} + handleSetColor={(color: string) => this.handleSetColor(color, 'recent')} handleChange={this.handleRecentlyUsedColorsChange} /> ) : null} @@ -320,7 +315,7 @@ export default defineComponent({ disabled={this.disabled} title={t(global.swatchColorTitle)} colors={systemColors} - handleSetColor={(color: string) => this.handleSetColor('system', color)} + handleSetColor={(color: string) => this.handleSetColor(color, 'preset')} /> ) : null}
@@ -375,7 +370,6 @@ export default defineComponent({ }, }} color={this.color} - handleFormatModeChange={this.handleFormatModeChange} handleFormatInputChange={this.handleInputChange} /> {renderSwatches()} diff --git a/src/color-picker/props.ts b/src/color-picker/props.ts index 9727035a2..d0f26afff 100644 --- a/src/color-picker/props.ts +++ b/src/color-picker/props.ts @@ -12,11 +12,6 @@ export default { borderless: Boolean, /** 是否可清空 */ clearable: Boolean, - /** 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮 */ - closeBtn: { - type: [String, Boolean, Function] as PropType, - default: true, - }, /** 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 */ colorModes: { type: Array as PropType, @@ -34,31 +29,29 @@ export default { type: Boolean, default: true, }, - /** 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 */ + /** 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效 */ format: { type: String as PropType, default: 'RGB' as TdColorPickerProps['format'], validator(val: TdColorPickerProps['format']): boolean { if (!val) return true; - return ['RGB', 'RGBA', 'HSL', 'HSLA', 'HSB', 'HSV', 'HSVA', 'HEX', 'CMYK', 'CSS'].includes(val); + return ['HEX', 'HEX8', 'RGB', 'RGBA', 'HSL', 'HSLA', 'HSV', 'HSVA', 'CMYK', 'CSS'].includes(val); }, }, /** 透传 Input 输入框组件全部属性 */ inputProps: { type: Object as PropType, }, - /** 【开发中】是否允许选中多个颜色 */ - multiple: Boolean, /** 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等 */ popupProps: { type: Object as PropType, }, - /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” */ + /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色” */ recentColors: { type: Array as PropType, default: (): TdColorPickerProps['recentColors'] => [], }, - /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”，非受控属性 */ + /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”，非受控属性 */ defaultRecentColors: { type: Array as PropType, default: (): TdColorPickerProps['defaultRecentColors'] => [], @@ -84,6 +77,7 @@ export default { /** 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */ swatchColors: { type: Array as PropType, + default: undefined, }, /** 色值 */ value: { @@ -97,6 +91,8 @@ export default { }, /** 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 */ onChange: Function as PropType, + /** 清空按钮点击时触发 */ + onClear: Function as PropType, /** 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 */ onPaletteBarChange: Function as PropType, /** 最近使用颜色发生变化时触发 */ diff --git a/src/color-picker/trigger.tsx b/src/color-picker/trigger.tsx index cb9580453..445b5fb8f 100644 --- a/src/color-picker/trigger.tsx +++ b/src/color-picker/trigger.tsx @@ -3,10 +3,10 @@ import { } from '@vue/composition-api'; import { Input as TInput } from '../input'; import { InputNumber as TInputNumber } from '../input-number'; -import { Color } from './utils'; import { TdColorPickerProps } from './type'; import { useBaseClassName } from './hooks'; import { TdColorHandler } from './interfaces'; +import { Color, getColorObject } from './utils'; import useCommonClassName from '../hooks/useCommonClassName'; export default defineComponent({ @@ -52,21 +52,19 @@ export default defineComponent({ const baseClassName = useBaseClassName(); const value = ref(props.color); const { sizeClassNames } = useCommonClassName(); + watch( () => [props.color], () => (value.value = props.color), ); const handleChange = (input: string) => { - if (input === props.color) { - return; - } - if (!Color.isValid(input) && input) { - value.value = props.color; - } else { - value.value = input; + if (input !== props.color) { + props.handleTriggerChange(value.value, { + color: getColorObject(new Color(input)), + trigger: 'input', + }); } - props.handleTriggerChange(value.value); }; return { @@ -104,7 +102,7 @@ export default defineComponent({ borderless={this.borderless} clearable={this.clearable} disabled={this.disabled} - onBlur={this.handleChange} + onChange={this.handleChange} {...{ props: { ...this.inputProps, diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts index e7fb238d6..f3b2a352c 100644 --- a/src/color-picker/type.ts +++ b/src/color-picker/type.ts @@ -7,7 +7,7 @@ import { InputProps } from '../input'; import { PopupProps } from '../popup'; import { SelectInputProps } from '../select-input'; -import { TNode, SizeEnum } from '../common'; +import { SizeEnum } from '../common'; export interface TdColorPickerProps { /** @@ -20,11 +20,6 @@ export interface TdColorPickerProps { * @default false */ clearable?: boolean; - /** - * 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮 - * @default true - */ - closeBtn?: string | boolean | TNode; /** * 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 * @default ["monochrome", "linear-gradient"] @@ -45,33 +40,28 @@ export interface TdColorPickerProps { */ enableMultipleGradient?: boolean; /** - * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 + * 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效 * @default RGB */ - format?: 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSB' | 'HSV' | 'HSVA' | 'HEX' | 'CMYK' | 'CSS'; + format?: 'HEX' | 'HEX8' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSV' | 'HSVA' | 'CMYK' | 'CSS'; /** * 透传 Input 输入框组件全部属性 */ inputProps?: InputProps; - /** - * 【开发中】是否允许选中多个颜色 - * @default false - */ - multiple?: boolean; /** * 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等 */ popupProps?: PopupProps; /** - * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” + * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色” * @default [] */ - recentColors?: boolean | Array | null; + recentColors?: Array | boolean | null; /** - * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”，非受控属性 + * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”，非受控属性 * @default [] */ - defaultRecentColors?: boolean | Array | null; + defaultRecentColors?: Array | boolean | null; /** * 透传 SelectInputProps 筛选器输入框组件全部属性 */ @@ -89,7 +79,7 @@ export interface TdColorPickerProps { /** * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */ - swatchColors?: Array | null; + swatchColors?: Array | null | undefined; /** * 色值 * @default '' @@ -104,6 +94,10 @@ export interface TdColorPickerProps { * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 */ onChange?: (value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void; + /** + * 清空按钮点击时触发 + */ + onClear?: (context: { e: MouseEvent }) => void; /** * 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 */ diff --git a/src/radio/group.tsx b/src/radio/group.tsx index 315d79ebf..c23f13705 100644 --- a/src/radio/group.tsx +++ b/src/radio/group.tsx @@ -1,5 +1,7 @@ import { VNode, CreateElement } from 'vue'; -import { isNumber, isString } from 'lodash-es'; +import { isNumber, isString, throttle } from 'lodash-es'; +import { ref } from '@vue/composition-api'; +import useResizeObserver from '../hooks/useResizeObserver'; import props from './radio-group-props'; import { TdRadioGroupProps, RadioOptionObj, RadioOption, RadioValue, @@ -33,8 +35,8 @@ export default mixins(classPrefixMixins).extend({ data() { return { + radioGroupEl: ref(null), barStyle: { width: '0px', left: '0px' }, - observer: null, }; }, @@ -96,19 +98,18 @@ export default mixins(classPrefixMixins).extend({ mounted() { this.calcBarStyle(); - const observer = new MutationObserver(this.calcBarStyle); - observer.observe(this.$el, { - childList: true, - attributes: true, - subtree: true, - characterData: true, - }); - this.observer = observer; + this.radioGroupEl.value = this.$el; + useResizeObserver( + this.radioGroupEl, + throttle(async () => { + this.$nextTick(() => this.calcBarStyle()); + }, 300), + ); + this.addKeyboardListeners(); }, beforeDestroy() { - this.observer.disconnect(); this.removeKeyboardListeners(); }, diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 5e515d3d2..279489c2e 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -29914,22 +29914,76 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/panel.vue 1`] >
- +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
@@ -29999,501 +30053,6 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/panel.vue 1`] class="t-color-picker__swatches--items narrow-scrollbar" />
-
-

- - 系统预设颜色 - -

-
    -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
  • -
    - -
    -
    • -
-
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap index f0714bcc8..e864effa6 100644 --- a/test/snap/__snapshots__/ssr.test.js.snap +++ b/test/snap/__snapshots__/ssr.test.js.snap @@ -262,9 +262,9 @@ exports[`ssr snapshot test > renders ./src/collapse/_example/rightSlot.vue corre exports[`ssr snapshot test > renders ./src/color-picker/_example/color-mode.vue correctly 1`] = `"
默认（单色 + 线性渐变）
red
仅单色模式
#0052d9
仅线性渐变模式
linear-gradient(45deg, #4facfe 0%, #00f2fe 100%)
"`; -exports[`ssr snapshot test > renders ./src/color-picker/_example/enable-alpha.vue correctly 1`] = `"

最近使用颜色

    系统预设颜色

    "`; +exports[`ssr snapshot test > renders ./src/color-picker/_example/enable-alpha.vue correctly 1`] = `"

    最近使用颜色

      系统预设颜色

      "`; -exports[`ssr snapshot test > renders ./src/color-picker/_example/panel.vue correctly 1`] = `"

      最近使用颜色

        系统预设颜色

        最近使用颜色

          系统预设颜色

          "`; +exports[`ssr snapshot test > renders ./src/color-picker/_example/panel.vue correctly 1`] = `"

          最近使用颜色

            系统预设颜色

            最近使用颜色

              "`; exports[`ssr snapshot test > renders ./src/color-picker/_example/recent-color.vue correctly 1`] = `"
              预设最近使用色

              最近使用颜色

              系统预设颜色

              完全不显示最近使用色

              系统预设颜色

              "`;