antd-solid 0.0.22 → 0.0.24

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { createComponent, Dynamic, mergeProps as mergeProps$1, insert, effect, className, style, template, use, spread, delegateEvents, memo, render, Portal, setAttribute } from 'solid-js/web';
+import { createComponent, Dynamic, mergeProps as mergeProps$1, insert, memo, spread, template, use, delegateEvents, render, Portal, effect, className, style, setAttribute } from 'solid-js/web';
 import { createContext, mergeProps, useContext, onMount, createMemo, untrack, splitProps, createSignal, children, Show, createComputed, on, createEffect, onCleanup, createRenderEffect, For, createSelector, Switch as Switch$1, Match, getOwner, runWithOwner } from 'solid-js';
 import cs from 'classnames';
 import { nanoid } from 'nanoid';
@@ -656,21 +656,16 @@ const Button$1 = _props => {
         }
       }), createComponent(Show, {
         get when() {
-          return resolvedChildren();
+          return memo(() => !!resolvedChildren())() && !(props.hideChildrenWhenLoading && loading());
         },
         get children() {
           var _el$2 = _tmpl$2$v();
+          spread(_el$2, mergeProps$1(() => props.contentHTMLAttributes, {
+            get ["class"]() {
+              return cs('inline-block leading-inherit', props.contentHTMLAttributes?.class);
+            }
+          }), false, true);
           insert(_el$2, resolvedChildren);
-          effect(_p$ => {
-            var _v$ = cs('inline-block leading-inherit', props.contentClass),
-              _v$2 = props.contentStyle;
-            _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-            _p$.t = style(_el$2, _v$2, _p$.t);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
           return _el$2;
         }
       })];
@@ -817,11 +812,9 @@ const CompactContext = createContext({
 });
 
 var _tmpl$$M = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$u = /*#__PURE__*/template(`<div class=mr-4px>`),
-  _tmpl$3$j = /*#__PURE__*/template(`<span class="ml-4px i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
-  _tmpl$4$d = /*#__PURE__*/template(`<div class=ml-4px>`),
-  _tmpl$5$9 = /*#__PURE__*/template(`<div class="[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px">`),
-  _tmpl$6$3 = /*#__PURE__*/template(`<div><input>`);
+  _tmpl$2$u = /*#__PURE__*/template(`<span class="ml-4px i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
+  _tmpl$3$j = /*#__PURE__*/template(`<div class="[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px">`),
+  _tmpl$4$d = /*#__PURE__*/template(`<div><input>`);
 const statusClassDict$1 = {
   default: (disabled, foucs) => {
     if (disabled) {
@@ -910,19 +903,33 @@ function CommonInput(props) {
         },
         get children() {
           var _el$ = _tmpl$$M();
+          spread(_el$, mergeProps$1(() => props.addonBeforeHTMLAttributes, {
+            get ["class"]() {
+              return cs(props.addonBeforeHTMLAttributes?.class, 'ant-input-addon ant-input-addon-before', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-r-0');
+            }
+          }), false, true);
           insert(_el$, addonBefore);
-          effect(() => className(_el$, cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-r-0')));
           return _el$;
         }
       }), (() => {
-        var _el$2 = _tmpl$6$3(),
+        var _el$2 = _tmpl$4$d(),
           _el$4 = _el$2.firstChild;
+        spread(_el$2, mergeProps$1(() => props.affixWrapperHTMLAttributes, {
+          get ["class"]() {
+            return cs(props.affixWrapperHTMLAttributes?.class, 'ant-input-affix-wrapper', 'flex items-center w-full relative p:hover-child[input]:border-[--ant-color-primary] bg-[--ant-color-bg-container] p-[--ant-input-padding] border-1px border-solid', ['[--actions-display:none]', !props.disabled && 'hover:[--actions-display:block]'], statusClassDict$1[props.status ?? 'default'](!!props.disabled, foucs()));
+          }
+        }), false, true);
         insert(_el$2, createComponent(Show, {
           get when() {
             return !isNil(prefix());
           },
           get children() {
-            var _el$3 = _tmpl$2$u();
+            var _el$3 = _tmpl$$M();
+            spread(_el$3, mergeProps$1(() => props.prefixHTMLAttributes, {
+              get ["class"]() {
+                return cs(props.prefixHTMLAttributes?.class, 'mr-4px');
+              }
+            }), false, true);
             insert(_el$3, prefix);
             return _el$3;
           }
@@ -960,7 +967,7 @@ function CommonInput(props) {
             return showClearBtn();
           },
           get children() {
-            var _el$5 = _tmpl$3$j();
+            var _el$5 = _tmpl$2$u();
             _el$5.$$click = e => {
               e.stopPropagation();
               inputRef.value = '';
@@ -978,7 +985,12 @@ function CommonInput(props) {
             return !isNil(suffix());
           },
           get children() {
-            var _el$6 = _tmpl$4$d();
+            var _el$6 = _tmpl$$M();
+            spread(_el$6, mergeProps$1(() => props.suffixHTMLAttributes, {
+              get ["class"]() {
+                return cs(props.suffixHTMLAttributes?.class, 'ml-4px');
+              }
+            }), false, true);
             insert(_el$6, suffix);
             return _el$6;
           }
@@ -988,12 +1000,11 @@ function CommonInput(props) {
             return !isNil(actions());
           },
           get children() {
-            var _el$7 = _tmpl$5$9();
+            var _el$7 = _tmpl$3$j();
             insert(_el$7, actions);
             return _el$7;
           }
         }), null);
-        effect(() => className(_el$2, cs('ant-input-affix-wrapper', 'flex items-center w-full relative p:hover-child[input]:border-[--ant-color-primary] bg-[--ant-color-bg-container] p-[--ant-input-padding] border-1px border-solid', ['[--actions-display:none]', !props.disabled && 'hover:[--actions-display:block]'], statusClassDict$1[props.status ?? 'default'](!!props.disabled, foucs()))));
         return _el$2;
       })(), createComponent(Show, {
         get when() {
@@ -1001,8 +1012,12 @@ function CommonInput(props) {
         },
         get children() {
           var _el$8 = _tmpl$$M();
+          spread(_el$8, mergeProps$1(() => props.addonAfterHTMLAttributes, {
+            get ["class"]() {
+              return cs(props.addonAfterHTMLAttributes?.class, 'ant-input-addon ant-input-addon-after', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-l-0');
+            }
+          }), false, true);
           insert(_el$8, addonAfter);
-          effect(() => className(_el$8, cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-l-0')));
           return _el$8;
         }
       })];
@@ -1619,7 +1634,12 @@ const Drawer = _props => {
               typeof _ref$ === "function" ? _ref$(r$) : drawerRef = r$;
             },
             get ["class"]() {
-              return cs(props.class, '[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', 'inset-0 z-1000', isBody() ? 'fixed' : 'absolute');
+              return cs(props.class, '[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', 'inset-0 z-1000', !props.mask && {
+                left: '!right-auto',
+                right: '!left-auto',
+                top: '!bottom-auto',
+                bottom: '!top-auto'
+              }[props.placement], isBody() ? 'fixed' : 'absolute');
             },
             get style() {
               return {
@@ -2257,25 +2277,17 @@ const Tooltip = _props => {
             get children() {
               return [(() => {
                 var _el$ = _tmpl$$F();
+                spread(_el$, 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$, createComponent(TooltipContext.Provider, {
                   value: context,
                   get children() {
                     return unwrapContent(props.content, () => setOpen(false));
                   }
                 }));
-                effect(_p$ => {
-                  var _v$ = cs('px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto', 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)]'),
-                    _v$2 = {
-                      transform: 'translate(var(--inner-translate-x), var(--inner-translate-y))',
-                      ...props.contentStyle
-                    };
-                  _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-                  _p$.t = style(_el$, _v$2, _p$.t);
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined
-                });
                 return _el$;
               })(), createComponent(Show, {
                 get when() {
@@ -2284,14 +2296,14 @@ const Tooltip = _props => {
                 get children() {
                   var _el$2 = _tmpl$$F();
                   effect(_p$ => {
-                    var _v$3 = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
-                      _v$4 = {
+                    var _v$ = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
+                      _v$2 = {
                         '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$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
-                    _p$.t = style(_el$2, _v$4, _p$.t);
+                    _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+                    _p$.t = style(_el$2, _v$2, _p$.t);
                     return _p$;
                   }, {
                     e: undefined,
@@ -2402,8 +2414,10 @@ function RangeInput(props) {
         trigger: false,
         placement: "bottomLeft",
         arrow: false,
-        contentStyle: {
-          padding: 0
+        contentHTMLAttributes: {
+          style: {
+            padding: 0
+          }
         },
         content: () => (() => {
           var _el$8 = _tmpl$3$g();
@@ -2563,9 +2577,9 @@ function SelectInput(_props) {
     ...props.style
   }));
   return createComponent(Element$1, {
-    ref(r$) {
-      var _ref$ = select;
-      typeof _ref$ === "function" ? _ref$(r$) : select = r$;
+    ref: el => {
+      setRef(props, el);
+      select = el;
     },
     get ["class"]() {
       return cs('!p[.ant-input-addon]:my--1px !p[.ant-input-addon]:mx--12px', 'rounded-6px cursor-pointer inline-block text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', isCompact && 'ant-compact-item', props.class, props.disabled && 'cursor-not-allowed');
@@ -2585,13 +2599,16 @@ function SelectInput(_props) {
           return props.placement;
         },
         arrow: false,
-        contentStyle: {
-          padding: 0
+        contentHTMLAttributes: {
+          class: 'ant-select-dropdown',
+          style: {
+            padding: 0
+          }
         },
         content: () => (() => {
           var _el$5 = _tmpl$4$9();
-          var _ref$2 = tooltipContent;
-          typeof _ref$2 === "function" ? use(_ref$2, _el$5) : tooltipContent = _el$5;
+          var _ref$ = tooltipContent;
+          typeof _ref$ === "function" ? use(_ref$, _el$5) : tooltipContent = _el$5;
           insert(_el$5, () => props.content(() => setOpen(false)));
           effect(_$p => style(_el$5, {
             ...pick(style$1(), ['--ant-select-popup-font-size', '--ant-select-popup-match-width'])
@@ -2678,7 +2695,7 @@ function SelectInput(_props) {
             get fallback() {
               return createComponent(Show, {
                 get when() {
-                  return isUndefined(props.suffixIcon);
+                  return isUndefined(props.suffixIcon) || props.suffixIcon === true;
                 },
                 get fallback() {
                   return props.suffixIcon;
@@ -2796,12 +2813,15 @@ Empty.PRESENTED_IMAGE_SIMPLE = PRESENTED_IMAGE_SIMPLE;
 var _tmpl$$y = /*#__PURE__*/template(`<div class=p-2px>`),
   _tmpl$2$k = /*#__PURE__*/template(`<div>`);
 function Select(props) {
-  const [selectInputProps] = splitProps(props, ['multiple', 'allowClear', 'class', 'style', 'disabled', 'placeholder', 'status', 'size', 'variant', 'suffixIcon', 'placement', 'getPopupContainer']);
+  const [selectInputProps] = splitProps(props, ['ref', 'multiple', 'allowClear', 'class', 'style', 'disabled', 'placeholder', 'status', 'size', 'variant', 'suffixIcon', 'placement', 'getPopupContainer', 'defaultOpen', 'open', 'onOpenChange']);
   const [value, setValue] = createControllableValue(props);
   const valueArr = createMemo(() => toArray(value(), false));
   const selectedValue = createSelector(() => new Map(valueArr().map(v => [v, true])), (a, b) => b.has(a));
   const optionDict = createMemo(() => new Map(props.options?.map(o => [o.value, o])));
   return createComponent(SelectInput, mergeProps$1(selectInputProps, {
+    get ["class"]() {
+      return cs('ant-select', selectInputProps.class);
+    },
     labelRender: v => props.labelRender ? props.labelRender(optionDict().get(v), v) : unwrapStringOrJSXElement(optionDict().get(v)?.label) ?? v,
     get value() {
       return valueArr();
@@ -2838,7 +2858,7 @@ function Select(props) {
             };
             insert(_el$2, () => unwrapStringOrJSXElement(item.label));
             effect(_p$ => {
-              var _v$ = cs('ellipsis box-content px-12px py-5px min-h-22px leading-22px hover:bg-[var(--ant-select-option-active-bg)] cursor-pointer rounded-[var(--ant-border-radius-sm)]', selectedValue(item.value) ? '!bg-[var(--ant-select-option-selected-bg)]' : '', item.class),
+              var _v$ = cs('ant-select-item', 'ellipsis box-content px-12px py-5px min-h-22px leading-22px hover:bg-[var(--ant-select-option-active-bg)] cursor-pointer rounded-[var(--ant-border-radius-sm)]', selectedValue(item.value) ? '!bg-[var(--ant-select-option-selected-bg)]' : '', item.class),
                 _v$2 = typeof item.label === 'string' || typeof item.label === 'number' ? item.label.toString() : undefined;
               _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
               _v$2 !== _p$.t && setAttribute(_el$2, "title", _p$.t = _v$2);
@@ -3526,15 +3546,23 @@ const ColorPickerContext = createContext();
  * @param cursor - 拖拽过程中的 style.cursor
  */
 function setupGlobalDrag(onMove, onEnd, cursor) {
-  const originalPointerEvents = document.body.style.pointerEvents;
+  // 防止拖拽时误选中文字等
+  const originalUserSelect = document.body.style.userSelect;
+  document.body.style.userSelect = 'none';
   const originalCursor = document.documentElement.style.cursor;
   if (cursor) {
     document.documentElement.style.cursor = cursor;
   }
+  // 防止 mouseup 被 disabled 元素吞掉
+  const style = document.createElement('style');
+  style.textContent = `
+    :disabled {
+      pointer-events: none;
+    }
+  `;
+  document.head.appendChild(style);
   const abortController = new AbortController();
   window.addEventListener('mousemove', e => {
-    // 延迟设置 document.body.style.pointerEvents，直到 mousemove 触发，这样才算 drag。避免影响自身及子元素的 click 事件
-    document.body.style.pointerEvents = 'none'; // 防止 mouseup 被 disabled 元素吞掉，以及拖拽时误选中文字等
     onMove(e);
   }, {
     signal: abortController.signal,
@@ -3542,10 +3570,11 @@ function setupGlobalDrag(onMove, onEnd, cursor) {
   });
   window.addEventListener('mouseup', e => {
     onEnd?.(e);
-    document.body.style.pointerEvents = originalPointerEvents;
+    document.body.style.userSelect = originalUserSelect;
     if (cursor) {
       document.documentElement.style.cursor = originalCursor;
     }
+    document.head.removeChild(style);
     abortController.abort();
   }, {
     once: true,
@@ -3960,6 +3989,7 @@ const ColorPickerInput = () => {
           },
           get children() {
             return createComponent(Input, {
+              "class": "ant-color-picker-hex-input",
               size: "small",
               get value() {
                 return hexInputValue();
@@ -4194,7 +4224,7 @@ const ColorPicker = props => {
           var _el$ = _tmpl$$p(),
             _el$2 = _el$.firstChild;
           _el$2.$$click = () => {
-            setColor(new Color());
+            setColor(new Color(), true);
             close();
           };
           return _el$;
@@ -4217,13 +4247,16 @@ const ColorPicker = props => {
       return props.disabled ? false : 'click';
     },
     content: getPopoverContent,
+    contentHTMLAttributes: {
+      class: 'ant-color-picker'
+    },
     get placement() {
       return props.placement ?? 'bottomLeft';
     },
     get children() {
       return createComponent(Element$1, {
         get ["class"]() {
-          return cs('inline-block', props.disabled && 'cursor-not-allowed');
+          return cs('ant-color-picker-trigger inline-block', props.disabled && 'cursor-not-allowed');
         },
         get children() {
           var _el$4 = _tmpl$4$8();
@@ -4561,7 +4594,7 @@ const Segmented = props => {
             children: item
           }));
           effect(_p$ => {
-            var _v$ = cs(props.block && 'basis-0 grow-1', isDisabledValue(item) && 'cursor-not-allowed'),
+            var _v$ = cs('ant-segmented-item', props.block && 'basis-0 grow-1', isDisabledValue(item) && 'cursor-not-allowed'),
               _v$2 = cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-sm)] cursor-pointer [white-space:nowrap]', isSelected(unWarpValue(item)) && 'bg-[var(--ant-segmented-item-selected-bg)]', isDisabledValue(item) ? '[pointer-events:none] text-[var(--ant-color-text-disabled)]' : isSelected(unWarpValue(item)) ? 'shadow-[var(--ant-box-shadow-tertiary)] text-[var(--ant-segmented-item-selected-color)]' : 'text-[var(--ant-segmented-item-color)] hover:text-[var(--ant-segmented-item-hover-color)] hover:bg-[var(--ant-segmented-item-hover-bg)] active:bg-[var(--ant-segmented-item-active-bg)]', props.block && 'flex justify-center', {
                 small: 'leading-20px',
                 middle: 'leading-28px',
@@ -7140,8 +7173,10 @@ function InternalMenu(props) {
                       });
                       return _el$6;
                     })(),
-                    contentStyle: {
-                      padding: 0
+                    contentHTMLAttributes: {
+                      style: {
+                        padding: 0
+                      }
                     },
                     get children() {
                       return getLabel({
@@ -7294,8 +7329,10 @@ const Dropdown = _props => {
         props.menu?.onClick?.(info);
       }
     })),
-    contentStyle: {
-      padding: 0
+    contentHTMLAttributes: {
+      style: {
+        padding: 0
+      }
     }
   }, popoverProps, {
     get children() {
@@ -7305,6 +7342,18 @@ const Dropdown = _props => {
 };
 
 var _tmpl$$1 = /*#__PURE__*/template(`<span class="absolute pointer-events-none z-2000">`);
+function createCursor(props) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const _dispose = render(() => createComponent(Cursor, props), container);
+  const dispose = () => {
+    _dispose();
+    document.body.removeChild(container);
+  };
+  return {
+    dispose
+  };
+}
 const Cursor = props => {
   const resolvedChildren = children(() => props.children);
   const [hover, setHover] = createSignal(false);
@@ -7313,30 +7362,47 @@ const Cursor = props => {
     y: 0
   });
   let originalCursor;
+  const onMouseEnter = (_, _children) => {
+    setHover(true);
+    originalCursor = _children.style.cursor;
+    _children.style.cursor = 'none';
+  };
+  const onMouseMove = e => {
+    setCursorPosition({
+      x: e.clientX,
+      y: e.clientY
+    });
+  };
+  const onMouseLeave = (_, _children) => {
+    setHover(false);
+    if (originalCursor) {
+      _children.style.cursor = originalCursor;
+    } else {
+      _children.style.removeProperty('cursor');
+    }
+    originalCursor = undefined;
+  };
+  setRef(props, {
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave
+  });
   createEffect(() => {
     const _children = resolvedChildren();
     if (!(_children instanceof HTMLElement || _children instanceof SVGElement)) return;
     const abortController = new AbortController();
-    _children.addEventListener('mouseenter', () => {
-      setHover(true);
-      originalCursor = _children.style.cursor;
-      _children.style.cursor = 'none';
+    _children.addEventListener('mouseenter', e => {
+      onMouseEnter(e, _children);
     }, {
       capture: true,
       signal: abortController.signal
     });
-    _children.addEventListener('mousemove', e => {
-      setCursorPosition({
-        x: e.clientX,
-        y: e.clientY
-      });
-    }, {
+    _children.addEventListener('mousemove', onMouseMove, {
       capture: true,
       signal: abortController.signal
     });
-    _children.addEventListener('mouseleave', () => {
-      setHover(false);
-      if (originalCursor) _children.style.cursor = originalCursor;
+    _children.addEventListener('mouseleave', e => {
+      onMouseLeave(e, _children);
     }, {
       capture: true,
       signal: abortController.signal
@@ -7370,6 +7436,7 @@ const Cursor = props => {
     }
   })];
 };
+Cursor.createCursor = createCursor;
 
 function Space(props) {
   return createComponent(Element$1, {
@@ -7423,7 +7490,8 @@ const CodeInput = _props => {
             ref: el => {
               inputRefDict[item] = el;
             },
-            "class": "!w-32px !text-center",
+            rootClass: "!w-32px",
+            "class": "!text-center",
             get value() {
               return value()[item];
             },