refactor(color-picker): component optimization v2 (#5148)

* refactor(color-picker): components

* refactor(color-picker): format switch render to setup return

* refactor(color-picker): inputs switch render to setup return

* refactor(color-picker): alpha switch render to setup return

* refactor(color-picker): hue switch render to setup return

* refactor(color-picker): panel switch render to setup return

* refactor(color-picker): linear-gradient switch render to setup return

* refactor(color-picker): saturation switch render to setup return

* refactor(color-picker): slider switch render to setup return

* refactor(color-picker): swatches switch render to setup return

* fix(color-picker): panel style path

* fix(color-picker): trigger vmodel value.value

packages/components/color-picker/color-picker-panel.tsx

@@ -1,6 +1,6 @@
 import { computed, defineComponent } from 'vue';
 import props from './props';
-import ColorPanel from './panel';
+import ColorPanel from './components/panel';
 import { usePrefixClass } from '../hooks/useConfig';
 import { pickBy } from 'lodash-es';
 

packages/components/color-picker/color-picker.tsx

@@ -3,7 +3,7 @@ import useVModel from '../hooks/useVModel';
 import { useTNodeDefault } from '../hooks/tnode';
 import props from './props';
 import { Popup as TPopup } from '../popup';
-import ColorPanel from './panel';
+import ColorPanel from './components/panel';
 import DefaultTrigger from './components/trigger';
 import { TdColorContext } from './types';
 import { useBaseClassName } from './hooks';

packages/components/color-picker/panel/format/index.tsx → packages/components/color-picker/components/format/index.tsx

@@ -47,44 +47,38 @@ export default defineComponent({
       props.onModeChange(v);
     };
 
-    return {
-      formatModel,
-      baseClassName,
-      handleModeChange,
-    };
-  },
-  render() {
-    const { baseClassName, handleModeChange } = this;
-    const newProps = {
-      ...this.$props,
-      format: this.formatModel,
-    };
-    const selectInputProps = {
-      ...((this.selectInputProps as Object) || {}),
-    };
-    return (
-      <div class={`${baseClassName}__format`}>
-        <div class={`${baseClassName}__format--item`}>
-          <TSelect
-            size="small"
-            class={`${baseClassName}__format-mode-select`}
-            selectInputProps={{ ...selectInputProps }}
-            popupProps={{
-              overlayClassName: `${baseClassName}__select-options`,
-              ...(selectInputProps as TdSelectInputProps).popupProps,
-            }}
-            v-model={this.formatModel}
-            onChange={handleModeChange}
-          >
-            {FORMATS.map((item) => (
-              <TOption key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />
-            ))}
-          </TSelect>
+    return () => {
+      const newProps = {
+        ...props,
+        format: formatModel.value,
+      };
+      const selectInputProps = {
+        ...((props.selectInputProps as Object) || {}),
+      };
+      return (
+        <div class={`${baseClassName.value}__format`}>
+          <div class={`${baseClassName.value}__format--item`}>
+            <TSelect
+              size="small"
+              class={`${baseClassName.value}__format-mode-select`}
+              selectInputProps={{ ...selectInputProps }}
+              popupProps={{
+                overlayClassName: `${baseClassName.value}__select-options`,
+                ...(selectInputProps as TdSelectInputProps).popupProps,
+              }}
+              v-model={formatModel}
+              onChange={handleModeChange}
+            >
+              {FORMATS.map((item) => (
+                <TOption key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />
+              ))}
+            </TSelect>
+          </div>
+          <div class={`${baseClassName.value}__format--item`}>
+            <FormatInputs {...newProps} />
+          </div>
         </div>
-        <div class={`${baseClassName}__format--item`}>
-          <FormatInputs {...newProps} />
-        </div>
-      </div>
-    );
+      );
+    };
   },
 });

packages/components/color-picker/panel/format/inputs.tsx → packages/components/color-picker/components/format/inputs.tsx

@@ -104,60 +104,55 @@ export default defineComponent({
       props.onInputChange(value, modelValue.a / 100, key, v);
     };
 
-    return {
-      modelValue,
-      inputConfigs,
-      handleChange,
-    };
-  },
-  render() {
-    const inputProps = {
-      ...((this.inputProps as any) || {}),
+    return () => {
+      const inputProps = {
+        ...((props.inputProps as any) || {}),
+      };
+      return (
+        <div class="input-group">
+          {inputConfigs.value.map((config) => {
+            return (
+              <div
+                class="input-group__item"
+                key={config.key}
+                style={{
+                  flex: config.flex || 1,
+                }}
+              >
+                {config.type === 'input' ? (
+                  <TInput
+                    {...inputProps}
+                    align="center"
+                    size="small"
+                    disabled={props.disabled}
+                    v-model={modelValue[config.key]}
+                    maxlength={props.format === 'HEX' ? 9 : undefined}
+                    title={modelValue[config.key]}
+                    onBlur={(v: string) => handleChange(config.key, v)}
+                    onEnter={(v: string) => handleChange(config.key, v)}
+                  />
+                ) : (
+                  <TInputNumber
+                    {...inputProps}
+                    align="center"
+                    size="small"
+                    disabled={props.disabled}
+                    v-model={modelValue[config.key]}
+                    title={modelValue[config.key]}
+                    min={config.min}
+                    max={config.max}
+                    step={1}
+                    format={config.format}
+                    theme="normal"
+                    onBlur={(v: number) => handleChange(config.key, v)}
+                    onEnter={(v: number) => handleChange(config.key, v)}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      );
     };
-    return (
-      <div class="input-group">
-        {this.inputConfigs.map((config) => {
-          return (
-            <div
-              class="input-group__item"
-              key={config.key}
-              style={{
-                flex: config.flex || 1,
-              }}
-            >
-              {config.type === 'input' ? (
-                <TInput
-                  {...inputProps}
-                  align="center"
-                  size="small"
-                  disabled={this.disabled}
-                  v-model={this.modelValue[config.key]}
-                  maxlength={this.format === 'HEX' ? 9 : undefined}
-                  title={this.modelValue[config.key]}
-                  onBlur={(v: string) => this.handleChange(config.key, v)}
-                  onEnter={(v: string) => this.handleChange(config.key, v)}
-                />
-              ) : (
-                <TInputNumber
-                  {...inputProps}
-                  align="center"
-                  size="small"
-                  disabled={this.disabled}
-                  v-model={this.modelValue[config.key]}
-                  title={this.modelValue[config.key]}
-                  min={config.min}
-                  max={config.max}
-                  step={1}
-                  format={config.format}
-                  theme="normal"
-                  onBlur={(v: number) => this.handleChange(config.key, v)}
-                  onEnter={(v: number) => this.handleChange(config.key, v)}
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    );
   },
 });

packages/components/color-picker/panel/alpha.tsx → packages/components/color-picker/components/panel/alpha.tsx

@@ -1,7 +1,7 @@
 import { computed, defineComponent, PropType } from 'vue';
 import ColorSlider from './slider';
-import { Color } from '../utils';
-import { useBaseClassName } from '../hooks';
+import { Color } from '../../utils';
+import { useBaseClassName } from '../../hooks';
 
 export default defineComponent({
   name: 'AlphaSlider',
@@ -31,25 +31,20 @@ export default defineComponent({
         background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${props.color.rgb})`,
       };
     });
-    return {
-      baseClassName,
-      railStyle,
-      handleChange,
+
+    return () => {
+      return (
+        <ColorSlider
+          class={[`${baseClassName.value}__alpha`, `${baseClassName.value}--bg-alpha`]}
+          color={props.color}
+          value={props.color.alpha * 100}
+          onChange={handleChange}
+          rail-style={railStyle.value}
+          max-value={100}
+          disabled={props.disabled}
+          type="alpha"
+        />
+      );
     };
   },
-  render() {
-    const { baseClassName } = this;
-    return (
-      <ColorSlider
-        class={[`${baseClassName}__alpha`, `${baseClassName}--bg-alpha`]}
-        color={this.color}
-        value={this.color.alpha * 100}
-        onChange={this.handleChange}
-        rail-style={this.railStyle}
-        max-value={100}
-        disabled={this.disabled}
-        type="alpha"
-      />
-    );
-  },
 });

packages/components/color-picker/panel/base-props.ts → packages/components/color-picker/components/panel/base-props.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { Color } from '../utils';
+import { Color } from '../../utils';
 
 export default {
   /** 是否禁用组件 */

packages/components/color-picker/panel/header.tsx → packages/components/color-picker/components/panel/header.tsx

@@ -1,11 +1,11 @@
 import { defineComponent, PropType, ref, watch } from 'vue';
 
-import props from '../props';
+import props from '../../props';
 import { COLOR_MODES } from '@tdesign/common-js/color-picker/constants';
-import { RadioGroup as TRadioGroup, RadioButton as TRadioButton } from '../../radio';
-import { TdColorModes } from '../types';
-import { useBaseClassName } from '../hooks';
-import { useConfig } from '../../hooks';
+import { RadioGroup as TRadioGroup, RadioButton as TRadioButton } from '../../../radio';
+import { TdColorModes } from '../../types';
+import { useBaseClassName } from '../../hooks';
+import { useConfig } from '../../../hooks';
 
 export default defineComponent({
   name: 'PanelHeader',

packages/components/color-picker/components/panel/hue.tsx

@@ -0,0 +1,27 @@
+import { defineComponent } from 'vue';
+import ColorSlider from './slider';
+import { useBaseClassName } from '../../hooks';
+import baseProps from './base-props';
+
+export default defineComponent({
+  name: 'HueSlider',
+
+  inheritAttrs: false,
+  props: baseProps,
+  setup(props) {
+    const baseClassName = useBaseClassName();
+
+    return () => {
+      return (
+        <ColorSlider
+          class={`${baseClassName.value}__hue`}
+          color={props.color}
+          value={props.color.hue}
+          onChange={props.onChange}
+          disabled={props.disabled}
+          type="hue"
+        />
+      );
+    };
+  },
+});