Feature/color picker

src/color-picker/panel/alpha.tsx

@@ -48,6 +48,7 @@ export default defineComponent({
         rail-style={this.railStyle}
         max-value={100}
         disabled={this.disabled}
+        type="alpha"
       />
     );
   },

src/color-picker/panel/format/index.tsx

@@ -66,7 +66,8 @@ export default defineComponent({
       <div class={`${baseClassName}__format`}>
         <div class={`${baseClassName}__format--item`}>
           <TSelect
-            autoWidth={true}
+            size="small"
+            class={`${baseClassName}__format-mode-select`}
             {...selectInputProps}
             popupProps={{
               overlayClassName: `${baseClassName}__select-options`,

src/color-picker/panel/format/inputs.tsx

@@ -125,6 +125,7 @@ export default defineComponent({
                 <TInput
                   {...inputProps}
                   align="center"
+                  size="small"
                   disabled={this.disabled}
                   v-model={this.modelValue[config.key]}
                   maxlength={this.format === 'HEX' ? 9 : undefined}
@@ -136,6 +137,7 @@ export default defineComponent({
                 <TInputNumber
                   {...inputProps}
                   align="center"
+                  size="small"
                   disabled={this.disabled}
                   v-model={this.modelValue[config.key]}
                   title={this.modelValue[config.key]}

src/color-picker/panel/header.tsx

@@ -27,9 +27,6 @@ export default defineComponent({
   setup(props) {
     const baseClassName = useBaseClassName();
     const modeValue = ref(props.mode);
-    const handleClosePopup = () => {
-      props.togglePopup?.(false);
-    };
     const handleModeChange = (v: string) => props.onModeChange(v);
     watch(
       () => props.mode,
@@ -39,10 +36,12 @@ export default defineComponent({
       baseClassName,
       modeValue,
       handleModeChange,
-      handleClosePopup,
     };
   },
   render() {
+    if (this.colorModes?.length === 1) {
+      return null;
+    }
     const { baseClassName } = this;
     return (
       <div class={`${baseClassName}__head`}>
@@ -64,15 +63,6 @@ export default defineComponent({
             </TRadioGroup>
           )}
         </div>
-        {this.closeBtn ? (
-          <span
-            role="button"
-            class={[`${baseClassName}__icon`, `${baseClassName}__close`]}
-            onClick={this.handleClosePopup}
-          >
-            <CloseIcon />
-          </span>
-        ) : null}
       </div>
     );
   },

src/color-picker/panel/hue.tsx

@@ -24,6 +24,7 @@ export default defineComponent({
         value={this.color.hue}
         onChange={this.onChange}
         disabled={this.disabled}
+        type="hue"
       />
     );
   },

src/color-picker/panel/index.tsx

@@ -311,19 +311,31 @@ export default defineComponent({
       );
     };
 
+    const isGradient = this.mode === 'linear-gradient';
     return (
-      <div
-        class={[`${baseClassName}__panel`, this.disabled ? statusClassNames.disabled : false]}
-        onClick={(e) => e.stopPropagation()}
-      >
+      <div class={[`${baseClassName}__panel`, this.disabled ? statusClassNames.disabled : false]}>
         <PanelHeader {...this.$props} mode={this.mode} onModeChange={this.handleModeChange} />
         <div class={[`${baseClassName}__body`]}>
-          {this.mode === 'linear-gradient' ? (
-            <LinearGradient {...baseProps} onChange={this.handleGradientChange} />
-          ) : null}
+          {isGradient ? <LinearGradient {...baseProps} onChange={this.handleGradientChange} /> : null}
+
           <SaturationPanel {...baseProps} onChange={this.handleSatAndValueChange} />
-          <HueSlider {...baseProps} onChange={this.handleHueChange} />
-          {this.enableAlpha ? <AlphaSlider {...baseProps} onChange={this.handleAlphaChange} /> : null}
+
+          <div class={[`${baseClassName}__sliders-wrapper`]}>
+            <div class={[`${baseClassName}__sliders`]}>
+              <HueSlider {...baseProps} onChange={this.handleHueChange} />
+              {this.enableAlpha ? <AlphaSlider {...baseProps} onChange={this.handleAlphaChange} /> : null}
+            </div>
+
+            <div class={[`${baseClassName}__sliders-preview`, `${baseClassName}--bg-alpha`]}>
+              <span
+                class={`${baseClassName}__sliders-preview-inner`}
+                style={{
+                  background: isGradient ? this.color.linearGradient : this.color.rgba,
+                }}
+              />
+            </div>
+          </div>
+
           <FormatPanel
             {...this.$props}
             color={this.color}

src/color-picker/panel/linear-gradient.tsx

@@ -262,6 +262,7 @@ export default defineComponent({
         </div>
         <div class={`${baseClassName}__gradient-degree`} title={`${degree}deg`}>
           <TInputNumber
+            size="small"
             theme="normal"
             min={0}
             max={360}

src/color-picker/panel/slider.tsx

@@ -23,6 +23,10 @@ export default defineComponent({
     railStyle: {
       type: Object as PropType<any>,
     },
+    type: {
+      type: String as PropType<'hue' | 'alpha'>,
+      default: 'hue',
+    },
   },
   setup(props) {
     const baseClassName = useBaseClassName();
@@ -87,11 +91,17 @@ export default defineComponent({
     };
   },
   render() {
-    const { baseClassName, className, railStyle, styles } = this;
+    const { baseClassName, className, railStyle, styles, type, color } = this;
+    const paddingStyle = {
+      background: `linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, ${color.rgb} 93%, ${color.rgb} 100%)`,
+    };
     return (
-      <div class={[`${baseClassName}__slider`, className]} ref="refPanel">
-        <div class={`${baseClassName}__rail`} style={railStyle}></div>
-        <span class={[`${baseClassName}__thumb`]} role="slider" tabindex={0} ref="refThumb" style={styles}></span>
+      <div class={[`${baseClassName}__slider-wrapper`, `${baseClassName}__slider-wrapper--${type}-type`]}>
+        {type === 'alpha' && <div className={`${baseClassName}__slider-padding`} style={paddingStyle} />}
+        <div class={[`${baseClassName}__slider`, className]} ref="refPanel">
+          <div class={`${baseClassName}__rail`} style={railStyle}></div>
+          <span class={[`${baseClassName}__thumb`]} role="slider" tabindex={0} ref="refThumb" style={styles}></span>
+        </div>
       </div>
     );
   },