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

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

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

@@ -150,6 +150,7 @@ export default defineComponent({
               <t-input
                 {...inputProps}
                 align="center"
+                size="small"
                 disabled={this.disabled}
                 v-model={this.modelValues[config.key]}
                 maxlength={this.format === 'HEX' ? 9 : undefined}
@@ -162,6 +163,7 @@ export default defineComponent({
                 {...inputProps}
                 align="center"
                 theme="normal"
+                size="small"
                 disabled={this.disabled}
                 v-model={this.modelValues[config.key]}
                 title={this.modelValues[config.key]}

src/color-picker/panel/header.tsx

@@ -32,9 +32,6 @@ export default defineComponent({
   setup(props) {
     const baseClassName = useBaseClassName();
     const modeValue = ref(props.mode);
-    const handleClosePopup = () => {
-      props.togglePopup?.(false);
-    };
     watch(
       () => props.mode,
       (v) => {
@@ -44,10 +41,12 @@ export default defineComponent({
     return {
       baseClassName,
       modeValue,
-      handleClosePopup,
     };
   },
   render() {
+    if (this.colorModes?.length === 1) {
+      return null;
+    }
     const { baseClassName } = this;
     return (
       <div class={`${baseClassName}__head`}>
@@ -69,15 +68,6 @@ export default defineComponent({
             </t-radio-group>
           )}
         </div>
-        {this.closeBtn ? (
-          <span
-            role="button"
-            class={[`${baseClassName}__icon`, `${baseClassName}__close`]}
-            onClick={this.handleClosePopup}
-          >
-            <close-icon />
-          </span>
-        ) : null}
       </div>
     );
   },

src/color-picker/panel/hue.tsx

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

src/color-picker/panel/index.tsx

@@ -323,6 +323,8 @@ export default defineComponent({
       );
     };
 
+    const isGradient = this.mode === 'linear-gradient';
+
     return (
       <div class={[`${baseClassName}__panel`, this.disabled ? statusClassNames.disabled : false]}>
         <panel-header
@@ -335,14 +337,27 @@ export default defineComponent({
           handleModeChange={this.handleModeChange}
         />
         <div class={[`${baseClassName}__body`]}>
-          {this.mode === 'linear-gradient' ? (
+          {isGradient ? (
             <linear-gradient color={this.color} disabled={this.disabled} handleChange={this.handleGradientChange} />
           ) : null}
           <saturation-panel color={this.color} disabled={this.disabled} handleChange={this.handleSatAndValueChange} />
-          <hue-slider color={this.color} disabled={this.disabled} handleChange={this.handleHueChange} />
-          {this.enableAlpha ? (
-            <alpha-slider color={this.color} disabled={this.disabled} handleChange={this.handleAlphaChange} />
-          ) : null}
+          <div class={[`${baseClassName}__sliders-wrapper`]}>
+            <div class={[`${baseClassName}__sliders`]}>
+              <hue-slider color={this.color} disabled={this.disabled} handleChange={this.handleHueChange} />
+              {this.enableAlpha ? (
+                <alpha-slider color={this.color} disabled={this.disabled} handleChange={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>
+
           <format-panel
             {...{
               props: {

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

@@ -272,6 +272,7 @@ export default defineComponent({
         <div class={`${baseClassName}__gradient-degree`} title={`${degree}deg`}>
           <t-input-number
             theme="normal"
+            size="small"
             min={0}
             max={360}
             step={1}

src/color-picker/panel/slider.tsx

@@ -30,6 +30,10 @@ export default defineComponent({
     railStyle: {
       type: Object as PropType<any>,
     },
+    type: {
+      type: String as PropType<'hue' | 'alpha'>,
+      default: 'hue',
+    },
   },
   setup(props, { emit }) {
     const baseClassName = useBaseClassName();
@@ -96,12 +100,18 @@ export default defineComponent({
   },
   render() {
     const {
-      baseClassName, className, railStyle, styles,
+      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 class={`${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>
     );
   },