From 3032a6bf339710d240e3f74c08d7d194684d2e10 Mon Sep 17 00:00:00 2001 From: smohan Date: Tue, 10 May 2022 15:57:49 +0800 Subject: [PATCH 1/6] feat(color-picker): color-picker component --- examples/color-picker/color-picker.md | 24 +- examples/color-picker/demos/color-mode.vue | 40 + examples/color-picker/demos/enable-alpha.vue | 19 + examples/color-picker/demos/panel.vue | 30 + examples/color-picker/demos/recent-color.vue | 41 + .../color-picker/demos/status-disabled.vue | 14 + .../color-picker/demos/status-readonly.vue | 14 + examples/color-picker/demos/swatch-color.vue | 31 + examples/color-picker/demos/trigger.vue | 14 + package.json | 2 + site/site.config.mjs | 6 + src/_common | 2 +- src/color-picker/color-picker-panel.tsx | 36 + src/color-picker/color-picker.tsx | 126 + src/color-picker/const.ts | 71 + src/color-picker/hooks.ts | 16 + src/color-picker/index.ts | 12 + src/color-picker/interfaces.ts | 12 + src/color-picker/panel/alpha.tsx | 54 + src/color-picker/panel/base-props.ts | 16 + src/color-picker/panel/format/config.ts | 125 + src/color-picker/panel/format/index.tsx | 95 + src/color-picker/panel/format/inputs.tsx | 181 + src/color-picker/panel/format/style/css.js | 1 + src/color-picker/panel/format/style/index.js | 1 + src/color-picker/panel/header.tsx | 84 + src/color-picker/panel/hue.tsx | 32 + src/color-picker/panel/index.tsx | 370 ++ src/color-picker/panel/linear-gradient.tsx | 296 + src/color-picker/panel/saturation.tsx | 116 + src/color-picker/panel/slider.tsx | 108 + src/color-picker/panel/style/css.js | 1 + src/color-picker/panel/style/index.js | 1 + src/color-picker/panel/swatches.tsx | 154 + src/color-picker/props.ts | 85 + src/color-picker/style/css.js | 1 + src/color-picker/style/index.js | 1 + src/color-picker/trigger.tsx | 96 + src/color-picker/type.ts | 121 + src/color-picker/utils/click-outsider.ts | 96 + src/color-picker/utils/index.ts | 1 + src/components.ts | 1 + src/index.ts | 5 +- test/e2e/color-picker/color-picker.spec.js | 0 test/ssr/__snapshots__/ssr.test.js.snap | 1190 +++++ .../__snapshots__/demo.test.js.snap | 4757 +++++++++++++++++ test/unit/color-picker/demo.test.js | 33 + test/unit/color-picker/index.test.js | 31 + 48 files changed, 8553 insertions(+), 10 deletions(-) create mode 100644 examples/color-picker/demos/color-mode.vue create mode 100644 examples/color-picker/demos/enable-alpha.vue create mode 100644 examples/color-picker/demos/panel.vue create mode 100644 examples/color-picker/demos/recent-color.vue create mode 100644 examples/color-picker/demos/status-disabled.vue create mode 100644 examples/color-picker/demos/status-readonly.vue create mode 100644 examples/color-picker/demos/swatch-color.vue create mode 100644 examples/color-picker/demos/trigger.vue create mode 100644 src/color-picker/color-picker-panel.tsx create mode 100644 src/color-picker/color-picker.tsx create mode 100644 src/color-picker/const.ts create mode 100644 src/color-picker/hooks.ts create mode 100644 src/color-picker/index.ts create mode 100644 src/color-picker/interfaces.ts create mode 100644 src/color-picker/panel/alpha.tsx create mode 100644 src/color-picker/panel/base-props.ts create mode 100644 src/color-picker/panel/format/config.ts create mode 100644 src/color-picker/panel/format/index.tsx create mode 100644 src/color-picker/panel/format/inputs.tsx create mode 100644 src/color-picker/panel/format/style/css.js create mode 100644 src/color-picker/panel/format/style/index.js create mode 100644 src/color-picker/panel/header.tsx create mode 100644 src/color-picker/panel/hue.tsx create mode 100644 src/color-picker/panel/index.tsx create mode 100644 src/color-picker/panel/linear-gradient.tsx create mode 100644 src/color-picker/panel/saturation.tsx create mode 100644 src/color-picker/panel/slider.tsx create mode 100644 src/color-picker/panel/style/css.js create mode 100644 src/color-picker/panel/style/index.js create mode 100644 src/color-picker/panel/swatches.tsx create mode 100644 src/color-picker/props.ts create mode 100644 src/color-picker/style/css.js create mode 100644 src/color-picker/style/index.js create mode 100644 src/color-picker/trigger.tsx create mode 100644 src/color-picker/type.ts create mode 100644 src/color-picker/utils/click-outsider.ts create mode 100644 src/color-picker/utils/index.ts create mode 100644 test/e2e/color-picker/color-picker.spec.js create mode 100644 test/unit/color-picker/__snapshots__/demo.test.js.snap create mode 100644 test/unit/color-picker/demo.test.js create mode 100644 test/unit/color-picker/index.test.js diff --git a/examples/color-picker/color-picker.md b/examples/color-picker/color-picker.md index 946f24ad6..f891be4bf 100644 --- a/examples/color-picker/color-picker.md +++ b/examples/color-picker/color-picker.md @@ -5,20 +5,28 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- +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 | false | 是否禁用组件 | N enableAlpha | Boolean | false | 是否开启透明通道 | N -format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA/HEX8` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/HEX8/CMYK/CSS | N -multiple | Boolean | false | 是否允许选中多个颜色 | N -popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` 等。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N -swatchColors | Array | - | 颜色样例。TS 类型：`Array` | N +format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/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` | N +defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean | Array` | 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 +swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array` | N value | String | - | 色值。支持语法糖 `v-model` | N defaultValue | String | - | 色值。非受控属性 | N -onChange | Function | | TS 类型：`(value: string, context: { colors: string[]; trigger: ColorPickerChangeTrigger }) => void`
选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.colors` 表示当前调色板的所有色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette' | 'input'`
| N -onPaletteChange | Function | | TS 类型：`(context: { colors: string[] }) => void`
调色板变化时触发，当前色板的色值 | 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'`
| 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 ### ColorPicker Events 名称 | 参数 | 描述 -- | -- | -- -change | `(value: string, context: { colors: string[]; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.colors` 表示当前调色板的所有色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette' | 'input'`
-palette-change | `(context: { colors: string[] })` | 调色板变化时触发，当前色板的色值 +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'`
+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/examples/color-picker/demos/color-mode.vue b/examples/color-picker/demos/color-mode.vue new file mode 100644 index 000000000..b5d9c61ca --- /dev/null +++ b/examples/color-picker/demos/color-mode.vue @@ -0,0 +1,40 @@ + + + + diff --git a/examples/color-picker/demos/enable-alpha.vue b/examples/color-picker/demos/enable-alpha.vue new file mode 100644 index 000000000..e77be5567 --- /dev/null +++ b/examples/color-picker/demos/enable-alpha.vue @@ -0,0 +1,19 @@ + + diff --git a/examples/color-picker/demos/panel.vue b/examples/color-picker/demos/panel.vue new file mode 100644 index 000000000..17d8b1d61 --- /dev/null +++ b/examples/color-picker/demos/panel.vue @@ -0,0 +1,30 @@ + + diff --git a/examples/color-picker/demos/recent-color.vue b/examples/color-picker/demos/recent-color.vue new file mode 100644 index 000000000..7c0313ddf --- /dev/null +++ b/examples/color-picker/demos/recent-color.vue @@ -0,0 +1,41 @@ + + + diff --git a/examples/color-picker/demos/status-disabled.vue b/examples/color-picker/demos/status-disabled.vue new file mode 100644 index 000000000..9e9d92140 --- /dev/null +++ b/examples/color-picker/demos/status-disabled.vue @@ -0,0 +1,14 @@ + + diff --git a/examples/color-picker/demos/status-readonly.vue b/examples/color-picker/demos/status-readonly.vue new file mode 100644 index 000000000..d4aff3bfa --- /dev/null +++ b/examples/color-picker/demos/status-readonly.vue @@ -0,0 +1,14 @@ + + diff --git a/examples/color-picker/demos/swatch-color.vue b/examples/color-picker/demos/swatch-color.vue new file mode 100644 index 000000000..02d19ae10 --- /dev/null +++ b/examples/color-picker/demos/swatch-color.vue @@ -0,0 +1,31 @@ + + + + diff --git a/examples/color-picker/demos/trigger.vue b/examples/color-picker/demos/trigger.vue new file mode 100644 index 000000000..3840affdd --- /dev/null +++ b/examples/color-picker/demos/trigger.vue @@ -0,0 +1,14 @@ + + diff --git a/package.json b/package.json index efbca7431..0be364330 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "raf": "^3.4.1", "sortablejs": "^1.15.0", "tdesign-icons-vue": "~0.0.8", + "tinycolor2": "^1.4.2", "validator": "^13.5.1" }, "peerDependencies": { @@ -107,6 +108,7 @@ "@types/lodash": "^4.14.165", "@types/raf": "^3.4.0", "@types/sortablejs": "^1.10.7", + "@types/tinycolor2": "^1.4.3", "@types/validator": "^13.1.3", "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/experimental-utils": "^5.4.0", diff --git a/site/site.config.mjs b/site/site.config.mjs index ab8205934..d5f7b9751 100644 --- a/site/site.config.mjs +++ b/site/site.config.mjs @@ -167,6 +167,12 @@ export default { path: '/vue/components/checkbox', component: () => import('@/examples/checkbox/checkbox.md'), }, + { + title: 'ColorPicker 颜色选择器', + name: 'color-picker', + path: '/vue/components/color-picker', + component: () => import('@/examples/color-picker/color-picker.md'), + }, { title: 'DatePicker 日期选择器', name: 'date-picker', diff --git a/src/_common b/src/_common index dbfc06032..5cc38b6e0 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit dbfc060325b95301692b5da272959ebd5311dfc2 +Subproject commit 5cc38b6e0604244f7893671caff7785f9cd79707 diff --git a/src/color-picker/color-picker-panel.tsx b/src/color-picker/color-picker-panel.tsx new file mode 100644 index 000000000..98c353fe6 --- /dev/null +++ b/src/color-picker/color-picker-panel.tsx @@ -0,0 +1,36 @@ +import { defineComponent } from '@vue/composition-api'; +import props from './props'; +import ColorPanel from './panel'; +import { usePrefixClass } from '../config-provider'; + +export default defineComponent({ + name: 'TColorPickerPanel', + components: { + ColorPanel, + }, + inheritAttrs: false, + props: { + ...props, + }, + setup() { + const prefix = usePrefixClass(); + return { + prefix, + }; + }, + render() { + const { prefix } = this; + return ( + + ); + }, +}); diff --git a/src/color-picker/color-picker.tsx b/src/color-picker/color-picker.tsx new file mode 100644 index 000000000..af770fef3 --- /dev/null +++ b/src/color-picker/color-picker.tsx @@ -0,0 +1,126 @@ +import { + ComponentPublicInstance, + defineComponent, + onBeforeUnmount, + onMounted, + 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'; +import { useBaseClassName } from './hooks'; + +export default defineComponent({ + name: 'TColorPicker', + components: { + TPopup, + ColorPanel, + DefaultTrigger, + }, + inheritAttrs: false, + props: { + ...props, + }, + setup(props) { + const baseClassName = useBaseClassName(); + const visible = ref(false); + const setVisible = (value: boolean) => (visible.value = value); + + const { value, modelValue } = toRefs(props); + const [innerValue, setInnerValue] = useVModel(value || modelValue, props.defaultValue, props.onChange, 'change'); + + const handleChange = (value: string, context: TdColorContext) => { + setInnerValue(value, context); + }; + + const handlePaletteChange = (context: TdColorContext) => { + 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, + handlePaletteChange, + }; + }, + render() { + const { + popupProps, disabled, innerValue, baseClassName, setVisible, handleChange, handlePaletteChange, + } = this; + + const renderPopupContent = () => { + if (disabled) { + return null; + } + return ( + + ); + }; + + const popProps = { + placement: 'bottom-left', + ...((popupProps as any) || {}), + trigger: 'click', + attach: 'body', + overlayClassName: [baseClassName], + visible: this.visible, + overlayStyle: { + padding: 0, + }, + }; + return ( + +
setVisible(!this.visible)} ref="refTrigger"> + {renderTNodeJSXDefault( + this, + 'default', + , + )} +
+ + ); + }, +}); diff --git a/src/color-picker/const.ts b/src/color-picker/const.ts new file mode 100644 index 000000000..5b542e938 --- /dev/null +++ b/src/color-picker/const.ts @@ -0,0 +1,71 @@ +import { TdColorPickerProps } from '.'; + +/** 常量 */ + +// 最近使用颜色最大个数 +export const TD_COLOR_USED_COLORS_MAX_SIZE = 100; // 每行10个 + +// 颜色模式options配置 +export const COLOR_MODES = { + monochrome: '单色', + 'linear-gradient': '渐变', +}; + +// 非透明色格式化类型 +export const FORMATS: TdColorPickerProps['format'][] = ['HEX', 'RGB', 'HSL', 'HSV', 'CMYK', 'CSS']; + +// 默认颜色 +export const DEFAULT_COLOR = '#001F97'; + +// 默认渐变色 +export const DEFAULT_LINEAR_GRADIENT = 'linear-gradient(90deg, rgba(241,29,0,1) 0%, rgba(73,106,220,1) 100%);'; + +// 默认系统色彩 +export const DEFAULT_SYSTEM_SWATCH_COLORS = [ + '#ECF2FE', + '#D4E3FC', + '#BBD3FB', + '#96BBF8', + '#699EF5', + '#4787F0', + '#266FE8', + '#0052D9', + '#0034B5', + '#001F97', + '#FDECEE', + '#F9D7D9', + '#F8B9BE', + '#F78D94', + '#F36D78', + '#E34D59', + '#C9353F', + '#B11F26', + '#951114', + '#680506', + '#FEF3E6', + '#F9E0C7', + '#F7C797', + '#F2995F', + '#ED7B2F', + '#D35A21', + '#BA431B', + '#9E3610', + '#842B0B', + '#5A1907', + '#E8F8F2', + '#BCEBDC', + '#85DBBE', + '#48C79C', + '#00A870', + '#078D5C', + '#067945', + '#056334', + '#044F2A', + '#033017', +]; + +// saturation-panel default rect +export const SATURATION_PANEL_DEFAULT_WIDTH = 248; +export const SATURATION_PANEL_DEFAULT_HEIGHT = 140; +export const SLIDER_DEFAULT_WIDTH = 248; +export const GRADIENT_SLIDER_DEFAULT_WIDTH = 190; diff --git a/src/color-picker/hooks.ts b/src/color-picker/hooks.ts new file mode 100644 index 000000000..8de3e9627 --- /dev/null +++ b/src/color-picker/hooks.ts @@ -0,0 +1,16 @@ +import { computed } from '@vue/composition-api'; +import { usePrefixClass } from '../config-provider'; + +const BASE_COMPONENT_NAME = 'color-picker'; + +/** + * 基础样式 + * @param className + * @returns + */ +export const useBaseClassName = (className?: string) => { + const baseClassName = usePrefixClass(BASE_COMPONENT_NAME); + return computed(() => (className ? `${baseClassName.value}-${className}` : baseClassName.value)); +}; + +export default useBaseClassName; diff --git a/src/color-picker/index.ts b/src/color-picker/index.ts new file mode 100644 index 000000000..52b1d5a87 --- /dev/null +++ b/src/color-picker/index.ts @@ -0,0 +1,12 @@ +import VueCompositionAPI from '@vue/composition-api'; +import _ColorPickerPanel from './color-picker-panel'; +import _ColorPicker from './color-picker'; +import { withInstall } from '../utils/withInstall'; +import { TdColorPickerProps } from './type'; +import './style'; + +export * from './type'; +export type ColorPickerProps = TdColorPickerProps; + +export const ColorPickerPanel = withInstall(_ColorPickerPanel, VueCompositionAPI); +export const ColorPicker = withInstall(_ColorPicker, VueCompositionAPI); diff --git a/src/color-picker/interfaces.ts b/src/color-picker/interfaces.ts new file mode 100644 index 000000000..aacd0963f --- /dev/null +++ b/src/color-picker/interfaces.ts @@ -0,0 +1,12 @@ +import { ColorObject, ColorPickerChangeTrigger } from './type'; + +// color modes +export type TdColorModes = 'monochrome' | 'linear-gradient'; + +// color context +export interface TdColorContext { + color: ColorObject; + trigger: ColorPickerChangeTrigger; +} + +export type TdColorHandler = (...args: any) => void; diff --git a/src/color-picker/panel/alpha.tsx b/src/color-picker/panel/alpha.tsx new file mode 100644 index 000000000..c0048ece1 --- /dev/null +++ b/src/color-picker/panel/alpha.tsx @@ -0,0 +1,54 @@ +import { computed, defineComponent, PropType } from '@vue/composition-api'; +import ColorSlider from './slider'; +import { Color } from '../utils'; +import { useBaseClassName } from '../hooks'; +import { TdColorHandler } from '../interfaces'; + +export default defineComponent({ + name: 'AlphaSlider', + components: { + ColorSlider, + }, + inheritAttrs: false, + props: { + color: { + type: Object as PropType, + }, + disabled: { + type: Boolean, + default: false, + }, + handleChange: { + type: Function as PropType, + default: () => () => {}, + }, + }, + setup(props) { + const baseClassName = useBaseClassName(); + const handleValueChange = (v: number, isDragEnd?: boolean) => { + props.handleChange(v / 100, isDragEnd); + }; + const railStyle = computed(() => ({ + background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${props.color.rgb})`, + })); + return { + baseClassName, + railStyle, + handleValueChange, + }; + }, + render() { + const { baseClassName } = this; + return ( + + ); + }, +}); diff --git a/src/color-picker/panel/base-props.ts b/src/color-picker/panel/base-props.ts new file mode 100644 index 000000000..e235d53ef --- /dev/null +++ b/src/color-picker/panel/base-props.ts @@ -0,0 +1,16 @@ +import { PropType } from 'vue'; +import { TdColorHandler } from '../interfaces'; +import { Color } from '../utils'; + +export default { + /** 是否禁用组件 */ + disabled: Boolean, + /** Color Instance */ + color: { + type: Object as PropType, + }, + handleChange: { + type: Function as PropType, + default: () => () => {}, + }, +}; diff --git a/src/color-picker/panel/format/config.ts b/src/color-picker/panel/format/config.ts new file mode 100644 index 000000000..63c31e9cb --- /dev/null +++ b/src/color-picker/panel/format/config.ts @@ -0,0 +1,125 @@ +import { TdColorPickerProps } from '../../type'; + +export interface FormatInput { + key: string; + type: 'input'; + flex?: number; +} + +export interface FormatInputNumber { + key: string; + min: number; + max: number; + type: 'inputNumber'; + flex?: number; + format?: Function; +} + +export type FormatInputsConfig = { + [propName in TdColorPickerProps['format']]?: Array; +}; + +export const FORMAT_INPUT_CONFIG: FormatInputsConfig = { + RGB: [ + { + key: 'r', + min: 0, + max: 255, + type: 'inputNumber', + }, + { + key: 'g', + min: 0, + max: 255, + type: 'inputNumber', + }, + { + key: 'b', + min: 0, + max: 255, + type: 'inputNumber', + }, + ], + HSV: [ + { + key: 'h', + min: 0, + max: 360, + type: 'inputNumber', + }, + { + key: 's', + min: 0, + max: 100, + type: 'inputNumber', + }, + { + key: 'v', + min: 0, + max: 100, + type: 'inputNumber', + }, + ], + HSL: [ + { + key: 'h', + min: 0, + max: 360, + type: 'inputNumber', + }, + { + key: 's', + min: 0, + max: 100, + type: 'inputNumber', + }, + { + key: 'l', + min: 0, + max: 100, + type: 'inputNumber', + }, + ], + CMYK: [ + { + key: 'c', + min: 0, + max: 255, + type: 'inputNumber', + }, + { + key: 'm', + min: 0, + max: 255, + type: 'inputNumber', + }, + { + key: 'y', + min: 0, + max: 255, + type: 'inputNumber', + }, + { + key: 'k', + min: 0, + max: 255, + type: 'inputNumber', + }, + ], + CSS: [ + { + key: 'css', + type: 'input', + flex: 3, + }, + ], + HEX: [ + { + key: 'hex', + type: 'input', + flex: 3, + }, + ], +}; + +export default FORMAT_INPUT_CONFIG; diff --git a/src/color-picker/panel/format/index.tsx b/src/color-picker/panel/format/index.tsx new file mode 100644 index 000000000..2f4cc266e --- /dev/null +++ b/src/color-picker/panel/format/index.tsx @@ -0,0 +1,95 @@ +import { + defineComponent, PropType, ref, watch, +} from '@vue/composition-api'; +import upperCase from 'lodash/upperCase'; +import { TdColorHandler } from '@src/color-picker/interfaces'; +import { TdColorPickerProps } from '../../type'; +import props from '../../props'; +import { FORMATS } from '../../const'; +import { Color } from '../../utils'; +import { Select as TSelect, Option as TOption } from '../../../select'; +import { Input as TInput } from '../../../input'; +import FormatInputs from './inputs'; +import { useBaseClassName } from '../../hooks'; + +export default defineComponent({ + name: 'FormatPanel', + components: { + TSelect, + TInput, + TOption, + FormatInputs, + }, + inheritAttrs: false, + props: { + ...props, + color: { + type: Object as PropType, + }, + handleFormatModeChange: { + type: Function as PropType, + default: () => () => {}, + }, + handleFormatInputChange: { + type: Function as PropType, + default: () => () => {}, + }, + }, + setup(props) { + const baseClassName = useBaseClassName(); + const formatModel = ref(props.format); + watch( + () => [props.format], + () => (formatModel.value = props.format), + ); + + /** + * 格式化类型改变触发 + * @param v + */ + const handleModeChange = (v: TdColorPickerProps['format']) => { + formatModel.value = v; + props.handleFormatModeChange(v); + }; + + return { + formatModel, + baseClassName, + handleModeChange, + }; + }, + render(h) { + const formats: TdColorPickerProps['format'][] = [...FORMATS]; + const { baseClassName, handleModeChange } = this; + const newProps = { + ...this.$props, + format: this.formatModel, + }; + const selectInputProps = { + ...((this.selectInputProps as Object) || {}), + }; + return ( +
+
+ + {formats.map((item) => ( + + ))} + +
+
+ {h('format-inputs', { + props: newProps, + })} +
+
+ ); + }, +}); diff --git a/src/color-picker/panel/format/inputs.tsx b/src/color-picker/panel/format/inputs.tsx new file mode 100644 index 000000000..93243b84b --- /dev/null +++ b/src/color-picker/panel/format/inputs.tsx @@ -0,0 +1,181 @@ +import { + computed, defineComponent, PropType, reactive, watch, +} from '@vue/composition-api'; +import throttle from 'lodash/throttle'; +import { TdColorHandler } from '@src/color-picker/interfaces'; +import props from '../../props'; +import { Color } 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', + components: { + TSelect, + TOption, + TInput, + TInputNumber, + }, + inheritAttrs: false, + props: { + ...props, + color: { + type: Object as PropType, + }, + handleFormatInputChange: { + type: Function as PropType, + default: () => () => {}, + }, + }, + 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, + g: 0, + b: 0, + a: 0, + c: 0, + m: 0, + y: 0, + k: 0, + h: 0, + l: 0, + s: 0, + v: 0, + hex: '', + css: '', + }); + 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]; + values.a = Math.round(color.alpha * 100); + Object.keys(values).forEach((key) => { + modelValues[key] = values[key]; + lastModelValue[key] = values[key]; + }); + }; + + updateModelValue(); + + const throttleUpdate = throttle(updateModelValue, 100); + + watch(() => { + const { + saturation, hue, value, alpha, + } = props.color; + return [saturation, hue, value, alpha, props.format]; + }, throttleUpdate); + + const handleChange = (key: string, v: number | string) => { + if (v === lastModelValue[key]) { + return; + } + const value = getFormatColorMap('decode')[props.format]; + props.handleFormatInputChange(value, modelValues.a / 100, key, v); + }; + + return { + modelValues, + inputConfigs, + handleChange, + }; + }, + render() { + const inputProps = { + ...((this.inputProps as any) || {}), + }; + return ( +
+ {this.inputConfigs.map((config) => ( +
+ {config.type === 'input' ? ( + this.handleChange(config.key, v)} + onEnter={(v: string) => this.handleChange(config.key, v)} + /> + ) : ( + this.handleChange(config.key, v)} + onEnter={(v: number) => this.handleChange(config.key, v)} + /> + )} +
+ ))} +
+ ); + }, +}); diff --git a/src/color-picker/panel/format/style/css.js b/src/color-picker/panel/format/style/css.js new file mode 100644 index 000000000..57fb6cf78 --- /dev/null +++ b/src/color-picker/panel/format/style/css.js @@ -0,0 +1 @@ +import '../../../style/index.css'; diff --git a/src/color-picker/panel/format/style/index.js b/src/color-picker/panel/format/style/index.js new file mode 100644 index 000000000..3ee4d04ab --- /dev/null +++ b/src/color-picker/panel/format/style/index.js @@ -0,0 +1 @@ +import '../../../style/index.js'; diff --git a/src/color-picker/panel/header.tsx b/src/color-picker/panel/header.tsx new file mode 100644 index 000000000..46fda1812 --- /dev/null +++ b/src/color-picker/panel/header.tsx @@ -0,0 +1,84 @@ +import { + defineComponent, PropType, ref, watch, +} from '@vue/composition-api'; +import { CloseIcon } from 'tdesign-icons-vue'; +import props from '../props'; +import { COLOR_MODES } from '../const'; +import { RadioGroup as TRadioGroup, RadioButton as TRadioButton } from '../../radio'; +import { TdColorHandler, TdColorModes } from '../interfaces'; +import { useBaseClassName } from '../hooks'; + +export default defineComponent({ + name: 'PanelHeader', + components: { + CloseIcon, + TRadioGroup, + TRadioButton, + }, + props: { + ...props, + mode: { + type: String as PropType, + default: 'color', + }, + togglePopup: { + type: Function as PropType, + }, + handleModeChange: { + type: Function as PropType, + default: () => () => {}, + }, + }, + setup(props) { + const baseClassName = useBaseClassName(); + const modeValue = ref(props.mode); + const handleClosePopup = () => { + props.togglePopup?.(false); + }; + watch( + () => props.mode, + (v) => { + modeValue.value = v; + }, + ); + return { + baseClassName, + modeValue, + handleClosePopup, + }; + }, + render() { + const { baseClassName } = this; + return ( +
+
+ {this.colorModes?.length === 1 ? ( + COLOR_MODES[this.colorModes[0]] + ) : ( + + {Object.keys(COLOR_MODES).map((key) => ( + + {COLOR_MODES[key]} + + ))} + + )} +
+ {this.closeBtn ? ( + + + + ) : null} +
+ ); + }, +}); diff --git a/src/color-picker/panel/hue.tsx b/src/color-picker/panel/hue.tsx new file mode 100644 index 000000000..427ba0815 --- /dev/null +++ b/src/color-picker/panel/hue.tsx @@ -0,0 +1,32 @@ +import { defineComponent } from '@vue/composition-api'; +import ColorSlider from './slider'; +import { useBaseClassName } from '../hooks'; +import baseProps from './base-props'; + +export default defineComponent({ + name: 'HueSlider', + components: { + ColorSlider, + }, + inheritAttrs: false, + props: { + ...baseProps, + }, + setup() { + const baseClassName = useBaseClassName(); + return { + baseClassName, + }; + }, + render() { + return ( + + ); + }, +}); diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx new file mode 100644 index 000000000..ffc530251 --- /dev/null +++ b/src/color-picker/panel/index.tsx @@ -0,0 +1,370 @@ +import { + defineComponent, ref, toRefs, watch, +} from '@vue/composition-api'; +import { useConfig } from '../../config-provider'; +import useCommonClassName from '../../hooks/useCommonClassName'; +import props from '../props'; +import { + DEFAULT_COLOR, + DEFAULT_LINEAR_GRADIENT, + TD_COLOR_USED_COLORS_MAX_SIZE, + DEFAULT_SYSTEM_SWATCH_COLORS, +} from '../const'; +import PanelHeader from './header'; +import LinearGradient from './linear-gradient'; +import SaturationPanel from './saturation'; +import HueSlider from './hue'; +import AlphaSlider from './alpha'; +import FormatPanel from './format'; +import SwatchesPanel from './swatches'; +import { Color, getColorObject, GradientColorPoint } from '../utils'; +import { TdColorPickerProps, ColorPickerChangeTrigger } from '../type'; +import { TdColorModes } from '../interfaces'; +import { useBaseClassName } from '../hooks'; +import useVModel from '../../hooks/useVModel'; +import useDefaultValue from '../../hooks/useDefaultValue'; + +export default defineComponent({ + name: 'ColorPanel', + components: { + PanelHeader, + LinearGradient, + SaturationPanel, + HueSlider, + AlphaSlider, + FormatPanel, + SwatchesPanel, + }, + props: { + ...props, + togglePopup: { + type: Function, + }, + }, + setup(props) { + const baseClassName = useBaseClassName(); + const { statusClassNames } = useCommonClassName(); + const { t, global } = useConfig('colorPicker'); + const { value: inputValue, modelValue, recentColors } = toRefs(props); + const [innerValue, setInnerValue] = useVModel( + inputValue || modelValue, + props.defaultValue, + props.onChange, + 'change', + ); + const color = ref(new Color(innerValue.value || DEFAULT_COLOR)); + const updateColor = () => color.value.update(innerValue.value || DEFAULT_COLOR); + const mode = ref(color.value.isGradient ? 'linear-gradient' : 'monochrome'); + const formatModel = ref(color.value.isGradient ? 'CSS' : 'RGB'); + + const [recentlyUsedColors, setRecentlyUsedColors] = useDefaultValue( + recentColors, + props.defaultRecentColors, + props.onRecentColorsChange, + 'recentColors', + 'recentColorsChange', + ); + + if (props.colorModes.length === 1) { + // eslint-disable-next-line vue/no-setup-props-destructure + const m = props.colorModes[0]; + mode.value = m; + } + + const formatValue = () => { + // 渐变模式下直接输出css样式 + if (mode.value === 'linear-gradient') { + return color.value.linearGradient; + } + return color.value.getFormatsColorMap()[props.format] || color.value.css; + }; + + /** + * 添加最近使用颜色 + * @returns void + */ + const addRecentlyUsedColor = () => { + if (recentlyUsedColors.value === null || recentlyUsedColors.value === false) { + return; + } + const colors = (recentlyUsedColors.value as string[]) || []; + const currentColor = color.value.isGradient ? color.value.linearGradient : color.value.rgba; + const index = colors.indexOf(currentColor); + if (index > -1) { + colors.splice(index, 1); + } + colors.unshift(currentColor); + if (colors.length > TD_COLOR_USED_COLORS_MAX_SIZE) { + colors.length = TD_COLOR_USED_COLORS_MAX_SIZE; + } + handleRecentlyUsedColorsChange(colors); + }; + + /** + * 最近使用颜色变更时触发 + * @param colors + */ + const handleRecentlyUsedColorsChange = (colors: string[]) => { + recentlyUsedColors.value = colors; + setRecentlyUsedColors(colors); + }; + + /** + * onChange + * @param trigger + */ + const emitColorChange = (trigger?: ColorPickerChangeTrigger) => { + setInnerValue(formatValue(), { + 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'; + } + }, + ); + + /** + * mode change + * @param value + * @returns + */ + const handleModeChange = (value: TdColorModes) => { + mode.value = value; + if (value === 'linear-gradient') { + color.value.update( + color.value.gradientColors.length > 0 ? color.value.linearGradient : DEFAULT_LINEAR_GRADIENT, + ); + return; + } + color.value.update(color.value.rgba); + }; + + /** + * 格式变化 + * @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; + let changeTrigger: ColorPickerChangeTrigger = 'palette-saturation-brightness'; + if (value !== val && saturation !== sat) { + color.value.saturation = saturation; + color.value.value = value; + changeTrigger = 'palette-saturation-brightness'; + } else if (saturation !== sat) { + color.value.saturation = saturation; + changeTrigger = 'palette-saturation'; + } else if (value !== val) { + color.value.value = value; + changeTrigger = 'palette-brightness'; + } else { + return; + } + emitColorChange(changeTrigger); + }; + + /** + * 色相变化 + * @param hue + */ + const handleHueChange = (hue: number) => { + color.value.hue = hue; + emitColorChange('palette-hue-bar'); + props.onPaletteBarChange?.({ + color: getColorObject(color.value), + }); + }; + + /** + * 透明度变化 + * @param alpha + */ + const handleAlphaChange = (alpha: number) => { + color.value.alpha = alpha; + emitColorChange('palette-alpha-bar'); + }; + + /** + * 输入框触发改变 + * @param input + * @param alpha + */ + const handleInputChange = (input: string, alpha?: number) => { + color.value.update(input); + color.value.alpha = alpha; + emitColorChange('input'); + }; + + /** + * 渐变改变 + * @param param0 + */ + const handleGradientChange = ({ + key, + payload, + }: { + key: 'degree' | 'selectedId' | 'colors'; + payload: number | string | GradientColorPoint[]; + }) => { + let trigger: ColorPickerChangeTrigger = 'palette-saturation-brightness'; + switch (key) { + case 'degree': + color.value.gradientDegree = payload as number; + trigger = 'input'; + break; + case 'selectedId': + color.value.gradientSelectedId = payload as string; + break; + case 'colors': + color.value.gradientColors = payload as GradientColorPoint[]; + break; + } + emitColorChange(trigger); + }; + + /** + * 色块点击 + * @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(); + }; + + return { + baseClassName, + statusClassNames, + t, + global, + color, + mode, + formatModel, + recentlyUsedColors, + addRecentlyUsedColor, + handleModeChange, + handleSatAndValueChange, + handleHueChange, + handleAlphaChange, + handleGradientChange, + handleSetColor, + handleFormatModeChange, + handleInputChange, + handleRecentlyUsedColorsChange, + }; + }, + render() { + const { + baseClassName, statusClassNames, t, global, recentColors, swatchColors, + } = this; + + const showUsedColors = recentColors !== null && recentColors !== false; + + let systemColors = swatchColors; + if (systemColors === undefined) { + systemColors = [...DEFAULT_SYSTEM_SWATCH_COLORS]; + } + const showSystemColors = systemColors?.length > 0; + + const renderSwatches = () => { + if (!showSystemColors && !showUsedColors) { + return null; + } + return ( +
+ {showUsedColors ? ( + { + this.handleSetColor('used', color); + }} + handleChange={this.handleRecentlyUsedColorsChange} + /> + ) : null} + {showSystemColors ? ( + this.handleSetColor('system', color)} + /> + ) : null} +
+ ); + }; + + return ( +
e.stopPropagation()} + > + +
+ {this.mode === 'linear-gradient' ? ( + + ) : null} + + + {this.enableAlpha ? ( + + ) : null} + + {renderSwatches()} +
+
+ ); + }, +}); diff --git a/src/color-picker/panel/linear-gradient.tsx b/src/color-picker/panel/linear-gradient.tsx new file mode 100644 index 000000000..cb1bcb7cf --- /dev/null +++ b/src/color-picker/panel/linear-gradient.tsx @@ -0,0 +1,296 @@ +import { + computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, watch, +} from '@vue/composition-api'; +import cloneDeep from 'lodash/cloneDeep'; +import { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../const'; +import { genGradientPoint, gradientColors2string, GradientColorPoint } from '../utils'; +import { InputNumber as TInputNumber } from '../../input-number'; +import { useBaseClassName } from '../hooks'; +import useCommonClassName from '../../hooks/useCommonClassName'; +import baseProps from './base-props'; + +const DELETE_KEYS: string[] = ['delete', 'backspace']; + +export default defineComponent({ + name: 'LinearGradient', + components: { + TInputNumber, + }, + inheritAttrs: false, + props: { + ...baseProps, + }, + setup(props) { + const baseClassName = useBaseClassName(); + const { statusClassNames } = useCommonClassName(); + const refSlider = ref(null); + const sliderRect = reactive({ + left: 0, + width: GRADIENT_SLIDER_DEFAULT_WIDTH, + }); + const isDragging = ref(false); + const isMoved = ref(false); + const colorInstance = computed(() => cloneDeep(props.color)); + + const degree = ref(colorInstance.value.gradientDegree); + const selectedId = ref(colorInstance.value.gradientSelectedId); + const colors = ref(cloneDeep(colorInstance.value.gradientColors)); + + watch( + () => props.color.gradientDegree, + (value) => (degree.value = value), + ); + watch( + () => props.color.gradientSelectedId, + (value) => (selectedId.value = value), + ); + watch( + () => props.color.gradientColors, + (value) => { + colors.value = cloneDeep(value); + }, + { + deep: true, + }, + ); + + const handleChange = (key: 'degree' | 'selectedId' | 'colors', payload: any, addUsedColor?: boolean) => { + if (props.disabled) { + return; + } + props.handleChange({ + key, + payload, + addUsedColor, + }); + }; + + const handleDegreeChange = (value: number) => { + if (props.disabled || value === colorInstance.value.gradientDegree) { + return; + } + degree.value = value; + handleChange('degree', value, true); + }; + + const handleSelectedIdChange = (value: string) => { + if (props.disabled) { + return; + } + selectedId.value = value; + handleChange('selectedId', value); + }; + + const handleColorsChange = (value: GradientColorPoint[], isEnded?: boolean) => { + if (props.disabled) { + return; + } + colors.value = value; + handleChange('colors', value, isEnded); + }; + + /** + * 设置bar的位置 + * @param left + * @returns + */ + const updateActiveThumbLeft = (left: number) => { + const index = colors.value.findIndex((c) => c.id === selectedId.value); + if (index === -1) { + return; + } + const point = colors.value[index]; + // eslint-disable-next-line no-param-reassign + left = Math.max(0, Math.min(sliderRect.width, left)); + const percentLeft = (left / sliderRect.width) * 100; + colors.value.splice(index, 1, { + color: point.color, + left: percentLeft, + id: point.id, + }); + handleColorsChange(colors.value); + }; + + // 移动开始 + const handleStart = (id: string, e: MouseEvent) => { + const rect = refSlider.value.getBoundingClientRect(); + sliderRect.left = rect.left; + sliderRect.width = rect.width || GRADIENT_SLIDER_DEFAULT_WIDTH; + if (isDragging.value || props.disabled) { + return; + } + isMoved.value = false; + isDragging.value = true; + e.preventDefault(); + e.stopPropagation(); + handleSelectedIdChange(id); + // 让slider获取焦点，以便键盘事件生效。 + refSlider.value.focus(); + window.addEventListener('mousemove', handleMove, false); + window.addEventListener('mouseup', handleEnd, false); + window.addEventListener('contextmenu', handleEnd, false); + }; + + // 移动中 + const handleMove = (e: MouseEvent) => { + if (!isDragging.value || props.disabled) { + return; + } + const left = e.clientX - sliderRect.left; + isMoved.value = true; + updateActiveThumbLeft(left); + }; + + // 移动结束 + const handleEnd = () => { + if (!isDragging.value) { + return; + } + setTimeout(() => { + isDragging.value = false; + }, 0); + if (isMoved.value) { + handleColorsChange(colors.value, true); + isMoved.value = false; + } + window.removeEventListener('mousemove', handleMove, false); + window.removeEventListener('mouseup', handleEnd, false); + window.removeEventListener('contextmenu', handleEnd, false); + }; + + const handleKeyup = (e: KeyboardEvent) => { + if (props.disabled) { + return; + } + const points = colors.value; + let pos = points.findIndex((c) => c.id === selectedId.value); + const { length } = points; + // 必须保证有两个点 + if (DELETE_KEYS.includes(e.key.toLocaleLowerCase()) && length > 2 && pos >= 0 && pos <= length - 1) { + points.splice(pos, 1); + if (!points[pos]) { + // eslint-disable-next-line no-nested-ternary + pos = points[pos + 1] ? pos + 1 : points[pos - 1] ? pos - 1 : 0; + } + const current = points[pos]; + handleColorsChange(points, true); + handleSelectedIdChange(current?.id); + } + }; + + const handleThumbBarClick = (e: MouseEvent) => { + if (props.disabled) { + return; + } + let left = e.clientX - sliderRect.left; + left = Math.max(0, Math.min(sliderRect.width, left)); + const percentLeft = (left / sliderRect.width) * 100; + const newPoint = genGradientPoint(percentLeft, colorInstance.value.rgba); + colors.value.push(newPoint); + handleColorsChange(colors.value, true); + handleSelectedIdChange(newPoint.id); + }; + + onMounted(() => { + const rect = refSlider.value.getBoundingClientRect(); + sliderRect.left = rect.left; + sliderRect.width = rect.width || GRADIENT_SLIDER_DEFAULT_WIDTH; + }); + + onBeforeUnmount(() => { + window.removeEventListener('mousemove', handleMove, false); + window.removeEventListener('mouseup', handleEnd, false); + window.removeEventListener('contextmenu', handleEnd, false); + }); + + return { + baseClassName, + statusClassNames, + refSlider, + degree, + selectedId, + colors, + colorInstance, + handleDegreeChange, + handleStart, + handleMove, + handleEnd, + handleKeyup, + handleThumbBarClick, + }; + }, + render() { + const { linearGradient, gradientColors } = this.colorInstance; + const { + colors, selectedId, degree, disabled, baseClassName, statusClassNames, + } = this; + const thumbBackground = gradientColors2string({ + points: gradientColors, + degree: 90, + }); + return ( +
+
+
+
    + {colors.map((t) => { + const left = `${Math.round(t.left * 100) / 100}%`; + return ( +
  • e.stopPropagation()} + onMousedown={(e: MouseEvent) => this.handleStart(t.id, e)} + > + +
    • + ); + })} +
+
+
+
+ `${value}°`} + v-model={this.degree} + onBlur={this.handleDegreeChange} + onEnter={this.handleDegreeChange} + disabled={disabled} + /> +
+
+ +
+
+ ); + }, +}); diff --git a/src/color-picker/panel/saturation.tsx b/src/color-picker/panel/saturation.tsx new file mode 100644 index 000000000..7aa05062f --- /dev/null +++ b/src/color-picker/panel/saturation.tsx @@ -0,0 +1,116 @@ +import { + computed, defineComponent, nextTick, onBeforeUnmount, onMounted, reactive, ref, +} from '@vue/composition-api'; +import { SATURATION_PANEL_DEFAULT_HEIGHT, SATURATION_PANEL_DEFAULT_WIDTH } from '../const'; +import { Select as TSelect, Option as TOption } from '../../select'; +import { Draggable, Coordinate } from '../utils'; +import { useBaseClassName } from '../hooks'; +import baseProps from './base-props'; + +export default defineComponent({ + name: 'SaturationPanel', + components: { + TSelect, + TOption, + }, + props: { + ...baseProps, + }, + setup(props) { + const baseClassName = useBaseClassName(); + const refPanel = ref(null); + const refThumb = ref(null); + const dragInstance = ref(null); + const panelRect = reactive({ + width: SATURATION_PANEL_DEFAULT_WIDTH, + height: SATURATION_PANEL_DEFAULT_HEIGHT, + }); + + const styles = computed(() => { + const { saturation, value } = props.color; + const { width, height } = panelRect; + const top = Math.round((1 - value) * height); + const left = Math.round(saturation * width); + return { + color: props.color.rgb, + left: `${left}px`, + top: `${top}px`, + }; + }); + + const getSaturationAndValueByCoordinate = (coordinate: Coordinate) => { + const { width, height } = panelRect; + const { x, y } = coordinate; + const saturation = Math.round((x / width) * 100); + const value = Math.round((1 - y / height) * 100); + return { + saturation, + value, + }; + }; + + const handleDrag = (coordinate: Coordinate, isEnded?: boolean) => { + if (props.disabled) { + return; + } + const { saturation, value } = getSaturationAndValueByCoordinate(coordinate); + props.handleChange({ + saturation: saturation / 100, + value: value / 100, + addUsedColor: isEnded, + }); + }; + + const handleDragEnd = (coordinate: Coordinate) => { + if (props.disabled) { + return; + } + nextTick(() => { + handleDrag(coordinate, true); + }); + }; + + const panelBackground = computed(() => `hsl(${props.color.hue}, 100%, 50%)`); + + onMounted(() => { + panelRect.width = refPanel.value.offsetWidth || SATURATION_PANEL_DEFAULT_WIDTH; + panelRect.height = refPanel.value.offsetHeight || SATURATION_PANEL_DEFAULT_HEIGHT; + dragInstance.value = new Draggable(refPanel.value, { + start() { + panelRect.width = refPanel.value.offsetWidth; + panelRect.height = refPanel.value.offsetHeight; + }, + drag: (coordinate: Coordinate) => { + handleDrag(coordinate); + }, + end: handleDragEnd, + }); + }); + + onBeforeUnmount(() => { + dragInstance.value.destroy(); + }); + + return { + baseClassName, + refThumb, + refPanel, + styles, + panelBackground, + }; + }, + render() { + const { baseClassName, styles, panelBackground } = this; + return ( +
+ +
+ ); + }, +}); diff --git a/src/color-picker/panel/slider.tsx b/src/color-picker/panel/slider.tsx new file mode 100644 index 000000000..b14adbace --- /dev/null +++ b/src/color-picker/panel/slider.tsx @@ -0,0 +1,108 @@ +import { + computed, defineComponent, onBeforeUnmount, onMounted, PropType, reactive, ref, +} from '@vue/composition-api'; +import { SLIDER_DEFAULT_WIDTH } from '../const'; +import { Select as TSelect, Option as TOption } from '../../select'; +import { Draggable, Coordinate } from '../utils'; +import { useBaseClassName } from '../hooks'; +import baseProps from './base-props'; + +export default defineComponent({ + name: 'ColorSlider', + components: { + TSelect, + TOption, + }, + props: { + ...baseProps, + className: { + type: String, + default: '', + }, + value: { + type: Number, + default: 0, + }, + maxValue: { + type: Number, + default: 360, + }, + railStyle: { + type: Object as PropType, + }, + }, + setup(props, { emit }) { + const baseClassName = useBaseClassName(); + const refPanel = ref(null); + const refThumb = ref(null); + const dragInstance = ref(null); + const panelRect = reactive({ + width: SLIDER_DEFAULT_WIDTH, + }); + const styles = computed(() => { + const { width } = panelRect; + if (!width) { + return; + } + const left = Math.round((props.value / props.maxValue) * width); + return { + left: `${left}px`, + color: props.color.rgb, + }; + }); + + const handleDrag = (coordinate: Coordinate, isEnded?: boolean) => { + if (props.disabled) { + return; + } + const { width } = panelRect; + const { x } = coordinate; + const value = Math.round((x / width) * props.maxValue * 100) / 100; + props.handleChange(value, isEnded); + emit('change', value, isEnded); + }; + + const handleDragEnd = (coordinate: Coordinate) => { + if (props.disabled) { + return; + } + handleDrag(coordinate, true); + }; + + onMounted(() => { + panelRect.width = refPanel.value.offsetWidth || SLIDER_DEFAULT_WIDTH; + dragInstance.value = new Draggable(refPanel.value, { + start: () => { + // pop模式下由于是隐藏显示，这个宽度让其每次点击的时候重新计算 + panelRect.width = refPanel.value.offsetWidth; + }, + drag: (coordinate: Coordinate) => { + handleDrag(coordinate); + }, + end: handleDragEnd, + }); + }); + + onBeforeUnmount(() => { + dragInstance.value.destroy(); + }); + + return { + baseClassName, + refThumb, + refPanel, + styles, + }; + }, + render() { + const { + baseClassName, className, railStyle, styles, + } = this; + return ( +
+
+ +
+ ); + }, +}); diff --git a/src/color-picker/panel/style/css.js b/src/color-picker/panel/style/css.js new file mode 100644 index 000000000..f388879ac --- /dev/null +++ b/src/color-picker/panel/style/css.js @@ -0,0 +1 @@ +import '../../style/index.css'; diff --git a/src/color-picker/panel/style/index.js b/src/color-picker/panel/style/index.js new file mode 100644 index 000000000..4a2e7d583 --- /dev/null +++ b/src/color-picker/panel/style/index.js @@ -0,0 +1 @@ +import '../../style/index.js'; diff --git a/src/color-picker/panel/swatches.tsx b/src/color-picker/panel/swatches.tsx new file mode 100644 index 000000000..86299621f --- /dev/null +++ b/src/color-picker/panel/swatches.tsx @@ -0,0 +1,154 @@ +import { + computed, defineComponent, PropType, ref, +} from '@vue/composition-api'; +import { DeleteIcon, AddIcon } from 'tdesign-icons-vue'; +import { cloneDeep } from 'lodash'; +import { Select as TSelect, Option as TOption } from '../../select'; +import { Color } from '../utils'; +import { useBaseClassName } from '../hooks'; +import { useConfig, usePrefixClass } from '../../config-provider'; +import useCommonClassName from '../../hooks/useCommonClassName'; +import baseProps from './base-props'; +import { Button as TButton } from '../../button'; +import { TdColorHandler } from '../interfaces'; + +export default defineComponent({ + name: 'SwatchesPanel', + components: { + TSelect, + TOption, + TButton, + }, + props: { + ...baseProps, + colors: { + type: Array as PropType, + default: () => [] as PropType, + }, + title: { + type: String, + default: '系统色彩', + }, + editable: { + type: Boolean, + default: false, + }, + handleSetColor: { + type: Function as PropType, + default: () => () => {}, + }, + handleAddColor: { + type: Function as PropType, + default: () => () => {}, + }, + }, + setup(props) { + const baseClassName = useBaseClassName(); + const { t, global } = useConfig('colorPicker'); + const { global: confirmGlobal } = useConfig('popconfirm'); + const classPrefix = usePrefixClass(); + const { statusClassNames } = useCommonClassName(); + const visiblePopConfirm = ref(false); + const colorInstance = computed(() => cloneDeep(props.color)); + const setVisiblePopConfirm = (visible: boolean) => { + visiblePopConfirm.value = visible; + }; + + const handleClick = (color: string) => { + props.handleSetColor(color); + }; + + const isEqualCurrentColor = (color: string) => Color.compare(color, colorInstance.value.css); + + const selectedColorIndex = computed(() => props.colors.findIndex((color) => isEqualCurrentColor(color))); + + /** + * 移除颜色 + */ + const handleRemoveColor = () => { + const colors = [...props.colors]; + const selectedIndex = selectedColorIndex.value; + if (selectedIndex > -1) { + colors.splice(selectedIndex, 1); + } else { + colors.length = 0; + } + props.handleChange?.(colors); + setVisiblePopConfirm(false); + }; + + return { + t, + global, + confirmGlobal, + classPrefix, + baseClassName, + statusClassNames, + selectedColorIndex, + visiblePopConfirm, + setVisiblePopConfirm, + handleClick, + isEqualCurrentColor, + handleRemoveColor, + }; + }, + render() { + const { + baseClassName, statusClassNames, title, editable, + } = this; + const swatchesClass = `${baseClassName}__swatches`; + + const renderActions = () => { + if (!editable) { + return null; + } + return ( +
+ this.handleAddColor()}> + + + {this.colors.length > 0 ? ( + this.handleRemoveColor()}> + + + ) : null} +
+ ); + }; + + return ( +
+

+ {title} + {renderActions()} +

+
    + {this.colors.map((color) => ( +
  • { + if (this.disabled) { + return; + } + this.handleClick(color); + }} + > +
    + +
    +
    • + ))} +
+
+ ); + }, +}); diff --git a/src/color-picker/props.ts b/src/color-picker/props.ts new file mode 100644 index 000000000..0bd3ca805 --- /dev/null +++ b/src/color-picker/props.ts @@ -0,0 +1,85 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdColorPickerProps } from './type'; +import { PropType } from 'vue'; + +export default { + /** 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮 */ + closeBtn: { + type: [String, Boolean, Function] as PropType, + default: true, + }, + /** 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 */ + colorModes: { + type: Array as PropType, + default: () => { + return ['monochrome', 'linear-gradient']; + }, + }, + /** 是否禁用组件 */ + disabled: Boolean, + /** 是否开启透明通道 */ + enableAlpha: Boolean, + /** 格式化色值。`enableAlpha` 为真时，`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); + }, + }, + /** 透传 Input 输入框组件全部属性 */ + inputProps: { + type: Object as PropType, + }, + /** 【开发中】是否允许选中多个颜色 */ + multiple: Boolean, + /** 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等 */ + popupProps: { + type: Object as PropType, + }, + /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” */ + recentColors: { + type: Array as PropType, + default: undefined, + }, + /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”，非受控属性 */ + defaultRecentColors: { + type: Array as PropType, + default: (): TdColorPickerProps['defaultRecentColors'] => [], + }, + /** 透传 SelectInputProps 筛选器输入框组件全部属性 */ + selectInputProps: { + type: Object as PropType, + }, + /** 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */ + swatchColors: { + type: Array as PropType, + }, + /** 色值 */ + value: { + type: String, + default: undefined, + }, + /** 色值 */ + modelValue: { + type: String, + default: undefined, + }, + /** 色值，非受控属性 */ + defaultValue: { + type: String, + default: '', + }, + /** 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 */ + onChange: Function as PropType, + /** 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 */ + onPaletteBarChange: Function as PropType, + /** 最近使用颜色发生变化时触发 */ + onRecentColorsChange: Function as PropType, +}; diff --git a/src/color-picker/style/css.js b/src/color-picker/style/css.js new file mode 100644 index 000000000..6a9a4b132 --- /dev/null +++ b/src/color-picker/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/color-picker/style/index.js b/src/color-picker/style/index.js new file mode 100644 index 000000000..180d455f6 --- /dev/null +++ b/src/color-picker/style/index.js @@ -0,0 +1 @@ +import '../../_common/style/web/components/color-picker/_index.less'; diff --git a/src/color-picker/trigger.tsx b/src/color-picker/trigger.tsx new file mode 100644 index 000000000..e852c66e0 --- /dev/null +++ b/src/color-picker/trigger.tsx @@ -0,0 +1,96 @@ +import { + defineComponent, PropType, ref, watch, +} 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'; + +export default defineComponent({ + name: 'DefaultTrigger', + components: { + TInput, + TInputNumber, + }, + inheritAttrs: false, + props: { + color: { + type: String, + default: '', + }, + disabled: { + type: Boolean, + default: false, + }, + inputProps: { + type: Object as PropType, + default: () => ({ + autoWidth: true, + }), + }, + handleTriggerChange: { + type: Function as PropType, + default: () => () => {}, + }, + }, + setup(props) { + const baseClassName = useBaseClassName(); + const value = ref(props.color); + + watch( + () => [props.color], + () => (value.value = props.color), + ); + + const handleChange = (input: string) => { + if (input === props.color) { + return; + } + if (!Color.isValid(input)) { + value.value = props.color; + } else { + value.value = input; + } + props.handleTriggerChange(value.value); + }; + + return { + baseClassName, + value, + handleChange, + }; + }, + + render() { + const { baseClassName } = this; + const inputSlots = { + label: () => ( +
+ +
+ ), + }; + return ( +
+ +
+ ); + }, +}); diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts new file mode 100644 index 000000000..c2c50bbaf --- /dev/null +++ b/src/color-picker/type.ts @@ -0,0 +1,121 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { InputProps } from '../input'; +import { PopupProps } from '../popup'; +import { SelectInputProps } from '../select-input'; +import { TNode } from '../common'; + +export interface TdColorPickerProps { + /** + * 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮 + * @default true + */ + closeBtn?: string | boolean | TNode; + /** + * 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 + * @default ['monochrome', 'linear-gradient'] + */ + colorModes?: Array<'monochrome' | 'linear-gradient'>; + /** + * 是否禁用组件 + * @default false + */ + disabled?: boolean; + /** + * 是否开启透明通道 + * @default false + */ + enableAlpha?: boolean; + /** + * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 + * @default RGB + */ + format?: 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSB' | 'HSV' | 'HSVA' | 'HEX' | 'CMYK' | 'CSS'; + /** + * 透传 Input 输入框组件全部属性 + */ + inputProps?: InputProps; + /** + * 【开发中】是否允许选中多个颜色 + * @default false + */ + multiple?: boolean; + /** + * 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等 + */ + popupProps?: PopupProps; + /** + * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” + * @default [] + */ + recentColors?: boolean | Array; + /** + * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”，非受控属性 + * @default [] + */ + defaultRecentColors?: boolean | Array; + /** + * 透传 SelectInputProps 筛选器输入框组件全部属性 + */ + selectInputProps?: SelectInputProps; + /** + * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 + */ + swatchColors?: Array; + /** + * 色值 + * @default '' + */ + value?: string; + /** + * 色值 + * @default '' + */ + modelValue?: string; + /** + * 色值，非受控属性 + * @default '' + */ + defaultValue?: string; + /** + * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 + */ + onChange?: (value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void; + /** + * 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 + */ + onPaletteBarChange?: (context: { color: ColorObject }) => void; + /** + * 最近使用颜色发生变化时触发 + */ + onRecentColorsChange?: (value: Array) => void; +} + +export type ColorPickerChangeTrigger = + | 'palette-saturation-brightness' + | 'palette-saturation' + | 'palette-brightness' + | 'palette-hue-bar' + | 'palette-alpha-bar' + | 'input'; + +export 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; +} diff --git a/src/color-picker/utils/click-outsider.ts b/src/color-picker/utils/click-outsider.ts new file mode 100644 index 000000000..ff900fe55 --- /dev/null +++ b/src/color-picker/utils/click-outsider.ts @@ -0,0 +1,96 @@ +import { ComponentPublicInstance } from '@vue/composition-api'; +import { VNode } from 'vue'; +import { prefix } from '../../config'; +import { on } from '../../utils/dom'; + +type Handler = (...args: unknown[]) => unknown; + +interface ElementHandler { + elements: HTMLElement[]; + handler: Handler; +} + +type FlushList = Map; + +const POPUP_SELECTOR = `.${prefix}-popup`; +const nodeList: FlushList = new Map(); + +let startClick: MouseEvent; + +let uid = 0; + +if (window && window.document) { + on(document, 'mousedown', (e: MouseEvent) => (startClick = e)); + on(document, 'mouseup', (e: MouseEvent) => { + // eslint-disable-next-line no-restricted-syntax + for (const { handler } of nodeList.values()) { + handler(e); + } + }); +} + +type NodeElement = HTMLElement | VNode | ComponentPublicInstance; + +const createDocumentHandler = (elements: HTMLElement[], handler: Handler, includePopup = true) => (e: MouseEvent) => { + if (includePopup) { + document.querySelectorAll(POPUP_SELECTOR).forEach((ele: Element) => { + elements.push(ele as HTMLElement); + }); + } + const elementList = Array.from(new Set(elements)); + const mouseUpTarget = e.target as Node; + const mouseDownTarget = startClick?.target as Node; + const isTargetUnExists = !mouseUpTarget || !mouseDownTarget; + if (isTargetUnExists) { + return; + } + const isContained = elementList.some((el) => { + const isSelf = el === mouseUpTarget; + const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget); + return isSelf || isContainedByEl; + }); + if (isContained) { + return; + } + handler(); +}; + +/** + * 元素外面点击 + * + * @example + * onMounted(() => { + * // 确保元素已挂载 + * addClickOutsider(refs.value, () => { + * visible.value = false + * }); + * }); + * + * onBeforeUnmount(() => removeClickOutsider); + */ +export const useClickOutsider = () => { + uid += 1; + const clickOutsiderId = uid; + const addClickOutsider = (els: NodeElement[], handler: Handler) => { + const elements = Array.from(new Set(els.filter((el) => el))).map((el: any) => { + const node = (el.el || el.$el || el) as HTMLElement; + return node; + }); + const documentHandler = createDocumentHandler(elements, handler, true); + nodeList.set(clickOutsiderId, { + elements, + handler: documentHandler, + }); + }; + + const removeClickOutsider = () => { + nodeList.has(clickOutsiderId) && nodeList.delete(clickOutsiderId); + }; + return { + clickOutsiderId, + addClickOutsider, + removeClickOutsider, + }; +}; + +export default useClickOutsider; diff --git a/src/color-picker/utils/index.ts b/src/color-picker/utils/index.ts new file mode 100644 index 000000000..3c47135e2 --- /dev/null +++ b/src/color-picker/utils/index.ts @@ -0,0 +1 @@ +export * from '../../_common/js/color-picker'; diff --git a/src/components.ts b/src/components.ts index 2c1cb18b7..3e4704f73 100644 --- a/src/components.ts +++ b/src/components.ts @@ -20,6 +20,7 @@ export * from './tabs'; // 输入 export * from './cascader'; export * from './checkbox'; +export * from './color-picker'; export * from './date-picker'; export * from './form'; export * from './input'; diff --git a/src/index.ts b/src/index.ts index e9cb015dc..4b058247c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,9 @@ -import { VueConstructor } from 'vue'; +import Vue, { VueConstructor } from 'vue'; +import VueCompositionApi from '@vue/composition-api'; import * as components from './components'; +Vue.use(VueCompositionApi); + function install(Vue: VueConstructor, config?: object) { Object.keys(components).forEach((key) => { if (components[key]) { diff --git a/test/e2e/color-picker/color-picker.spec.js b/test/e2e/color-picker/color-picker.spec.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 088138637..02b046884 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -2505,6 +2505,1196 @@ exports[`ssr snapshot test renders ./examples/checkbox/demos/link.vue correctly `; +exports[`ssr snapshot test renders ./examples/color-picker/demos/color-mode.vue correctly 1`] = ` +
+
+
默认（单色 + 线性渐变）
+
+
+
+
+
+
+
red +
+
+
+
+
+
+
仅单色模式
+
+
+
+
+
+
+
#0052d9 +
+
+
+
+
+
+
+
仅线性渐变模式
+
+
+
+
+
+
+
linear-gradient(45deg, #4facfe 0%, #00f2fe 100%) +
+
+
+
+
+
+`; + +exports[`ssr snapshot test renders ./examples/color-picker/demos/enable-alpha.vue correctly 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RGB + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

最近使用颜色 +
+

+
    +
    +
    +

    系统预设颜色

    +
      +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    • +
      +
      • +
    +
    +
    +
    +
    +
    +`; + +exports[`ssr snapshot test renders ./examples/color-picker/demos/panel.vue correctly 1`] = ` +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    RGB + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    最近使用颜色 +
    +

    +
      +
      +
      +

      系统预设颜色

      +
        +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      +
      +
      +
      +
      +
      +`; + +exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vue correctly 1`] = ` +
      +
      +
      预设最近使用色
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      RGB + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +

      最近使用颜色 +
      +

      +
        +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      +
      +
      +

      系统预设颜色

      +
        +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      +
      +
      +
      +
      +
      +
      +
      完全不显示最近使用色
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      RGB + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +

      系统预设颜色

      +
        +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      • +
        +
        • +
      +
      +
      +
      +
      +
      +
      +`; + +exports[`ssr snapshot test renders ./examples/color-picker/demos/status-disabled.vue correctly 1`] = ` +
      +
      +
      +
      +
      +
      +
      +
      red +
      +
      +
      +
      +
      +`; + +exports[`ssr snapshot test renders ./examples/color-picker/demos/status-readonly.vue correctly 1`] = ` +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      RGB + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +

      最近使用颜色 +
      +

      +
        +
        +
        +

        系统预设颜色

        +
          +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        • +
          +
          • +
        +
        +
        +
        +
        +
        +`; + +exports[`ssr snapshot test renders ./examples/color-picker/demos/swatch-color.vue correctly 1`] = ` +
        +
        +
        自定义系统色
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        RGB + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +

        最近使用颜色 +
        +

        +
          +
          +
          +

          系统预设颜色

          +
            +
          • +
            +
            • +
          • +
            +
            • +
          • +
            +
            • +
          • +
            +
            • +
          • +
            +
            • +
          +
          +
          +
          +
          +
          +
          +
          完全不显示系统色
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          RGB + +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +

          最近使用颜色 +
          +

          +
            +
            +
            +
            +
            +
            +
            +`; + +exports[`ssr snapshot test renders ./examples/color-picker/demos/trigger.vue correctly 1`] = ` +
            +
            +
            +
            +
            +
            +
            +
            #0052d9 +
            +
            +
            +
            +
            +`; + exports[`ssr snapshot test renders ./examples/comment/demos/base.vue correctly 1`] = `
            diff --git a/test/unit/color-picker/__snapshots__/demo.test.js.snap b/test/unit/color-picker/__snapshots__/demo.test.js.snap new file mode 100644 index 000000000..ecfd94345 --- /dev/null +++ b/test/unit/color-picker/__snapshots__/demo.test.js.snap @@ -0,0 +1,4757 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ColorPicker ColorPicker colorModeVue demo works fine 1`] = ` +
            +
            +
            + 默认（单色 + 线性渐变） +
            + +
            +
            +
            +
            +
            +
            + +
            +
            + + + red + +
            +
            +
            +
            +
            + +
            +
            + 仅单色模式 +
            + +
            +
            +
            +
            +
            +
            + +
            +
            + + + #0052d9 + +
            +
            +
            +
            +
            + +
            + +
            +
            + 仅线性渐变模式 +
            + +
            +
            +
            +
            +
            +
            + +
            +
            + + + linear-gradient(45deg, #4facfe 0%, #00f2fe 100%) + +
            +
            +
            +
            +
            +
            +`; + +exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` +
            +
            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            + +
            +
            +
            + +
            +
            +
            + +
            +
            +
            +
            +
            + + + RGB + + + + +
            +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            +
            +

            + + 最近使用颜色 + +
            + + + + + +
            +

            +
              +
            +
            +

            + + 系统预设颜色 + +

            +
              +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            +
            +
            +
            +
            +
            +`; + +exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` +
            +
            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            + +
            +
            +
            + +
            +
            +
            +
            +
            + + + RGB + + + + +
            +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            +
            +

            + + 最近使用颜色 + +
            + + + + + +
            +

            +
              +
            +
            +

            + + 系统预设颜色 + +

            +
              +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            +
            +
            +
            +
            +
            +`; + +exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` +
            +
            +
            + 预设最近使用色 +
            + +
            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            + +
            +
            +
            + +
            +
            +
            +
            +
            + + + RGB + + + + +
            +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            +
            +

            + + 最近使用颜色 + +
            + + + + + + + + + + + +
            +

            +
              +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            +
            +
            +

            + + 系统预设颜色 + +

            +
              +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            +
            +
            +
            +
            +
            + +
            +
            + 完全不显示最近使用色 +
            + +
            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            + +
            +
            +
            + +
            +
            +
            +
            +
            + + + RGB + + + + +
            +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            +
            +

            + + 系统预设颜色 + +

            +
              +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            +
            +
            +
            +
            +
            +
            +`; + +exports[`ColorPicker ColorPicker statusDisabledVue demo works fine 1`] = ` +
            +
            +
            +
            +
            +
            +
            + +
            +
            + + + red + +
            +
            +
            +
            +
            +`; + +exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` +
            +
            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            + +
            +
            +
            + +
            +
            +
            +
            +
            + + + RGB + + + + +
            +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            +
            +

            + + 最近使用颜色 + +
            + + + + + +
            +

            +
              +
            +
            +

            + + 系统预设颜色 + +

            +
              +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            +
            +
            +
            +
            +
            +`; + +exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = ` +
            +
            +
            + 自定义系统色 +
            + +
            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            + +
            +
            +
            + +
            +
            +
            +
            +
            + + + RGB + + + + +
            +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            +
            +

            + + 最近使用颜色 + +
            + + + + + +
            +

            +
              +
            +
            +

            + + 系统预设颜色 + +

            +
              +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            • +
              + +
              +
              • +
            +
            +
            +
            +
            +
            + +
            +
            + 完全不显示系统色 +
            + +
            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            + +
            +
            +
            + +
            +
            +
            +
            +
            + + + RGB + + + + +
            +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            +
            +

            + + 最近使用颜色 + +
            + + + + + +
            +

            +
              +
            +
            +
            +
            +
            +
            +`; + +exports[`ColorPicker ColorPicker triggerVue demo works fine 1`] = ` +
            +
            +
            +
            +
            +
            +
            + +
            +
            + + + #0052d9 + +
            +
            +
            +
            +
            +`; diff --git a/test/unit/color-picker/demo.test.js b/test/unit/color-picker/demo.test.js new file mode 100644 index 000000000..aff655f9c --- /dev/null +++ b/test/unit/color-picker/demo.test.js @@ -0,0 +1,33 @@ +/** + * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖 + */ + +import { mount } from '@vue/test-utils'; +import colorModeVue from '@/examples/color-picker/demos/color-mode.vue'; +import enableAlphaVue from '@/examples/color-picker/demos/enable-alpha.vue'; +import panelVue from '@/examples/color-picker/demos/panel.vue'; +import recentColorVue from '@/examples/color-picker/demos/recent-color.vue'; +import statusDisabledVue from '@/examples/color-picker/demos/status-disabled.vue'; +import statusReadonlyVue from '@/examples/color-picker/demos/status-readonly.vue'; +import swatchColorVue from '@/examples/color-picker/demos/swatch-color.vue'; +import triggerVue from '@/examples/color-picker/demos/trigger.vue'; + +const mapper = { + colorModeVue, + enableAlphaVue, + panelVue, + recentColorVue, + statusDisabledVue, + statusReadonlyVue, + swatchColorVue, + triggerVue, +}; + +describe('ColorPicker', () => { + Object.keys(mapper).forEach((demoName) => { + it(`ColorPicker ${demoName} demo works fine`, () => { + const wrapper = mount(mapper[demoName]); + expect(wrapper.element).toMatchSnapshot(); + }); + }); +}); diff --git a/test/unit/color-picker/index.test.js b/test/unit/color-picker/index.test.js new file mode 100644 index 000000000..41c350e20 --- /dev/null +++ b/test/unit/color-picker/index.test.js @@ -0,0 +1,31 @@ +import { mount } from '@vue/test-utils'; +import { ColorPickerPanel, ColorPicker } from '@/src/color-picker/index.ts'; + +// every component needs four parts: props/events/slots/functions. +describe('ColorPickerPanel', () => { + // test props api + describe(':props', () => { + it('', () => { + const wrapper = mount({ + render() { + return ; + }, + }); + expect(wrapper.exists()).toBe(true); + }); + }); +}); + +describe('ColorPicker', () => { + // test props api + describe(':props', () => { + it('', () => { + const wrapper = mount({ + render() { + return ; + }, + }); + expect(wrapper.exists()).toBe(true); + }); + }); +}); From 6dcb151d7f398193b3131a9e8cb507b84b8b08e1 Mon Sep 17 00:00:00 2001 From: smohan Date: Wed, 11 May 2022 16:55:50 +0800 Subject: [PATCH 2/6] feat(color-picker): color-picker component --- examples/color-picker/color-picker.md | 2 +- examples/color-picker/usage/props.json | 16 ++++++++++++++++ package.json | 2 +- src/_common | 2 +- src/color-picker/color-picker.tsx | 4 ++-- src/color-picker/panel/index.tsx | 9 ++------- src/color-picker/props.ts | 9 +-------- src/color-picker/type.ts | 7 +------ 8 files changed, 25 insertions(+), 26 deletions(-) create mode 100644 examples/color-picker/usage/props.json diff --git a/examples/color-picker/color-picker.md b/examples/color-picker/color-picker.md index f891be4bf..c4fa00acd 100644 --- a/examples/color-picker/color-picker.md +++ b/examples/color-picker/color-picker.md @@ -6,7 +6,7 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- 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 +colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' | 'linear-gradient'>` | N disabled | Boolean | false | 是否禁用组件 | N enableAlpha | Boolean | false | 是否开启透明通道 | N format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N diff --git a/examples/color-picker/usage/props.json b/examples/color-picker/usage/props.json new file mode 100644 index 000000000..88f0762b5 --- /dev/null +++ b/examples/color-picker/usage/props.json @@ -0,0 +1,16 @@ +[ + + { + "name": "enableAlpha", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + + { + "name": "disabled", + "type": "Boolean", + "defaultValue": false, + "options": [] + } +] \ No newline at end of file diff --git a/package.json b/package.json index d4d9b9a14..50617b5ab 100644 --- a/package.json +++ b/package.json @@ -80,8 +80,8 @@ "lodash": "^4.17.21", "raf": "^3.4.1", "sortablejs": "^1.15.0", + "tdesign-icons-vue": "~0.0.8", "tinycolor2": "^1.4.2", - "tdesign-icons-vue": "~0.1.0", "validator": "^13.5.1" }, "peerDependencies": { diff --git a/src/_common b/src/_common index 5cc38b6e0..2f59efe44 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 5cc38b6e0604244f7893671caff7785f9cd79707 +Subproject commit 2f59efe44bfd3e1d296eb698ea83af8d53a4134a diff --git a/src/color-picker/color-picker.tsx b/src/color-picker/color-picker.tsx index af770fef3..20d7c7f0e 100644 --- a/src/color-picker/color-picker.tsx +++ b/src/color-picker/color-picker.tsx @@ -32,8 +32,8 @@ export default defineComponent({ const visible = ref(false); const setVisible = (value: boolean) => (visible.value = value); - const { value, modelValue } = toRefs(props); - const [innerValue, setInnerValue] = useVModel(value || modelValue, props.defaultValue, props.onChange, 'change'); + const { value } = toRefs(props); + const [innerValue, setInnerValue] = useVModel(value, props.defaultValue, props.onChange, 'change'); const handleChange = (value: string, context: TdColorContext) => { setInnerValue(value, context); diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx index ffc530251..ab36806a9 100644 --- a/src/color-picker/panel/index.tsx +++ b/src/color-picker/panel/index.tsx @@ -45,13 +45,8 @@ export default defineComponent({ const baseClassName = useBaseClassName(); const { statusClassNames } = useCommonClassName(); const { t, global } = useConfig('colorPicker'); - const { value: inputValue, modelValue, recentColors } = toRefs(props); - const [innerValue, setInnerValue] = useVModel( - inputValue || modelValue, - props.defaultValue, - props.onChange, - 'change', - ); + const { value: inputValue, recentColors } = toRefs(props); + const [innerValue, setInnerValue] = useVModel(inputValue, props.defaultValue, props.onChange, 'change'); const color = ref(new Color(innerValue.value || DEFAULT_COLOR)); const updateColor = () => color.value.update(innerValue.value || DEFAULT_COLOR); const mode = ref(color.value.isGradient ? 'linear-gradient' : 'monochrome'); diff --git a/src/color-picker/props.ts b/src/color-picker/props.ts index 0bd3ca805..8858a8cc9 100644 --- a/src/color-picker/props.ts +++ b/src/color-picker/props.ts @@ -16,9 +16,7 @@ export default { /** 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 */ colorModes: { type: Array as PropType, - default: () => { - return ['monochrome', 'linear-gradient']; - }, + default: () => ['monochrome', 'linear-gradient'], }, /** 是否禁用组件 */ disabled: Boolean, @@ -66,11 +64,6 @@ export default { type: String, default: undefined, }, - /** 色值 */ - modelValue: { - type: String, - default: undefined, - }, /** 色值，非受控属性 */ defaultValue: { type: String, diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts index c2c50bbaf..ae9f0d53c 100644 --- a/src/color-picker/type.ts +++ b/src/color-picker/type.ts @@ -17,7 +17,7 @@ export interface TdColorPickerProps { closeBtn?: string | boolean | TNode; /** * 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 - * @default ['monochrome', 'linear-gradient'] + * @default ()=> ['monochrome', 'linear-gradient'] */ colorModes?: Array<'monochrome' | 'linear-gradient'>; /** @@ -71,11 +71,6 @@ export interface TdColorPickerProps { * @default '' */ value?: string; - /** - * 色值 - * @default '' - */ - modelValue?: string; /** * 色值，非受控属性 * @default '' From dae32bcded2592ec51f7f4ccb684405a142be864 Mon Sep 17 00:00:00 2001 From: smohan Date: Wed, 11 May 2022 17:28:56 +0800 Subject: [PATCH 3/6] =?UTF-8?q?style(color-picker):=20=E4=BF=AE=E5=A4=8Dli?= =?UTF-8?q?nt=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/tabs/demos/base.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/tabs/demos/base.vue b/examples/tabs/demos/base.vue index 5e0051a2b..57b567f0a 100644 --- a/examples/tabs/demos/base.vue +++ b/examples/tabs/demos/base.vue @@ -26,22 +26,22 @@ export default { value: 'first', tab: 1, tabList: [ - // eslint-disable-next-line @typescript-eslint/no-unused-vars { label: '选项卡一', value: 1, + // eslint-disable-next-line @typescript-eslint/no-unused-vars panel: (h) =>

            这是选项卡一的内容，使用 t-tabs 渲染

            , }, - // eslint-disable-next-line @typescript-eslint/no-unused-vars { label: '选项卡二', value: 2, + // eslint-disable-next-line @typescript-eslint/no-unused-vars panel: (h) =>

            这是选项卡二的内容，使用 t-tabs 渲染

            , }, - // eslint-disable-next-line @typescript-eslint/no-unused-vars { label: '选项卡三', value: 3, + // eslint-disable-next-line @typescript-eslint/no-unused-vars panel: (h) =>

            这是选项卡三的内容，使用 t-tabs 渲染

            , }, ], From a9f3ed72193acdaee8b9c51bd1745a107289db23 Mon Sep 17 00:00:00 2001 From: smohan Date: Fri, 20 May 2022 10:32:02 +0800 Subject: [PATCH 4/6] =?UTF-8?q?fix(color-picker):=20=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E5=90=8E=E7=9A=84const=E6=96=87=E4=BB=B6,=20?= =?UTF-8?q?bem=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D,=20=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E8=B7=AF=E5=BE=84=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D,=20demo?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_common | 2 +- src/color-picker/color-picker.tsx | 1 - src/color-picker/const.ts | 67 +----------------------- src/color-picker/panel/format/index.tsx | 2 +- src/color-picker/panel/format/inputs.tsx | 2 +- src/color-picker/panel/swatches.tsx | 4 +- src/index.ts | 2 - 7 files changed, 6 insertions(+), 74 deletions(-) diff --git a/src/_common b/src/_common index 971ad0f50..d8a08351a 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 971ad0f50a288f127eaabfa9c77ebf3bbe272241 +Subproject commit d8a08351ae456036fcef49985f442ba1f8e93e9d diff --git a/src/color-picker/color-picker.tsx b/src/color-picker/color-picker.tsx index 20d7c7f0e..884cc9c77 100644 --- a/src/color-picker/color-picker.tsx +++ b/src/color-picker/color-picker.tsx @@ -23,7 +23,6 @@ export default defineComponent({ ColorPanel, DefaultTrigger, }, - inheritAttrs: false, props: { ...props, }, diff --git a/src/color-picker/const.ts b/src/color-picker/const.ts index 5b542e938..7749223bc 100644 --- a/src/color-picker/const.ts +++ b/src/color-picker/const.ts @@ -1,71 +1,6 @@ import { TdColorPickerProps } from '.'; -/** 常量 */ - -// 最近使用颜色最大个数 -export const TD_COLOR_USED_COLORS_MAX_SIZE = 100; // 每行10个 - -// 颜色模式options配置 -export const COLOR_MODES = { - monochrome: '单色', - 'linear-gradient': '渐变', -}; +export * from '../_common/js/color-picker/constants'; // 非透明色格式化类型 export const FORMATS: TdColorPickerProps['format'][] = ['HEX', 'RGB', 'HSL', 'HSV', 'CMYK', 'CSS']; - -// 默认颜色 -export const DEFAULT_COLOR = '#001F97'; - -// 默认渐变色 -export const DEFAULT_LINEAR_GRADIENT = 'linear-gradient(90deg, rgba(241,29,0,1) 0%, rgba(73,106,220,1) 100%);'; - -// 默认系统色彩 -export const DEFAULT_SYSTEM_SWATCH_COLORS = [ - '#ECF2FE', - '#D4E3FC', - '#BBD3FB', - '#96BBF8', - '#699EF5', - '#4787F0', - '#266FE8', - '#0052D9', - '#0034B5', - '#001F97', - '#FDECEE', - '#F9D7D9', - '#F8B9BE', - '#F78D94', - '#F36D78', - '#E34D59', - '#C9353F', - '#B11F26', - '#951114', - '#680506', - '#FEF3E6', - '#F9E0C7', - '#F7C797', - '#F2995F', - '#ED7B2F', - '#D35A21', - '#BA431B', - '#9E3610', - '#842B0B', - '#5A1907', - '#E8F8F2', - '#BCEBDC', - '#85DBBE', - '#48C79C', - '#00A870', - '#078D5C', - '#067945', - '#056334', - '#044F2A', - '#033017', -]; - -// saturation-panel default rect -export const SATURATION_PANEL_DEFAULT_WIDTH = 248; -export const SATURATION_PANEL_DEFAULT_HEIGHT = 140; -export const SLIDER_DEFAULT_WIDTH = 248; -export const GRADIENT_SLIDER_DEFAULT_WIDTH = 190; diff --git a/src/color-picker/panel/format/index.tsx b/src/color-picker/panel/format/index.tsx index 2f4cc266e..fa848b323 100644 --- a/src/color-picker/panel/format/index.tsx +++ b/src/color-picker/panel/format/index.tsx @@ -2,7 +2,7 @@ import { defineComponent, PropType, ref, watch, } from '@vue/composition-api'; import upperCase from 'lodash/upperCase'; -import { TdColorHandler } from '@src/color-picker/interfaces'; +import { TdColorHandler } from '../../../color-picker/interfaces'; import { TdColorPickerProps } from '../../type'; import props from '../../props'; import { FORMATS } from '../../const'; diff --git a/src/color-picker/panel/format/inputs.tsx b/src/color-picker/panel/format/inputs.tsx index 93243b84b..563165350 100644 --- a/src/color-picker/panel/format/inputs.tsx +++ b/src/color-picker/panel/format/inputs.tsx @@ -2,7 +2,7 @@ import { computed, defineComponent, PropType, reactive, watch, } from '@vue/composition-api'; import throttle from 'lodash/throttle'; -import { TdColorHandler } from '@src/color-picker/interfaces'; +import { TdColorHandler } from '../../interfaces'; import props from '../../props'; import { Color } from '../../utils'; import { Select as TSelect, Option as TOption } from '../../../select'; diff --git a/src/color-picker/panel/swatches.tsx b/src/color-picker/panel/swatches.tsx index 86299621f..66787fd41 100644 --- a/src/color-picker/panel/swatches.tsx +++ b/src/color-picker/panel/swatches.tsx @@ -137,9 +137,9 @@ export default defineComponent({ this.handleClick(color); }} > -
            +
            Date: Fri, 20 May 2022 10:43:34 +0800 Subject: [PATCH 5/6] =?UTF-8?q?test(color-picker):=20=E6=9B=B4=E6=96=B0col?= =?UTF-8?q?or-picker=20test=20=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/ssr/__snapshots__/ssr.test.js.snap | 426 ++++----- .../__snapshots__/demo.test.js.snap | 852 +++++++++--------- 2 files changed, 639 insertions(+), 639 deletions(-) diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 5e191bc08..67667fa77 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -3201,124 +3201,124 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/enable-alpha.vu

            系统预设颜色

            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            @@ -3388,124 +3388,124 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/panel.vue corre

            系统预设颜色

            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            @@ -3573,28 +3573,28 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vu
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            @@ -3602,124 +3602,124 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vu

            系统预设颜色

            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            @@ -3781,124 +3781,124 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vu

            系统预设颜色

            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            @@ -3985,124 +3985,124 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/status-readonly

            系统预设颜色

            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            • -
              +
            @@ -4174,19 +4174,19 @@ 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 5269cb67d..a9e8a9f52 100644 --- a/test/unit/color-picker/__snapshots__/demo.test.js.snap +++ b/test/unit/color-picker/__snapshots__/demo.test.js.snap @@ -465,10 +465,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -477,10 +477,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -489,10 +489,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -501,10 +501,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -513,10 +513,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -525,10 +525,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -537,10 +537,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -549,10 +549,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -561,10 +561,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -573,10 +573,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -585,10 +585,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -597,10 +597,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -609,10 +609,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -621,10 +621,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -633,10 +633,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -645,10 +645,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -657,10 +657,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -669,10 +669,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -681,10 +681,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -693,10 +693,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -705,10 +705,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -717,10 +717,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -729,10 +729,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -741,10 +741,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -753,10 +753,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -765,10 +765,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -777,10 +777,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -789,10 +789,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -801,10 +801,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -813,10 +813,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -825,10 +825,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -837,10 +837,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -849,10 +849,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -861,10 +861,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -873,10 +873,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -885,10 +885,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -897,10 +897,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -909,10 +909,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -921,10 +921,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -933,10 +933,10 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1219,10 +1219,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1231,10 +1231,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1243,10 +1243,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1255,10 +1255,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1267,10 +1267,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1279,10 +1279,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1291,10 +1291,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1303,10 +1303,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1315,10 +1315,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1327,10 +1327,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1339,10 +1339,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1351,10 +1351,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1363,10 +1363,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1375,10 +1375,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1387,10 +1387,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1399,10 +1399,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1411,10 +1411,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1423,10 +1423,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1435,10 +1435,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1447,10 +1447,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1459,10 +1459,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1471,10 +1471,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1483,10 +1483,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1495,10 +1495,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1507,10 +1507,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1519,10 +1519,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1531,10 +1531,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1543,10 +1543,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1555,10 +1555,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1567,10 +1567,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1579,10 +1579,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1591,10 +1591,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1603,10 +1603,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1615,10 +1615,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1627,10 +1627,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1639,10 +1639,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1651,10 +1651,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1663,10 +1663,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1675,10 +1675,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1687,10 +1687,10 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -1987,10 +1987,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item t-is-active" >
            @@ -1999,10 +1999,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2011,10 +2011,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2023,10 +2023,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2035,10 +2035,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2047,10 +2047,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2058,10 +2058,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2069,10 +2069,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2095,10 +2095,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2107,10 +2107,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2119,10 +2119,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2131,10 +2131,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2143,10 +2143,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2155,10 +2155,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2167,10 +2167,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2179,10 +2179,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2191,10 +2191,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2203,10 +2203,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2215,10 +2215,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2227,10 +2227,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2239,10 +2239,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2251,10 +2251,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2263,10 +2263,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2275,10 +2275,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2287,10 +2287,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2299,10 +2299,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2311,10 +2311,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2323,10 +2323,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2335,10 +2335,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2347,10 +2347,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2359,10 +2359,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2371,10 +2371,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2383,10 +2383,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2395,10 +2395,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2407,10 +2407,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2419,10 +2419,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2431,10 +2431,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2443,10 +2443,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2455,10 +2455,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2467,10 +2467,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2479,10 +2479,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2491,10 +2491,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2503,10 +2503,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2515,10 +2515,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2527,10 +2527,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2539,10 +2539,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2551,10 +2551,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2563,10 +2563,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2813,10 +2813,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2825,10 +2825,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2837,10 +2837,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2849,10 +2849,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2861,10 +2861,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2873,10 +2873,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2885,10 +2885,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2897,10 +2897,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2909,10 +2909,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2921,10 +2921,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2933,10 +2933,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2945,10 +2945,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2957,10 +2957,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2969,10 +2969,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2981,10 +2981,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -2993,10 +2993,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3005,10 +3005,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3017,10 +3017,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3029,10 +3029,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3041,10 +3041,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3053,10 +3053,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3065,10 +3065,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3077,10 +3077,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3089,10 +3089,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3101,10 +3101,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3113,10 +3113,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3125,10 +3125,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3137,10 +3137,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3149,10 +3149,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3161,10 +3161,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3173,10 +3173,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3185,10 +3185,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3197,10 +3197,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3209,10 +3209,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3221,10 +3221,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3233,10 +3233,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3245,10 +3245,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3257,10 +3257,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3269,10 +3269,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3281,10 +3281,10 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3619,10 +3619,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3631,10 +3631,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3643,10 +3643,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3655,10 +3655,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3667,10 +3667,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3679,10 +3679,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3691,10 +3691,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3703,10 +3703,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3715,10 +3715,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3727,10 +3727,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3739,10 +3739,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3751,10 +3751,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3763,10 +3763,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3775,10 +3775,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3787,10 +3787,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3799,10 +3799,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3811,10 +3811,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3823,10 +3823,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3835,10 +3835,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3847,10 +3847,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3859,10 +3859,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3871,10 +3871,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3883,10 +3883,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3895,10 +3895,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3907,10 +3907,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3919,10 +3919,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3931,10 +3931,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3943,10 +3943,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3955,10 +3955,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3967,10 +3967,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3979,10 +3979,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -3991,10 +3991,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4003,10 +4003,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4015,10 +4015,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4027,10 +4027,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4039,10 +4039,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4051,10 +4051,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4063,10 +4063,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4075,10 +4075,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4087,10 +4087,10 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4378,10 +4378,10 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4390,10 +4390,10 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4402,10 +4402,10 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4414,10 +4414,10 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            @@ -4426,10 +4426,10 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = ` class="t-color-picker__swatches--item" >
            From e329003718661105d21679d0dc8fa2cf8b9c8749 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Thu, 26 May 2022 17:24:53 +0800 Subject: [PATCH 6/6] chore: update common --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 8afb18564..5eef970ba 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 8afb185642e84c60900a3541c467c25c6538c5f1 +Subproject commit 5eef970ba4c1b4dfe490162fa4f6448f49898e8d