antd-solid 0.0.35 → 0.0.37

package/es/ColorPicker/ColorPickerInput.js

@@ -52,7 +52,7 @@ const ColorPickerInput = () => {
           },
           get children() {
             return createComponent(Input, {
-              "class": "ant-color-picker-hex-input",
+              rootClass: "ant-color-picker-hex-input",
               size: "small",
               get value() {
                 return hexInputValue();
@@ -73,7 +73,7 @@ const ColorPickerInput = () => {
               get prefix() {
                 return _tmpl$3();
               },
-              style: {
+              rootStyle: {
                 '--ant-input-font-size': '12px'
               }
             });
@@ -100,7 +100,7 @@ const ColorPickerInput = () => {
               min: 0,
               max: 359,
               precision: 0,
-              style: InputNumberStyle
+              rootStyle: InputNumberStyle
             }), null);
             insert(_el$2, createComponent(InputNumber, {
               size: "small",
@@ -119,7 +119,7 @@ const ColorPickerInput = () => {
               max: 100,
               precision: 0,
               formatter: value => `${value || 0}%`,
-              style: InputNumberStyle
+              rootStyle: InputNumberStyle
             }), null);
             insert(_el$2, createComponent(InputNumber, {
               size: "small",
@@ -138,7 +138,7 @@ const ColorPickerInput = () => {
               max: 100,
               precision: 0,
               formatter: value => `${value || 0}%`,
-              style: InputNumberStyle
+              rootStyle: InputNumberStyle
             }), null);
             return _el$2;
           }
@@ -164,7 +164,7 @@ const ColorPickerInput = () => {
               min: 0,
               max: 255,
               precision: 0,
-              style: InputNumberStyle
+              rootStyle: InputNumberStyle
             }), null);
             insert(_el$3, createComponent(InputNumber, {
               size: "small",
@@ -182,7 +182,7 @@ const ColorPickerInput = () => {
               min: 0,
               max: 255,
               precision: 0,
-              style: InputNumberStyle
+              rootStyle: InputNumberStyle
             }), null);
             insert(_el$3, createComponent(InputNumber, {
               size: "small",
@@ -200,7 +200,7 @@ const ColorPickerInput = () => {
               min: 0,
               max: 255,
               precision: 0,
-              style: InputNumberStyle
+              rootStyle: InputNumberStyle
             }), null);
             return _el$3;
           }
@@ -227,7 +227,7 @@ const ColorPickerInput = () => {
           max: 100,
           precision: 0,
           formatter: value => `${value || 0}%`,
-          get style() {
+          get rootStyle() {
             return {
               ...InputNumberStyle,
               'margin-left': 'var(--ant-margin-xxs)'

package/es/ColorPicker/ColorPickerSelect.js

@@ -1,5 +1,5 @@
 import { delegateEvents, effect, template, use } from 'solid-js/web';
-import { useContext, createMemo } from 'solid-js';
+import { useContext } from 'solid-js';
 import { clamp } from 'lodash-es';
 import ColorPickerContext from './context.js';
 import Color from './color.js';
@@ -8,8 +8,11 @@ import { setupGlobalDrag } from '../utils/setupGlobalDrag.js';
 var _tmpl$ = /*#__PURE__*/template(`<div class="h-160px rounded-[--ant-border-radius-sm] cursor-pointer relative overflow-hidden"><div class="absolute border-2px border-solid border-[--ant-color-bg-container] rounded-1/2 w-16px h-16px -translate-1/2">`);
 const ColorPickerSelect = () => {
   let ref;
-  const context = useContext(ColorPickerContext);
-  const color = createMemo(() => context?.color() ?? new Color());
+  const {
+    color,
+    setColor: _setColor,
+    hsvColor
+  } = useContext(ColorPickerContext);
   const setColor = (e, completed) => {
     if (!ref) return;
     const rect = ref.getBoundingClientRect();
@@ -19,10 +22,10 @@ const ColorPickerSelect = () => {
       clientWidth,
       clientHeight
     } = ref;
-    const hsv = color().toHsv();
+    const hsv = hsvColor().toHsv();
     hsv.s = clamp(offsetX / clientWidth, 0, 1);
     hsv.v = clamp(1 - offsetY / clientHeight, 0, 1);
-    context?.setColor(new Color(hsv), completed);
+    _setColor(new Color(hsv), completed);
   };
   return (() => {
     var _el$ = _tmpl$(),
@@ -43,12 +46,12 @@ const ColorPickerSelect = () => {
       },
       // eslint-disable-next-line solid/reactivity
       () => {
-        if (isDrag) context?.setColor(color(), true);
+        if (isDrag) _setColor(color(), true);
       });
     };
     _el$2.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary), 0 0 0 1px var(--ant-color-fill-secondary)");
     effect(_p$ => {
-      var _v$ = color().toHueRgbString(),
+      var _v$ = hsvColor().toHueRgbString(),
         _v$2 = `${color().toHsv().s * 100}%`,
         _v$3 = `${(1 - color().toHsv().v) * 100}%`,
         _v$4 = color().toRgbString();

package/es/ColorPicker/ColorPickerSlider.js

@@ -1,5 +1,5 @@
 import { delegateEvents, insert, createComponent, memo, effect, className, template } from 'solid-js/web';
-import { useContext, createMemo, Show } from 'solid-js';
+import { useContext, Show } from 'solid-js';
 import cs from 'classnames';
 import ColorPickerContext from './context.js';
 import Slider from '../Slider/index.js';
@@ -10,8 +10,14 @@ var _tmpl$ = /*#__PURE__*/template(`<div class="flex gap-[--ant-margin-sm] items
   _tmpl$2 = /*#__PURE__*/template(`<span class="shrink-0 text-18px cursor-pointer">`),
   _tmpl$3 = /*#__PURE__*/template(`<div tabindex=0>`);
 const ColorPickerSlider = () => {
-  const context = useContext(ColorPickerContext);
-  const color = createMemo(() => context?.color() ?? new Color());
+  const {
+    color,
+    setColor,
+    h,
+    setH,
+    hsvColor,
+    disabledAlpha
+  } = useContext(ColorPickerContext);
   return (() => {
     var _el$ = _tmpl$(),
       _el$2 = _el$.firstChild,
@@ -19,18 +25,19 @@ const ColorPickerSlider = () => {
       _el$4 = _el$3.firstChild;
     insert(_el$2, createComponent(Slider, {
       get value() {
-        return color().toHsv().h / 3.55;
+        return h() / 3.55;
       },
       onChange: v => {
         const hsv = color().toHsv();
         hsv.h = Math.round(v * 3.55);
-        context?.setColor(new Color(hsv));
+        setH(hsv.h);
+        setColor(new Color(hsv));
       },
       onChangeComplete: () => {
-        context?.setColor(color(), true);
+        setColor(color(), true);
       },
       tooltip: false,
-      handle: () => getSliderHandle(color().toHueRgbString()),
+      handle: () => getSliderHandle(hsvColor().toHueRgbString()),
       style: {
         '--ant-slider-rail-size': '8px',
         '--ant-slider-handle-size': '10px',
@@ -45,7 +52,7 @@ const ColorPickerSlider = () => {
     }), null);
     insert(_el$2, createComponent(Show, {
       get when() {
-        return !context?.disabledAlpha();
+        return !disabledAlpha();
       },
       get children() {
         return createComponent(Slider, {
@@ -53,10 +60,10 @@ const ColorPickerSlider = () => {
             return color().a * 100;
           },
           onChange: v => {
-            context?.setColor(color().clone().setAlpha(v / 100));
+            setColor(color().clone().setAlpha(v / 100));
           },
           onChangeComplete: () => {
-            context?.setColor(color(), true);
+            setColor(color(), true);
           },
           min: 0,
           step: 1,
@@ -91,7 +98,7 @@ const ColorPickerSlider = () => {
           if (!window.EyeDropper) return;
           const eyeDropper = new window.EyeDropper();
           eyeDropper.open().then(result => {
-            context?.setColor(new Color(result.sRGBHex), true);
+            setColor(new Color(result.sRGBHex), true);
           }).catch(console.error);
         };
         insert(_el$5, createComponent(ColorPickUpSvg, {}));

package/es/ColorPicker/context.d.ts

@@ -1,9 +1,12 @@
-import { type Accessor } from 'solid-js';
+import { type Accessor, type Setter } from 'solid-js';
 import type Color from './color';
 interface ColorPickerContextProps {
     color: Accessor<Color>;
     setColor: (color: Color, completed?: boolean) => void;
     disabledAlpha: Accessor<boolean>;
+    h: Accessor<number>;
+    setH: Setter<number>;
+    hsvColor: Accessor<Color>;
 }
 declare const ColorPickerContext: import("solid-js").Context<ColorPickerContextProps | undefined>;
 export default ColorPickerContext;

package/es/ColorPicker/index.js

@@ -1,6 +1,6 @@
 import { delegateEvents, createComponent, insert, effect, className, template } from 'solid-js/web';
 import cs from 'classnames';
-import { createSignal, untrack, createRenderEffect, createMemo, Show } from 'solid-js';
+import { createSignal, untrack, createComputed, createMemo, on, Show } from 'solid-js';
 import Color from './color.js';
 import Element from '../Element/index.js';
 import Popover from '../Popover/index.js';
@@ -18,8 +18,8 @@ var _tmpl$ = /*#__PURE__*/template(`<div class="flex justify-end mb-[--ant-margi
 // TODO 超出范围
 const ColorPicker = props => {
   const isControlled = () => Object.keys(props).includes('value');
-  const [innerColor, _setInnerColor] = createSignal(untrack(() => new Color(props.defaultValue)));
-  createRenderEffect(() => {
+  const [color, _setInnerColor] = createSignal(untrack(() => new Color(props.defaultValue)));
+  createComputed(() => {
     if (isControlled()) {
       _setInnerColor(new Color(props.value));
     }
@@ -33,12 +33,28 @@ const ColorPicker = props => {
   };
   const [open, setOpen] = createSignal(false);
   const size = useComponentSize(() => props.size);
-  const color = createMemo(() => isControlled() ? new Color(props.value) : innerColor());
+  const [h, setH] = createSignal(0);
+  const hsvColor = createMemo(() => {
+    const hsv = color().toHsv();
+    return new Color({
+      h: h(),
+      s: hsv.s,
+      v: hsv.v
+    });
+  });
+  // 只有在 hex 被修改时才更新
+  createComputed(on(() => color().toHex8String(), (hex, prev) => {
+    if (hex === prev) return;
+    setH(new Color(hex).toHsv().h);
+  }));
   const getPopoverContent = close => createComponent(ColorPickerContext.Provider, {
     value: {
-      color: innerColor,
+      color,
       setColor,
-      disabledAlpha
+      disabledAlpha,
+      h,
+      setH,
+      hsvColor
     },
     get children() {
       return [createComponent(Show, {

package/es/Input/index.js

@@ -49,7 +49,7 @@ function CommonInput(props) {
   const {
     compact
   } = useContext(CompactContext);
-  const [_, inputProps] = splitProps(props, ['defaultValue', 'value', 'onChange', 'onPressEnter', 'onKeyDown', 'size', 'autoFocus', 'status', 'actions', 'addonBefore', 'addonAfter', 'prefix', 'suffix', 'allowClear']);
+  const [_, inputProps] = splitProps(props, ['defaultValue', 'value', 'onChange', 'onPressEnter', 'onKeyDown', 'size', 'autoFocus', 'status', 'actions', 'addonBefore', 'addonAfter', 'prefix', 'suffix', 'allowClear', 'rootClass', 'rootStyle']);
   let inputRef;
   const foucs = useFocus(() => inputRef);
   onMount(() => {

package/es/Tooltip/index.js

@@ -11,8 +11,8 @@ import useHover from '../hooks/useHover.js';
 import Element$1 from '../Element/index.js';
 import TooltipContext from './context.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class=relative><div>`);
+var _tmpl$ = /*#__PURE__*/template(`<div class="relative overflow-auto [box-shadow:--ant-box-shadow] rounded-[--ant-border-radius-lg]"><div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div>`);
 const unwrapContent = (content, close) => {
   return typeof content === 'function' ? content(close) : content;
 };
@@ -312,7 +312,7 @@ const Tooltip = _props => {
       switch (mainPlacement) {
         case 'top':
           translateY = _childrenRect.top - arrowOffset() - defaultOffset - _contentSize.height;
-          setMaxHeight(translateY);
+          setMaxHeight(translateY + _contentSize.height);
           break;
         case 'bottom':
           translateY = _childrenRect.bottom + arrowOffset() + defaultOffset;
@@ -320,7 +320,7 @@ const Tooltip = _props => {
           break;
         case 'left':
           translateX = _childrenRect.left - arrowOffset() - defaultOffset - _contentSize.width;
-          setMaxWidth(translateX);
+          setMaxWidth(translateX + _contentSize.width);
           break;
         case 'right':
           translateX = _childrenRect.right + arrowOffset() + defaultOffset;
@@ -443,48 +443,58 @@ const Tooltip = _props => {
         get children() {
           return createComponent(Element$1, {
             get ["class"]() {
-              return cs('z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[--ant-color-text] leading-[--ant-line-height] overflow-auto', open() ? 'block' : 'hidden');
+              return cs('z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[--ant-color-text] leading-[--ant-line-height]', open() ? 'block' : 'hidden');
             },
             get style() {
               return {
-                transform: `translate(${_translateX()}px, ${_translateY()}px)`,
-                'max-width': typeof maxWidth() === 'number' ? `${maxWidth()}px` : undefined,
-                'max-height': typeof maxHeight() === 'number' ? `${maxHeight()}px` : undefined
+                transform: `translate(${_translateX()}px, ${_translateY()}px)`
               };
             },
             onClick: e => {
               e.stopPropagation();
             },
             get children() {
-              var _el$ = _tmpl$2(),
-                _el$2 = _el$.firstChild;
-              use(setPopupRef, _el$);
-              spread(_el$2, mergeProps$1(() => props.contentHTMLAttributes, {
-                get ["class"]() {
-                  return cs(props.contentHTMLAttributes?.class, 'px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto translate-x-[--inner-translate-x] translate-y-[--inner-translate-y]', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]');
-                }
-              }), false, true);
-              insert(_el$2, createComponent(TooltipContext.Provider, {
-                value: context,
-                get children() {
-                  return unwrapContent(props.content, () => setOpen(false));
-                }
-              }));
-              insert(_el$, createComponent(Show, {
+              return [(() => {
+                var _el$ = _tmpl$(),
+                  _el$2 = _el$.firstChild;
+                use(setPopupRef, _el$2);
+                spread(_el$2, mergeProps$1(() => props.contentHTMLAttributes, {
+                  get ["class"]() {
+                    return cs(props.contentHTMLAttributes?.class, 'px-8px py-6px translate-x-[--inner-translate-x] translate-y-[--inner-translate-y]', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]');
+                  }
+                }), false, true);
+                insert(_el$2, createComponent(TooltipContext.Provider, {
+                  value: context,
+                  get children() {
+                    return unwrapContent(props.content, () => setOpen(false));
+                  }
+                }));
+                effect(_p$ => {
+                  var _v$ = typeof maxWidth() === 'number' ? `${maxWidth()}px` : undefined,
+                    _v$2 = typeof maxHeight() === 'number' ? `${maxHeight()}px` : undefined;
+                  _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("max-width", _v$) : _el$.style.removeProperty("max-width"));
+                  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("max-height", _v$2) : _el$.style.removeProperty("max-height"));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$;
+              })(), createComponent(Show, {
                 get when() {
                   return props.arrow;
                 },
                 get children() {
-                  var _el$3 = _tmpl$();
+                  var _el$3 = _tmpl$2();
                   effect(_p$ => {
-                    var _v$ = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
-                      _v$2 = {
+                    var _v$3 = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
+                      _v$4 = {
                         'clip-path': 'polygon(-100% -100%, 200% -100%, 200% 200%)',
                         'background-color': props.plain ? 'var(--ant-color-bg-container-tertiary)' : 'var(--ant-color-bg-spotlight)',
                         ...ARROW_STYLE_DICT[mergePlacement(reversedMainPlacement(), reversedMinorPlacement())]
                       };
-                    _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-                    _p$.t = style(_el$3, _v$2, _p$.t);
+                    _v$3 !== _p$.e && className(_el$3, _p$.e = _v$3);
+                    _p$.t = style(_el$3, _v$4, _p$.t);
                     return _p$;
                   }, {
                     e: undefined,
@@ -492,8 +502,7 @@ const Tooltip = _props => {
                   });
                   return _el$3;
                 }
-              }), null);
-              return _el$;
+              })];
             }
           });
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-solid",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "",
   "main": "dist/index.esm.js",
   "module": "es/index.js",