@@ -2,10 +2,11 @@ import {
22 defineComponent , PropType , ref , watch ,
33} from 'vue' ;
44import props from '../props' ;
5- import { COLOR_MODES } from '../const ' ;
5+ import { COLOR_MODES } from '../../_common/js/color-picker/constants ' ;
66import { RadioGroup as TRadioGroup , RadioButton as TRadioButton } from '../../radio' ;
77import { TdColorHandler , TdColorModes } from '../interfaces' ;
88import { useBaseClassName } from '../hooks' ;
9+ import { useConfig } from '../../hooks' ;
910
1011export default defineComponent ( {
1112 name : 'PanelHeader' ,
@@ -28,6 +29,7 @@ export default defineComponent({
2829 } ,
2930 } ,
3031 setup ( props ) {
32+ const { globalConfig } = useConfig ( 'colorPicker' ) ;
3133 const baseClassName = useBaseClassName ( ) ;
3234 const modeValue = ref ( props . mode ) ;
3335 watch (
@@ -37,8 +39,10 @@ export default defineComponent({
3739 } ,
3840 ) ;
3941 return {
42+ globalConfig,
4043 baseClassName,
4144 modeValue,
45+ COLOR_MODES ,
4246 } ;
4347 } ,
4448 render ( ) {
@@ -49,23 +53,19 @@ export default defineComponent({
4953 return (
5054 < div class = { `${ baseClassName } __head` } >
5155 < div class = { `${ baseClassName } __mode` } >
52- { this . colorModes ?. length === 1 ? (
53- COLOR_MODES [ this . colorModes [ 0 ] ]
54- ) : (
55- < TRadioGroup
56- variant = "default-filled"
57- size = "small"
58- disabled = { this . disabled }
59- v-model = { this . modeValue }
60- onChange = { this . handleModeChange }
61- >
62- { Object . keys ( COLOR_MODES ) . map ( ( key ) => (
63- < TRadioButton key = { key } value = { key } >
64- { COLOR_MODES [ key ] }
65- </ TRadioButton >
66- ) ) }
67- </ TRadioGroup >
68- ) }
56+ < TRadioGroup
57+ variant = "default-filled"
58+ size = "small"
59+ disabled = { this . disabled }
60+ v-model = { this . modeValue }
61+ onChange = { this . handleModeChange }
62+ >
63+ { this . colorModes . map ( ( key ) => (
64+ < TRadioButton key = { key } value = { key } >
65+ { Reflect . get ( this . globalConfig , COLOR_MODES [ key as keyof typeof COLOR_MODES ] ) }
66+ </ TRadioButton >
67+ ) ) }
68+ </ TRadioGroup >
6969 </ div >
7070 </ div >
7171 ) ;
0 commit comments