antd-solid 0.0.12 → 0.0.13

package/es/TreeFor/index.js

@@ -0,0 +1,80 @@
+import { createComponent, memo } from 'solid-js/web';
+import { isEmpty, remove } from 'lodash-es';
+import { For, createMemo, createSignal, untrack, Show } from 'solid-js';
+
+function TreeFor(props) {
+  return createComponent(For, {
+    get each() {
+      return props.each;
+    },
+    get fallback() {
+      return props.fallback;
+    },
+    children: (item, index) => {
+      const nextEach = createMemo(() => props.nextEach(item));
+      const isParent = createMemo(() => !isEmpty(nextEach()));
+      const [filteredNextEach, setFilteredNextEach] = createSignal(untrack(nextEach) ?? []);
+      const isEmptyChildren = createMemo(() => isEmpty(filteredNextEach()));
+      const onChildChange = (child, value) => {
+        setFilteredNextEach(prev => {
+          if (value) {
+            if (prev.includes(child)) {
+              return prev;
+            } else {
+              prev.push(child);
+            }
+          } else {
+            if (prev.includes(child)) {
+              remove(prev, v => v === child);
+            } else {
+              return prev;
+            }
+          }
+          return [...prev];
+        });
+      };
+      const options = {
+        index,
+        parentList: props.parentList,
+        parentIndexes: props.parentIndexes,
+        isParent,
+        isEmptyChildren,
+        onChildChange: props.onChildChange
+      };
+      const isExpanded = createMemo(() => props.expanded ? props.expanded(item, options) : true);
+      return [memo(() => props.children(item, options)), createComponent(Show, {
+        get when() {
+          return memo(() => !!isParent())() && isExpanded();
+        },
+        get children() {
+          return createComponent(TreeFor, {
+            get each() {
+              return nextEach();
+            },
+            get nextEach() {
+              return props.nextEach;
+            },
+            onChildChange: onChildChange,
+            get expanded() {
+              return props.expanded;
+            },
+            get children() {
+              return props.children;
+            },
+            get parentList() {
+              return [...(props.parentList ?? []), item];
+            },
+            get parentIndexes() {
+              return [...(props.parentIndexes ?? []), index()];
+            },
+            get fallback() {
+              return props.fallback;
+            }
+          });
+        }
+      })];
+    }
+  });
+}
+
+export { TreeFor as default };

package/es/TreeSelect/index.d.ts

@@ -0,0 +1,26 @@
+import { type JSXElement } from 'solid-js';
+import { type Key } from '../types';
+import { type TreeProps } from '../Tree';
+import { type SelectInputProps } from '../SelectInput';
+export interface TreeSelectNode<T = Key> {
+    value: T;
+    label: JSXElement;
+    children?: TreeSelectNode[] | undefined;
+}
+export interface TreeSelectProps<T = Key> extends Pick<SelectInputProps<Key>, 'multiple' | 'allowClear' | 'class' | 'disabled' | 'placeholder' | 'status' | 'size'>, Pick<TreeProps<TreeSelectNode<T>>, 'treeData' | 'checkable' | 'checkStrategy'> {
+    defaultValue?: T | T[] | undefined;
+    value?: T | T[] | undefined;
+    onChange?: (value: T | T[] | undefined) => void;
+    /**
+     * 自定义节点 label、value、children 的字段
+     * 默认 { label: 'label', value: 'value', children: 'children' }
+     */
+    fieldNames?: {
+        label?: string | ((node: TreeSelectNode<T>) => JSXElement);
+        value?: string | ((node: TreeSelectNode<T>) => T);
+        children?: string | ((node: TreeSelectNode<T>) => Array<TreeSelectNode<T>> | undefined);
+    };
+    labelRender?: (options: TreeSelectNode<T> | undefined) => JSXElement;
+}
+declare const TreeSelect: <T = Key>(props: TreeSelectProps<T>) => import("solid-js").JSX.Element;
+export default TreeSelect;

package/es/TreeSelect/index.js

@@ -0,0 +1,98 @@
+import { createComponent, mergeProps, insert, template } from 'solid-js/web';
+import { splitProps, untrack, createMemo, Show } from 'solid-js';
+import { isNil, isEmpty, get } from 'lodash-es';
+import createControllableValue from '../hooks/createControllableValue.js';
+import Tree from '../Tree/index.js';
+import SelectInput from '../SelectInput/index.js';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
+import Empty from '../Empty/index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class="px-4px py-8px">`);
+const TreeSelect = props => {
+  const [selectInputProps] = splitProps(props, ['multiple', 'allowClear', 'class', 'disabled', 'placeholder', 'status', 'size']);
+  const [treeProps] = splitProps(props, ['treeData', 'checkable', 'checkStrategy']);
+  const fieldNames = Object.assign({
+    label: 'label',
+    value: 'value',
+    children: 'children'
+  }, untrack(() => props.fieldNames));
+  const getLabel = node => {
+    const labelFieldName = fieldNames.label;
+    return typeof labelFieldName === 'function' ? labelFieldName(node) : unwrapStringOrJSXElement(get(node, labelFieldName));
+  };
+  const getValue = node => {
+    const valueFieldName = fieldNames.value;
+    return typeof valueFieldName === 'function' ? valueFieldName(node) : get(node, valueFieldName);
+  };
+  const getChildren = node => {
+    const childrenFieldName = fieldNames.children;
+    return typeof childrenFieldName === 'function' ? childrenFieldName(node) : get(node, childrenFieldName);
+  };
+  const optionMap = createMemo(() => {
+    const map = new Map();
+    const treeForEach = list => {
+      list?.forEach(item => {
+        const key = getValue(item);
+        map.set(key, item);
+        const children = getChildren(item);
+        if (!isEmpty(children)) {
+          treeForEach(children);
+        }
+      });
+    };
+    treeForEach(props.treeData);
+    return map;
+  });
+  const [value, setValue] = createControllableValue(props);
+  const valueArr = createMemo(() => props.multiple ? value() : isNil(value()) ? value() : [value()]);
+  const setValueArr = v => {
+    setValue(props.multiple ? v : v?.[0]);
+  };
+  return createComponent(SelectInput, mergeProps(selectInputProps, {
+    labelRender: v => props.labelRender ? props.labelRender(optionMap().get(v)) : getLabel(optionMap().get(v)) ?? v,
+    get value() {
+      return valueArr();
+    },
+    onChange: setValueArr,
+    content: close => createComponent(Show, {
+      get when() {
+        return !isEmpty(props.treeData);
+      },
+      get fallback() {
+        return createComponent(Empty.PRESENTED_IMAGE_SIMPLE, {});
+      },
+      get children() {
+        var _el$ = _tmpl$();
+        insert(_el$, createComponent(Tree, mergeProps({
+          get multiple() {
+            return props.multiple;
+          },
+          blockNode: true,
+          get fieldNames() {
+            return {
+              title: fieldNames.label,
+              key: fieldNames.value,
+              children: fieldNames.children
+            };
+          }
+        }, () => props.checkable ? {
+          selectedKeys: [],
+          checkedKeys: valueArr(),
+          checkOnClick: true,
+          onCheck: checkedKeys => {
+            setValueArr(checkedKeys);
+          }
+        } : {
+          selectedKeys: valueArr(),
+          onSelect: selectedKeys => {
+            setValueArr(selectedKeys);
+            if (!props.multiple) close();
+          }
+        }, treeProps)));
+        return _el$;
+      }
+    })
+  }));
+};
+
+export { TreeSelect as default };

package/es/{Upload.d.ts → Upload/index.d.ts}

@@ -50,8 +50,15 @@ export interface UploadProps<T = any> extends ParentProps {
     onAdd?: (fileList: Array<Signal<T>>) => void;
     multiple?: boolean;
 }
-declare function request(file: File, customRequest: UploadProps['customRequest']): Signal<UploadFile<any>>;
+/**
+ * 根据一个 File 对象创建一个 UploadFile 对象
+ * @param file
+ * @returns
+ */
+declare function createUploadFile(file: File): UploadFile;
+declare function request<T = any>(uploadFileSignal: Signal<UploadFile<T>>, customRequest: UploadProps['customRequest']): Promise<UploadFile<T>>;
 declare const Upload: Component<UploadProps> & {
     request: typeof request;
+    createUploadFile: typeof createUploadFile;
 };
 export default Upload;

package/es/Upload/index.js

@@ -0,0 +1,112 @@
+import { delegateEvents, insert, use, effect, className, setAttribute, template } from 'solid-js/web';
+import { nanoid } from 'nanoid';
+import { mergeProps, createSignal } from 'solid-js';
+
+var _tmpl$ = /*#__PURE__*/template(`<span><input class=hidden type=file>`);
+/**
+ * 根据一个 File 对象创建一个 UploadFile 对象
+ * @param file
+ * @returns
+ */
+function createUploadFile(file) {
+  const id = `upload-${nanoid()}`;
+  return {
+    id,
+    file,
+    name: file.name,
+    type: file.type,
+    size: file.size,
+    status: 'pending',
+    percent: 0
+  };
+}
+async function request(uploadFileSignal, customRequest) {
+  const [uploadFile, setUploadFile] = uploadFileSignal;
+  const {
+    file
+  } = uploadFile();
+  if (!file) return await Promise.reject(new Error('file is required'));
+  return await new Promise((resolve, reject) => {
+    customRequest?.({
+      file,
+      onProgress(event) {
+        setUploadFile(value => ({
+          ...value,
+          status: 'uploading',
+          percent: event.percent ?? 0
+        }));
+      },
+      onSuccess(response) {
+        const newValue = setUploadFile(value => ({
+          ...value,
+          status: 'finished',
+          response
+        }));
+        resolve(newValue);
+      },
+      onError(err) {
+        setUploadFile(value => ({
+          ...value,
+          status: 'error'
+        }));
+        reject(err);
+      }
+    });
+  });
+}
+const Upload = _props => {
+  let input;
+  const props = mergeProps({
+    customRequest: ({
+      file,
+      onSuccess,
+      onError
+    }) => {
+      if (!_props.action) return;
+      const formData = new FormData();
+      formData.append('file', file);
+      fetch(_props.action, {
+        method: _props.method ?? 'post',
+        body: formData
+      }).then(onSuccess).catch(onError);
+    }
+  }, _props);
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    _el$.$$click = () => input?.click();
+    insert(_el$, () => props.children, _el$2);
+    _el$2.$$input = e => {
+      const fileList = [];
+      for (const file of Array.from(e.target.files ?? [])) {
+        // eslint-disable-next-line solid/reactivity
+        const uploadFileSignal = createSignal(createUploadFile(file));
+        request(uploadFileSignal, props.customRequest);
+        fileList.push(uploadFileSignal);
+      }
+      props.onAdd?.(fileList);
+      e.target.value = '';
+    };
+    var _ref$ = input;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : input = _el$2;
+    effect(_p$ => {
+      var _v$ = props.class,
+        _v$2 = props.accept,
+        _v$3 = props.multiple;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$2, "accept", _p$.t = _v$2);
+      _v$3 !== _p$.a && (_el$2.multiple = _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$;
+  })();
+};
+Upload.request = request;
+Upload.createUploadFile = createUploadFile;
+delegateEvents(["click", "input"]);
+
+export { Upload as default };

package/es/assets/svg/ColorPickUp.d.ts

@@ -0,0 +1,4 @@
+import { type Component } from 'solid-js';
+import { type StyleProps } from '../../types';
+declare const ColorPickUpSvg: Component<StyleProps>;
+export default ColorPickUpSvg;

package/es/assets/svg/ColorPickUp.js

@@ -0,0 +1,25 @@
+import { effect, setAttribute, style, template } from 'solid-js/web';
+import { commonStyle } from './common.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 1024 1024"xmlns=http://www.w3.org/2000/svg><path d="M856.2176 347.904l-90.624 90.624 53.504 53.504a52.3264 52.3264 0 1 1-73.984 73.984l-71.5776-71.6288-444.928 444.9792a25.6 25.6 0 0 1-13.4656 7.0656l-133.1712 24.576a25.6 25.6 0 0 1-29.7984-29.7984l24.576-133.1712a25.6 25.6 0 0 1 7.0656-13.4656l444.928-444.9792-71.68-71.6288a52.3264 52.3264 0 0 1 73.984-73.984l53.504 53.504 90.624-90.624a128 128 0 0 1 181.0432 181.0432z m-291.328 37.888l-439.296 439.3472-16.384 88.7808 88.832-16.384 439.296-439.296-72.448-72.448z">`);
+const ColorPickUpSvg = props => {
+  return (() => {
+    var _el$ = _tmpl$();
+    effect(_p$ => {
+      var _v$ = props.class,
+        _v$2 = {
+          ...commonStyle,
+          ...props.style
+        };
+      _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+};
+
+export { ColorPickUpSvg as default };

package/es/assets/svg/Crosshair.d.ts

@@ -0,0 +1,7 @@
+import { type JSX, type Component } from 'solid-js';
+import { type StyleProps } from '../../types';
+declare const CrosshairSvg: Component<StyleProps & Pick<JSX.SvgSVGAttributes<SVGSVGElement>, 'ref'> & {
+    innerColor: string;
+    outerColor: string;
+}>;
+export default CrosshairSvg;

package/es/assets/svg/Crosshair.js

@@ -0,0 +1,51 @@
+import { use, effect, setAttribute, style, template } from 'solid-js/web';
+import { commonStyle } from './common.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 26 26"version=1.1 xmlns=http://www.w3.org/2000/svg><line x1=50% x2=50% y2=100% stroke-width=3></line><line x1=50% x2=50% y2=100% stroke-width=1></line><line x1=100% y1=50% y2=50% stroke-width=3></line><line x1=100% y1=50% y2=50% stroke-width=1></line><circle cx=50% cy=50% r=32.7% fill=none stroke-width=3></circle><circle cx=50% cy=50% r=32.7% fill=none stroke-width=1>`);
+const CrosshairSvg = props => {
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      _el$4 = _el$3.nextSibling,
+      _el$5 = _el$4.nextSibling,
+      _el$6 = _el$5.nextSibling,
+      _el$7 = _el$6.nextSibling;
+    var _ref$ = props.ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
+    effect(_p$ => {
+      var _v$ = props.class,
+        _v$2 = {
+          ...commonStyle,
+          ...props.style
+        },
+        _v$3 = props.outerColor,
+        _v$4 = props.innerColor,
+        _v$5 = props.outerColor,
+        _v$6 = props.innerColor,
+        _v$7 = props.outerColor,
+        _v$8 = props.innerColor;
+      _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && setAttribute(_el$2, "stroke", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$3, "stroke", _p$.o = _v$4);
+      _v$5 !== _p$.i && setAttribute(_el$4, "stroke", _p$.i = _v$5);
+      _v$6 !== _p$.n && setAttribute(_el$5, "stroke", _p$.n = _v$6);
+      _v$7 !== _p$.s && setAttribute(_el$6, "stroke", _p$.s = _v$7);
+      _v$8 !== _p$.h && setAttribute(_el$7, "stroke", _p$.h = _v$8);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined
+    });
+    return _el$;
+  })();
+};
+
+export { CrosshairSvg as default };

package/es/assets/svg/Resize.d.ts

@@ -0,0 +1,4 @@
+import { type Component } from 'solid-js';
+import { type StyleProps } from '../../types';
+declare const Resize: Component<StyleProps>;
+export default Resize;

package/es/assets/svg/Resize.js

@@ -0,0 +1,25 @@
+import { effect, setAttribute, style, template } from 'solid-js/web';
+import { commonStyle } from './common.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 1024 1024"xmlns=http://www.w3.org/2000/svg><path fill=black stroke=white stroke-width=50 d="M531.2 179.2l130.133333 140.8c4.266667 4.266667 6.4 10.666667 6.4 14.933333-2.133333 4.266667-6.4 6.4-14.933333 6.4h-85.333333v341.333334h85.333333c8.533333 0 12.8 2.133333 14.933333 6.4 2.133333 4.266667 0 8.533333-6.4 14.933333l-130.133333 140.8c-4.266667 6.4-12.8 8.533333-19.2 8.533333s-14.933333-2.133333-19.2-8.533333l-130.133333-140.8c-4.266667-4.266667-6.4-10.666667-6.4-14.933333 2.133333-4.266667 6.4-6.4 14.933333-6.4h85.333333v-341.333334h-85.333333c-8.533333 0-12.8-2.133333-14.933333-6.4-2.133333-4.266667 0-8.533333 6.4-14.933333l130.133333-140.8c4.266667-6.4 12.8-8.533333 19.2-8.533333s14.933333 2.133333 19.2 8.533333z">`);
+const Resize = props => {
+  return (() => {
+    var _el$ = _tmpl$();
+    effect(_p$ => {
+      var _v$ = props.class,
+        _v$2 = {
+          ...commonStyle,
+          ...props.style
+        };
+      _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+};
+
+export { Resize as default };

package/es/assets/svg/Rotate.d.ts

@@ -0,0 +1,4 @@
+import { type Component } from 'solid-js';
+import { type StyleProps } from '../../types';
+declare const Rotate: Component<StyleProps>;
+export default Rotate;

package/es/assets/svg/Rotate.js

@@ -0,0 +1,20 @@
+import { spread, mergeProps, template } from 'solid-js/web';
+import { commonStyle } from './common.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 27 27"xmlns=http://www.w3.org/2000/svg><g><path data-follow-fill=currentColor fill-rule=evenodd clip-rule=evenodd d="M13.55 27c7.269 0 13.161-5.893 13.161-13.162C26.711 6.569 20.82.677 13.55.677 6.281.677.389 6.569.389 13.838c0 7.269 5.892 13.161 13.161 13.161Zm8.062-10.286 2.062-2.872c.409-.556.22-1.08-.45-1.08h-1.17c-.508-4.132-4.116-7.479-8.502-7.479-2.324 0-4.443.99-5.932 2.52-.467.426-.467 1.015-.131 1.367.343.376.9.442 1.415 0a6.48 6.48 0 0 1 4.648-1.964c3.371 0 6.071 2.455 6.562 5.556h-1.276c-.655 0-.851.524-.45 1.08l2.07 2.872c.32.45.826.45 1.154 0Zm-8.061 5.678c2.34 0 4.459-.99 5.948-2.52.459-.434.459-1.023.131-1.375-.352-.376-.9-.433-1.424.008a6.457 6.457 0 0 1-4.655 1.964 6.61 6.61 0 0 1-6.555-5.556h1.26c.663 0 .851-.523.45-1.072l-2.062-2.88c-.327-.45-.834-.45-1.153 0l-2.07 2.872c-.401.557-.221 1.08.45 1.08h1.186c.507 4.133 4.116 7.48 8.494 7.48Z"fill=currentColor>`);
+const Rotate = props => {
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(props, {
+      get style() {
+        return {
+          ...commonStyle,
+          ...props.style
+        };
+      }
+    }), true, true);
+    return _el$;
+  })();
+};
+
+export { Rotate as default };

package/es/assets/svg/RotateArrow.d.ts

@@ -0,0 +1,4 @@
+import { type Component } from 'solid-js';
+import { type StyleProps } from '../../types';
+declare const RotateArrowSvg: Component<StyleProps>;
+export default RotateArrowSvg;

package/es/assets/svg/RotateArrow.js

@@ -0,0 +1,21 @@
+import { spread, mergeProps, template } from 'solid-js/web';
+import { commonStyle } from './common.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 1000 1000"xmlns=http://www.w3.org/2000/svg><path fill=black stroke-width=50 stroke=white d="M 100,700 l 210,-150 v 105 Q 700,700 655,310 h -105 L 700,100 l 150,210 h -105 Q 745,745 310,745 v 105 L 100,700">`);
+const RotateArrowSvg = props => {
+  return (() => {
+    var _el$ = _tmpl$();
+      _el$.firstChild;
+    spread(_el$, mergeProps(props, {
+      get style() {
+        return {
+          ...commonStyle,
+          ...props.style
+        };
+      }
+    }), true, true);
+    return _el$;
+  })();
+};
+
+export { RotateArrowSvg as default };

package/es/assets/svg/common.d.ts

@@ -0,0 +1,2 @@
+import { type JSX } from 'solid-js';
+export declare const commonStyle: JSX.CSSProperties;

package/es/assets/svg/common.js

@@ -0,0 +1,9 @@
+const commonStyle = {
+  width: '1em',
+  height: '1em',
+  fill: 'currentColor',
+  display: 'inline-block',
+  'vertical-align': '-0.125em'
+};
+
+export { commonStyle };

package/es/hooks/createControllableValue.d.ts

@@ -3,7 +3,7 @@ export interface Options<T> {
     defaultValue?: T;
     defaultValuePropName?: string;
     valuePropName?: string;
-    trigger?: string | null;
+    trigger?: string | undefined | null | false;
 }
 export type Props = Record<string, any>;
 export interface StandardProps<T> {

package/es/hooks/createControllableValue.js

@@ -1,29 +1,28 @@
-import { createSignal } from 'solid-js';
-import createUpdateEffect from './createUpdateEffect.js';
+import { untrack, createSignal, createComputed, on } from 'solid-js';
 
 function createControllableValue(props, options = {}) {
   const {
-    defaultValuePropName = 'defaultValue',
-    valuePropName = 'value',
-    trigger = 'onChange'
-  } = options;
+    defaultValuePropName,
+    valuePropName,
+    trigger
+  } = Object.assign({
+    defaultValuePropName: 'defaultValue',
+    valuePropName: 'value',
+    trigger: 'onChange'
+  }, options);
   const getValue = () => props[valuePropName];
   // 为什么不使用 Object.hasOwn？
   // solid 的 proxy 对象对于任何 key，都会返回 true
   const isControlled = () => Object.keys(props).includes(valuePropName);
-  let defaultValue = options.defaultValue;
-  if (isControlled()) {
-    defaultValue = getValue();
-  } else if (Object.keys(props).includes(defaultValuePropName)) {
-    defaultValue = props[defaultValuePropName];
-  }
+  const defaultValue = Object.keys(props).includes(defaultValuePropName) ? untrack(() => props[defaultValuePropName]) : options.defaultValue;
   const [value, _setValue] = createSignal(defaultValue);
-  createUpdateEffect(getValue, () => {
-    if (!isControlled()) return;
-    _setValue(getValue());
-  });
+  createComputed(on(getValue, () => {
+    if (isControlled()) _setValue(getValue());
+  }));
   const setValue = v => {
-    const newValue = typeof v === 'function' ? v(value()) : v;
+    const _value = untrack(value);
+    const newValue = typeof v === 'function' ? v(_value) : v;
+    if (newValue === _value) return;
     if (!isControlled()) {
       _setValue(newValue);
     }

package/es/hooks/createTransition.d.ts

@@ -3,6 +3,10 @@ import { type Accessor } from 'solid-js';
  * dom 节点显示或隐藏时的动画
  * @param target
  * @param when
- * @param className 动画类名
+ * @param props.name 动画类名
  */
-export default function createTransition(target: Accessor<HTMLElement | undefined | null>, when: Accessor<boolean>, className: string): void;
+export default function createTransition(target: Accessor<HTMLElement | undefined | null>, when: Accessor<boolean>, props?: {
+    name?: string;
+    onAfterEnter?: (element: Element) => void;
+    onAfterExit?: (element: Element) => void;
+}): void;

package/es/hooks/createTransition.js

@@ -4,32 +4,36 @@ import { createEffect, on } from 'solid-js';
  * dom 节点显示或隐藏时的动画
  * @param target
  * @param when
- * @param className 动画类名
+ * @param props.name 动画类名
  */
-function createTransition(target, when, className) {
+function createTransition(target, when, props = {}) {
   createEffect(on(when, input => {
     const targetValue = target();
     if (!targetValue) return;
     if (input) {
       targetValue.style.display = '';
-      targetValue.classList.add(`${className}-enter-active`, `${className}-enter`, `${className}-enter-to`);
+      targetValue.classList.add(`${props.name}-enter-active`, `${props.name}-enter`);
       requestAnimationFrame(() => {
-        targetValue.classList.remove(`${className}-enter`);
+        targetValue.classList.add(`${props.name}-enter-to`);
+        targetValue.classList.remove(`${props.name}-enter`);
       });
       const onTransitionEnd = () => {
-        targetValue.classList.remove(`${className}-enter-active`, `${className}-enter-to`);
+        targetValue.classList.remove(`${props.name}-enter-active`, `${props.name}-enter-to`);
         targetValue.removeEventListener('transitionend', onTransitionEnd);
+        props.onAfterEnter?.(targetValue);
       };
       targetValue.addEventListener('transitionend', onTransitionEnd);
     } else {
-      targetValue.classList.add(`${className}-exit-active`, `${className}-exit`, `${className}-exit-to`);
+      targetValue.classList.add(`${props.name}-exit-active`, `${props.name}-exit`);
       requestAnimationFrame(() => {
-        targetValue.classList.remove(`${className}-exit`);
+        targetValue.classList.add(`${props.name}-exit-to`);
+        targetValue.classList.remove(`${props.name}-exit`);
       });
       const onTransitionEnd = () => {
         targetValue.style.display = 'none';
-        targetValue.classList.remove(`${className}-exit-active`, `${className}-exit-to`);
+        targetValue.classList.remove(`${props.name}-exit-active`, `${props.name}-exit-to`);
         targetValue.removeEventListener('transitionend', onTransitionEnd);
+        props.onAfterExit?.(targetValue);
       };
       targetValue.addEventListener('transitionend', onTransitionEnd);
     }

package/es/hooks/useClickAway.d.ts

@@ -1,2 +1,2 @@
 import { type Accessor } from 'solid-js';
-export default function useClickAway<T extends Event = Event>(onClickAway: (event: T) => void, target?: Accessor<Element | Element[]>): void;
+export default function useClickAway<T extends Event = Event>(onClickAway: (event: T) => void, target?: Accessor<Element | Element[] | undefined>): void;