antd-solid 0.0.24 → 0.0.26

package/es/Button/index.js

@@ -1,11 +1,12 @@
 import { createComponent, mergeProps as mergeProps$1, insert, memo, spread, template } from 'solid-js/web';
-import { mergeProps, splitProps, createSignal, createMemo, children, Show } from 'solid-js';
+import { mergeProps, splitProps, createSignal, createMemo, children, useContext, Show } from 'solid-js';
 import cs from 'classnames';
 import './index.scss.js';
 import { wave } from '../utils/animation.js';
 import Element from '../Element/index.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
+import CompactContext from '../Compact/context.js';
 
 var _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:loading [vertical-align:-0.125em] keyframes-spin [animation:spin_1s_linear_infinite]">`),
   _tmpl$2 = /*#__PURE__*/template(`<span>`),
@@ -38,6 +39,9 @@ const Button = _props => {
   const loading = createMemo(() => typeof props.loading === 'boolean' ? props.loading : innerLoading());
   const resolvedChildren = children(() => props.children);
   const resolvedIcon = children(() => unwrapStringOrJSXElement(props.icon));
+  const {
+    compact
+  } = useContext(CompactContext);
   return createComponent(Element, mergeProps$1({
     tag: "button"
   }, buttonElementProps, {
@@ -46,7 +50,7 @@ const Button = _props => {
       typeof _ref$ === "function" ? _ref$(r$) : props.ref = r$;
     },
     get ["class"]() {
-      return cs(`ant-btn ant-btn-${props.type}`, 'inline-flex justify-center items-center gap-8px', 'relative cursor-pointer [font-size:var(--ant-font-size)] rounded-[--ant-button-border-radius]', 'focus-visible:[outline:4px_solid_var(--ant-color-primary-border)] focus-visible:[outline-offset:1px]', props.block && 'block w-full', props.class, sizeClassMap[size()], props.disabled && 'cursor-not-allowed', typeClassMap[props.type](props.danger, props.disabled), loading() && 'opacity-65');
+      return cs(`ant-btn ant-btn-${props.type}`, 'inline-flex justify-center items-center gap-8px', 'relative cursor-pointer [font-size:var(--ant-font-size)] rounded-[--ant-button-border-radius]', 'focus-visible:[outline:4px_solid_var(--ant-color-primary-border)] focus-visible:[outline-offset:1px]', props.block && 'block w-full', props.class, sizeClassMap[size()], props.disabled && 'cursor-not-allowed', typeClassMap[props.type](props.danger, props.disabled), loading() && 'opacity-65', compact && 'ant-compact-item');
     },
     get style() {
       return {

package/es/Checkbox/index.js

@@ -28,16 +28,16 @@ const Checkbox = props => {
           _el$2 = _el$.firstChild;
         _el$2.addEventListener("change", e => {
           if (props.disabled) return;
-          e.target.checked = setChecked(v => !v);
+          e.target.checked = props.indeterminate ? setChecked(true) : setChecked(v => !v);
           props.onChange?.(e);
         });
         effect(() => className(_el$, cs('w-16px h-16px rounded-[var(--ant-border-radius-sm)] relative', (() => {
-          if (checked()) {
-            return ['after:content-empty after:block after:absolute after:top-[calc(50%-1px)] after:left-1/2 after:-translate-1/2 after:-rotate-45 after:w-10px after:h-6px', 'after:border-solid after:border-2px after:border-t-0px after:border-r-0px', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)] [border:1px_solid_var(--ant-color-border)] after:border-[var(--ant-color-text-disabled)]' : 'bg-[var(--ant-color-primary)] after:border-white'];
-          }
           if (props.indeterminate) {
             return ['[border:1px_solid_var(--ant-color-border)]', 'after:content-empty after:block after:absolute after:top-1/2 after:left-1/2 after:-translate-1/2 after:w-8px after:h-8px', props.disabled ? 'after:bg-[var(--ant-color-text-disabled)]' : 'after:bg-[var(--ant-color-primary)]'];
           }
+          if (checked()) {
+            return ['after:content-empty after:block after:absolute after:top-[calc(50%-1px)] after:left-1/2 after:-translate-1/2 after:-rotate-45 after:w-10px after:h-6px', 'after:border-solid after:border-2px after:border-t-0px after:border-r-0px', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)] [border:1px_solid_var(--ant-color-border)] after:border-[var(--ant-color-text-disabled)]' : 'bg-[var(--ant-color-primary)] after:border-white'];
+          }
           return ['[border:1px_solid_var(--ant-color-border)]', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)]' : 'bg-[--ant-color-bg-container]'];
         })())));
         return _el$;

package/es/Collapse/Item.js

@@ -10,7 +10,7 @@ import useComponentSize from '../hooks/useComponentSize.js';
 import { getElementClass, getElementCssVariables } from './utils.js';
 
 var _tmpl$ = /*#__PURE__*/template(`<span>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div><span class="inline-flex items-center gap-[--ant-margin-sm]"></span><span class="inline-flex items-center gap-[--ant-margin-sm]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><span class="inline-flex items-center gap-[--ant-margin-sm]"><span></span></span><span class="inline-flex items-center gap-[--ant-margin-sm]"><span>`),
   _tmpl$3 = /*#__PURE__*/template(`<div class=overflow-hidden><div>`);
 const CollapseItem = _props => {
   const props = mergeProps({
@@ -58,16 +58,18 @@ const CollapseItem = _props => {
       return [(() => {
         var _el$2 = _tmpl$2(),
           _el$3 = _el$2.firstChild,
-          _el$4 = _el$3.nextSibling;
+          _el$4 = _el$3.firstChild,
+          _el$5 = _el$3.nextSibling,
+          _el$6 = _el$5.firstChild;
         _el$2.$$click = () => {
           if (props.disabledChildren) return;
           setOpen(!open());
         };
-        insert(_el$3, () => getExpandIcon('left'), null);
-        insert(_el$3, () => unwrapStringOrJSXElement(props.label), null);
+        insert(_el$3, () => getExpandIcon('left'), _el$4);
+        insert(_el$4, () => unwrapStringOrJSXElement(props.label));
         insert(_el$3, () => getExpandIcon('right'), null);
-        insert(_el$4, () => unwrapStringOrJSXElement(props.extra), null);
-        insert(_el$4, () => getExpandIcon('end'), null);
+        insert(_el$6, () => unwrapStringOrJSXElement(props.extra));
+        insert(_el$5, () => getExpandIcon('end'), null);
         effect(_p$ => {
           var _v$ = cs('text-[--ant-color-text-heading] flex justify-between items-center cursor-pointer', props.type === 'card' && 'bg-[var(--ant-collapse-header-bg)] p-[--ant-collapse-header-padding]'),
             _v$2 = props.headerStyle;
@@ -104,20 +106,20 @@ const CollapseItem = _props => {
               return open();
             },
             get children() {
-              var _el$5 = _tmpl$3(),
-                _el$6 = _el$5.firstChild;
-              insert(_el$6, () => props.children);
+              var _el$7 = _tmpl$3(),
+                _el$8 = _el$7.firstChild;
+              insert(_el$8, () => props.children);
               effect(_p$ => {
                 var _v$3 = cs('p-[--ant-collapse-content-padding]', props.type === 'card' && '[border-top:1px_solid_var(--ant-color-border)]'),
                   _v$4 = props.bodyStyle;
-                _v$3 !== _p$.e && className(_el$6, _p$.e = _v$3);
-                _p$.t = style(_el$6, _v$4, _p$.t);
+                _v$3 !== _p$.e && className(_el$8, _p$.e = _v$3);
+                _p$.t = style(_el$8, _v$4, _p$.t);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined
               });
-              return _el$5;
+              return _el$7;
             }
           });
         }

package/es/Cursor/index.d.ts

@@ -7,6 +7,7 @@ export interface CursorIntance {
 export interface CursorProps extends ParentProps {
     ref?: Ref<CursorIntance>;
     cursor: JSX.Element;
+    disabled?: boolean;
 }
 declare function createCursor(props: CursorProps): {
     dispose: () => void;

package/es/Cursor/index.js

@@ -29,12 +29,13 @@ const Cursor = props => {
     _children.style.cursor = 'none';
   };
   const onMouseMove = e => {
+    setHover(true);
     setCursorPosition({
       x: e.clientX,
       y: e.clientY
     });
   };
-  const onMouseLeave = (_, _children) => {
+  const onLeave = _children => {
     setHover(false);
     if (originalCursor) {
       _children.style.cursor = originalCursor;
@@ -43,33 +44,36 @@ const Cursor = props => {
     }
     originalCursor = undefined;
   };
+  const onMouseLeave = (_, _children) => {
+    onLeave(_children);
+  };
   setRef(props, {
     onMouseEnter,
     onMouseMove,
     onMouseLeave
   });
   createEffect(() => {
+    if (props.disabled) return;
     const _children = resolvedChildren();
     if (!(_children instanceof HTMLElement || _children instanceof SVGElement)) return;
     const abortController = new AbortController();
+    // 注意：不能设置 capture 为 true，否则鼠标移入子元素时，子元素也会触发 mouseenter 事件
     _children.addEventListener('mouseenter', e => {
       onMouseEnter(e, _children);
     }, {
-      capture: true,
       signal: abortController.signal
     });
     _children.addEventListener('mousemove', onMouseMove, {
-      capture: true,
       signal: abortController.signal
     });
     _children.addEventListener('mouseleave', e => {
       onMouseLeave(e, _children);
     }, {
-      capture: true,
       signal: abortController.signal
     });
     onCleanup(() => {
       abortController.abort();
+      onLeave(_children);
     });
   });
   return [resolvedChildren, createComponent(Show, {

package/es/Form/FormItem.js

@@ -10,7 +10,7 @@ var _tmpl$ = /*#__PURE__*/template(`<label class=mr-4px>`),
   _tmpl$2 = /*#__PURE__*/template(`<span class=text-[var(--ant-color-error)]>*`),
   _tmpl$3 = /*#__PURE__*/template(`<div class="flex items-center"><label>`),
   _tmpl$4 = /*#__PURE__*/template(`<div class="absolute top-[100%] text-[var(--ant-color-error)]">`),
-  _tmpl$5 = /*#__PURE__*/template(`<div class="flex flex-col relative flex-grow-1"><div>`);
+  _tmpl$5 = /*#__PURE__*/template(`<div class="flex flex-col relative flex-grow-1"><div class=flex>`);
 const FormItem = props => {
   const {
     formInstance,

package/es/Slider/index.js

@@ -45,12 +45,13 @@ const Slider = _props => {
         case 'ArrowDown':
           e.preventDefault();
           setValue(NP.minus(value(), props.step));
+          props.onChangeComplete?.(value());
           break;
         case 'ArrowRight':
         case 'ArrowUp':
           e.preventDefault();
           setValue(NP.plus(value(), props.step));
-          e.preventDefault();
+          props.onChangeComplete?.(value());
           break;
       }
     };
@@ -91,6 +92,7 @@ const Slider = _props => {
         const halfHandleWidth = handleWidth / 2;
         const offsetX = clamp(e.offsetX - halfHandleWidth, 0, containerRef.offsetWidth - handleWidth);
         setValue(props.min + offsetX / (containerRef.offsetWidth - handleWidth) * gap());
+        props.onChangeComplete?.(value());
       };
       insert(_el$4, createComponent(Tooltip, {
         get open() {

package/es/hooks/createControllableValue.js

@@ -22,7 +22,7 @@ function createControllableValue(props, options = {}) {
   const setValue = v => {
     const _value = untrack(value);
     const newValue = typeof v === 'function' ? v(_value) : v;
-    if (newValue === _value) return;
+    if (newValue === _value) return newValue;
     if (!isControlled()) {
       _setValue(newValue);
     }

package/package.json

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