antd-solid 0.0.11 → 0.0.13

package/es/Drawer/index.js

@@ -1,31 +1,52 @@
-import { delegateEvents, createComponent, use, insert, effect, className, Portal, template } from 'solid-js/web';
-import { mergeProps, createSignal, createMemo, Show, untrack } from 'solid-js';
+import { delegateEvents, createComponent, Dynamic, effect, className, insert, Portal, template } from 'solid-js/web';
+import { mergeProps, createEffect, onCleanup, createMemo, Show } from 'solid-js';
 import cs from 'classnames';
-import Button from '../Button.js';
-import { setRef } from '../utils/solid.js';
 import { Transition } from 'solid-transition-group';
+import Button from '../Button/index.js';
 import './index.scss.js';
 import createTransition from '../hooks/createTransition.js';
+import Element from '../Element/index.js';
+import DelayShow from '../DelayShow/index.js';
+import createControllableValue from '../hooks/createControllableValue.js';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div><div><div class="ant-px-[var(--ant-padding-lg)] ant-py-[var(--ant-padding)] ant-flex ant-justify-between ant-items-center ant-[border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)]"><div class="ant-flex ant-items-center"><span class="ant-text-[var(--ant-color-text)] ant-text-size-[var(--ant-font-size-lg)] ant-[font-weight:var(--ant-font-weight-strong)] ant-leading-[var(--ant-line-height-lg)]"></span></div><div></div></div><div class="ant-p-[var(--ant-padding-lg)] ant-overflow-auto">`);
+var _tmpl$ = /*#__PURE__*/template(`<div aria-label=mask>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class=i-ant-design:close-outlined>`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="w-full text-[var(--ant-color-text)] text-size-[var(--ant-font-size-lg)] [font-weight:var(--ant-font-weight-strong)] leading-[var(--ant-line-height-lg)]">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class=shrink-0>`),
+  _tmpl$5 = /*#__PURE__*/template(`<div><div class="px-[var(--ant-padding-lg)] py-[var(--ant-padding)] flex items-center [border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)] empty:hidden"></div><div class="p-[--ant-drawer-body-padding] overflow-auto">`);
 const Drawer = _props => {
   const props = mergeProps({
-    width: '378px',
-    height: '378px',
+    size: '378px',
+    mask: true,
     maskClosable: true,
+    closeIcon: true,
+    destroyOnClose: false,
+    closeOnEsc: true,
     placement: 'right',
     getContainer: document.body
   }, _props);
-  /**
-   * 控制是否打开/销毁
-   */
-  const [open, setOpen] = createSignal(false);
-  /**
-   * 控制显隐
-   */
-  const [hide, setHide] = createSignal(false);
-  let cleanup;
+  const [open] = createControllableValue(props, {
+    defaultValuePropName: 'defaultOpen',
+    valuePropName: 'open',
+    trigger: null
+  });
+  createEffect(() => {
+    if (!open()) return;
+    const originOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    if (!props.closeOnEsc) return;
+    const onKeyup = e => {
+      if (e.key === 'Escape') {
+        props.onClose?.();
+      }
+    };
+    document.addEventListener('keyup', onKeyup);
+    onCleanup(() => {
+      document.body.style.overflow = originOverflow;
+      document.removeEventListener('keyup', onKeyup);
+    });
+  });
   const container = createMemo(() => {
     if (typeof props.getContainer === 'function') {
       return props.getContainer();
@@ -36,124 +57,153 @@ const Drawer = _props => {
     return undefined;
   });
   const isBody = createMemo(() => container() === document.body);
-  const instance = {
-    open() {
-      setOpen(true);
-      setHide(false);
-      untrack(() => {
-        if (!isBody()) return;
-        const originOverflow = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
-        const onKeyup = e => {
-          if (e.key === 'Escape') {
-            instance.close();
-          }
-        };
-        document.addEventListener('keyup', onKeyup);
-        cleanup = () => {
-          document.body.style.overflow = originOverflow;
-          document.removeEventListener('keyup', onKeyup);
-        };
-      });
-    },
-    close() {
-      untrack(() => {
-        if (props.destroyOnClose) {
-          setOpen(false);
-        } else {
-          setHide(true);
-        }
-        cleanup?.();
-      });
-    }
-  };
-  setRef(props, instance);
-  let drawer;
-  createTransition(() => drawer, () => !hide(), 'ant-drawer-fade');
+  let drawerRef;
+  createTransition(() => drawerRef, open, {
+    name: 'ant-drawer-fade'
+  });
   const direction = createMemo(() => ['top', 'bottom'].includes(props.placement) ? 'vertical' : 'horizontal');
+  const title = createMemo(() => unwrapStringOrJSXElement(props.title));
+  const extra = createMemo(() => unwrapStringOrJSXElement(props.extra));
   const children = createComponent(Transition, {
     name: "ant-drawer-fade",
+    onEnter: (el, done) => {
+      el.animate([], {
+        duration: 300
+      }).finished.finally(done);
+    },
+    onExit: (el, done) => {
+      el.animate([], {
+        duration: 300
+      }).finished.finally(done);
+    },
     get children() {
-      return createComponent(Show, {
+      return createComponent(Dynamic, {
+        get component() {
+          return props.destroyOnClose ? Show : DelayShow;
+        },
         get when() {
           return open();
         },
         get children() {
-          const _el$ = _tmpl$2(),
-            _el$2 = _el$.firstChild,
-            _el$3 = _el$2.firstChild,
-            _el$4 = _el$3.firstChild,
-            _el$6 = _el$4.firstChild,
-            _el$7 = _el$4.nextSibling,
-            _el$8 = _el$3.nextSibling;
-          _el$.$$click = () => {
-            if (props.maskClosable) {
-              instance.close();
-            }
-          };
-          const _ref$ = drawer;
-          typeof _ref$ === "function" ? use(_ref$, _el$) : drawer = _el$;
-          _el$2.$$click = e => {
-            e.stopPropagation();
-          };
-          insert(_el$4, createComponent(Show, {
-            get when() {
-              return props.closeIcon !== false;
+          return createComponent(Element, {
+            ref(r$) {
+              var _ref$ = drawerRef;
+              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');
+            },
+            get style() {
+              return {
+                '--ant-drawer-body-padding': 'var(--ant-padding-lg)',
+                ...props.style
+              };
             },
             get children() {
-              return createComponent(Button, {
-                type: "text",
-                size: "plain",
-                "class": "ant-mr-[var(--ant-margin-sm)] ant-text-size-[var(--ant-font-size-lg)] ant-h-[var(--ant-font-size-lg)] ant-leading-[var(--ant-font-size-lg)] hover:!ant-bg-transparent !ant-text-[var(--ant-color-icon)] hover:!ant-text-[var(--ant-color-icon-hover)]",
-                onClick: () => {
-                  instance?.close();
+              return [createComponent(Show, {
+                get when() {
+                  return props.mask;
                 },
                 get children() {
-                  return _tmpl$();
+                  var _el$ = _tmpl$();
+                  _el$.$$click = () => {
+                    if (props.maskClosable) {
+                      props.onClose?.();
+                    }
+                  };
+                  effect(() => className(_el$, cs('ant-drawer-mask', 'absolute inset-0 bg-[--ant-color-bg-mask]')));
+                  return _el$;
                 }
-              });
+              }), (() => {
+                var _el$2 = _tmpl$5(),
+                  _el$3 = _el$2.firstChild,
+                  _el$7 = _el$3.nextSibling;
+                _el$2.$$click = e => {
+                  e.stopPropagation();
+                };
+                insert(_el$3, createComponent(Show, {
+                  get when() {
+                    return props.closeIcon;
+                  },
+                  get children() {
+                    return createComponent(Button, {
+                      type: "text",
+                      size: "small",
+                      "class": "shrink-0 mr-[var(--ant-margin-sm)] text-size-[var(--ant-font-size-lg)] h-[var(--ant-font-size-lg)] leading-[var(--ant-font-size-lg)] hover:!bg-transparent !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)] !p-0",
+                      onClick: () => {
+                        props.onClose?.();
+                      },
+                      get children() {
+                        return _tmpl$2();
+                      }
+                    });
+                  }
+                }), null);
+                insert(_el$3, createComponent(Show, {
+                  get when() {
+                    return title();
+                  },
+                  get children() {
+                    var _el$5 = _tmpl$3();
+                    insert(_el$5, title);
+                    return _el$5;
+                  }
+                }), null);
+                insert(_el$3, createComponent(Show, {
+                  get when() {
+                    return extra();
+                  },
+                  get children() {
+                    var _el$6 = _tmpl$4();
+                    insert(_el$6, extra);
+                    return _el$6;
+                  }
+                }), null);
+                insert(_el$7, () => props.children);
+                effect(_p$ => {
+                  var _v$ = cs('ant-drawer-content', {
+                      left: 'ant-drawer-content-left',
+                      right: 'ant-drawer-content-right',
+                      top: 'ant-drawer-content-top',
+                      bottom: 'ant-drawer-content-bottom'
+                    }[props.placement], 'absolute bg-[--ant-color-bg-container-secondary] grid [grid-template-rows:auto_1fr]'),
+                    _v$2 = direction() === 'horizontal' ? props.size : undefined,
+                    _v$3 = direction() === 'vertical' ? props.size : undefined;
+                  _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+                  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("width", _v$2) : _el$2.style.removeProperty("width"));
+                  _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("height", _v$3) : _el$2.style.removeProperty("height"));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined
+                });
+                return _el$2;
+              })()];
             }
-          }), _el$6);
-          insert(_el$6, () => props.title);
-          insert(_el$7, () => props.extra);
-          insert(_el$8, () => props.children);
-          effect(_p$ => {
-            const _v$ = cs('ant-inset-0 ant-bg-[rgba(0,0,0,.45)] ant-z-1000', isBody() ? 'ant-fixed' : 'ant-absolute'),
-              _v$2 = cs('ant-drawer-content', {
-                left: 'ant-drawer-content-left',
-                right: 'ant-drawer-content-right',
-                top: 'ant-drawer-content-top',
-                bottom: 'ant-drawer-content-bottom'
-              }[props.placement], 'ant-absolute ant-bg-white ant-grid ant-[grid-template-rows:auto_1fr]'),
-              _v$3 = direction() === 'horizontal' ? props.width : undefined,
-              _v$4 = direction() === 'vertical' ? props.height : undefined;
-            _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-            _v$2 !== _p$._v$2 && className(_el$2, _p$._v$2 = _v$2);
-            _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("width", _v$3) : _el$2.style.removeProperty("width"));
-            _v$4 !== _p$._v$4 && ((_p$._v$4 = _v$4) != null ? _el$2.style.setProperty("height", _v$4) : _el$2.style.removeProperty("height"));
-            return _p$;
-          }, {
-            _v$: undefined,
-            _v$2: undefined,
-            _v$3: undefined,
-            _v$4: undefined
           });
-          return _el$;
         }
       });
     }
   });
-  return createComponent(Show, {
+  return createComponent(DelayShow, {
     get when() {
-      return props.getContainer !== false;
+      return open();
     },
-    fallback: children,
     get children() {
-      return createComponent(Portal, {
-        get mount() {
-          return container();
+      return createComponent(Show, {
+        get when() {
+          return props.getContainer !== false;
         },
-        children: children
+        fallback: children,
+        get children() {
+          return createComponent(Portal, {
+            get mount() {
+              return container();
+            },
+            children: children
+          });
+        }
       });
     }
   });

package/es/Drawer/index.scss.js

@@ -1,6 +1,6 @@
 import styleInject from '../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".ant-drawer-content-right {\n  top: 0;\n  bottom: 0;\n  right: 0;\n}\n\n.ant-drawer-content-left {\n  top: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.ant-drawer-content-top {\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n.ant-drawer-content-bottom {\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.ant-drawer-fade-enter-active,\n.ant-drawer-fade-exit-active {\n  transition: opacity 0.3s;\n}\n.ant-drawer-fade-enter-active .ant-drawer-content,\n.ant-drawer-fade-exit-active .ant-drawer-content {\n  transition: transform 0.3s;\n}\n\n.ant-drawer-fade-enter,\n.ant-drawer-fade-exit-to {\n  opacity: 0;\n}\n.ant-drawer-fade-enter .ant-drawer-content-right,\n.ant-drawer-fade-exit-to .ant-drawer-content-right {\n  transform: translateX(100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-left,\n.ant-drawer-fade-exit-to .ant-drawer-content-left {\n  transform: translateX(-100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-top,\n.ant-drawer-fade-exit-to .ant-drawer-content-top {\n  transform: translateY(-100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-bottom,\n.ant-drawer-fade-exit-to .ant-drawer-content-bottom {\n  transform: translateY(100%);\n}";
+var css_248z = ".ant-drawer-content-right {\n  top: 0;\n  bottom: 0;\n  right: 0;\n}\n\n.ant-drawer-content-left {\n  top: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.ant-drawer-content-top {\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n.ant-drawer-content-bottom {\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.ant-drawer-fade-enter-active .ant-drawer-mask,\n.ant-drawer-fade-exit-active .ant-drawer-mask {\n  transition: opacity 0.3s;\n}\n.ant-drawer-fade-enter-active .ant-drawer-content,\n.ant-drawer-fade-exit-active .ant-drawer-content {\n  transition: transform 0.3s;\n}\n\n.ant-drawer-fade-enter .ant-drawer-mask,\n.ant-drawer-fade-exit-to .ant-drawer-mask {\n  opacity: 0;\n}\n.ant-drawer-fade-enter .ant-drawer-content-right,\n.ant-drawer-fade-exit-to .ant-drawer-content-right {\n  transform: translateX(100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-left,\n.ant-drawer-fade-exit-to .ant-drawer-content-left {\n  transform: translateX(-100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-top,\n.ant-drawer-fade-exit-to .ant-drawer-content-top {\n  transform: translateY(-100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-bottom,\n.ant-drawer-fade-exit-to .ant-drawer-content-bottom {\n  transform: translateY(100%);\n}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/es/Dropdown/index.d.ts

@@ -0,0 +1,16 @@
+import { type Component } from 'solid-js';
+import { type PopoverProps } from '../Popover';
+import { type MenuProps } from '../Menu';
+export interface DropdownProps extends Omit<PopoverProps, 'placement'> {
+    /**
+     * 菜单配置项
+     */
+    menu: MenuProps;
+    /**
+     * 菜单弹出位置
+     * 默认 'bottomLeft'
+     */
+    placement?: 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+}
+declare const Dropdown: Component<DropdownProps>;
+export default Dropdown;

package/es/Dropdown/index.js

@@ -0,0 +1,47 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps, splitProps, children } from 'solid-js';
+import Popover from '../Popover/index.js';
+import Menu from '../Menu/index.js';
+import 'lodash-es';
+import useSize from '../hooks/useSize.js';
+
+const Dropdown = _props => {
+  const props = mergeProps({
+    placement: 'bottomLeft'
+  }, _props);
+  const [, popoverProps] = splitProps(props, ['menu']);
+  const resolvedChildren = children(() => _props.children);
+  const size = useSize(() => {
+    const _children = resolvedChildren();
+    return _children instanceof HTMLElement ? _children : undefined;
+  }, 'offset');
+  return createComponent(Popover, mergeProps$1({
+    get arrow() {
+      return props.arrow ?? false;
+    },
+    content: close => createComponent(Menu, mergeProps$1({
+      selectable: false
+    }, () => props.menu, {
+      get style() {
+        return {
+          '--ant-menu-item-height': '32px',
+          'min-width': `${size()?.width ?? 0}px`,
+          ...props.menu.style
+        };
+      },
+      onClick: info => {
+        close();
+        props.menu?.onClick?.(info);
+      }
+    })),
+    contentStyle: {
+      padding: 0
+    }
+  }, popoverProps, {
+    get children() {
+      return resolvedChildren();
+    }
+  }));
+};
+
+export { Dropdown as default };

package/es/Element/index.d.ts

@@ -0,0 +1,10 @@
+import { type JSX, type ParentProps } from 'solid-js';
+import { type StyleProps } from '../types';
+export type ElementProps<T = JSX.HTMLAttributes<HTMLDivElement>> = T & StyleProps & ParentProps & {
+    /**
+       * 默认 'div'
+       */
+    tag?: string;
+};
+declare function Element<T = JSX.HTMLAttributes<HTMLDivElement>>(_props: ElementProps<T>): JSX.Element;
+export default Element;

package/es/Element/index.js

@@ -0,0 +1,42 @@
+import { createComponent, Dynamic, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps, useContext, onMount } from 'solid-js';
+import cs from 'classnames';
+import ConfigProviderContext from '../ConfigProvider/context.js';
+
+function Element(_props) {
+  const props = mergeProps({
+    tag: 'div'
+  }, _props);
+  const {
+    theme,
+    cssVariablesClass,
+    cssVariables
+  } = useContext(ConfigProviderContext);
+  onMount(() => {
+    let styleTag = document.head.querySelector(`[data-token-hash=${cssVariablesClass}]`);
+    if (styleTag) return;
+    styleTag = document.createElement('style');
+    styleTag.setAttribute('type', 'text/css');
+    styleTag.setAttribute('data-token-hash', cssVariablesClass);
+    const cssVariablesStr = Object.entries(cssVariables()).map(([key, value]) => `${key}: ${value};`).join('\n');
+    styleTag.innerHTML = `
+        .${cssVariablesClass} {
+          ${theme() === 'dark' ? 'color-scheme: dark;' : ''}
+
+          ${cssVariablesStr}
+        }
+      `;
+    document.head.appendChild(styleTag);
+  });
+  return createComponent(Dynamic, mergeProps$1({
+    get component() {
+      return props.tag;
+    }
+  }, props, {
+    get ["class"]() {
+      return cs(cssVariablesClass, props.class);
+    }
+  }));
+}
+
+export { Element as default };

package/es/Empty/PRESENTED_IMAGE_SIMPLE.d.ts

@@ -1,3 +1,4 @@
 import { type Component } from 'solid-js';
-declare const PRESENTED_IMAGE_SIMPLE: Component;
+import { type EmptyProps } from '.';
+declare const PRESENTED_IMAGE_SIMPLE: Component<EmptyProps>;
 export default PRESENTED_IMAGE_SIMPLE;

package/es/Empty/PRESENTED_IMAGE_SIMPLE.js

@@ -1,14 +1,30 @@
-import { insert, createComponent, template } from 'solid-js/web';
+import { createComponent, insert, template } from 'solid-js/web';
+import cs from 'classnames';
 import EmptySvg from './assets/SimpleEmptySvg.js';
+import Element from '../Element/index.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<div class="ant-my-[var(--ant-margin-xl)] ant-mx-[var(--ant-margin-xs)]"><div class="ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center"></div><div class="ant-text-[var(--ant-color-text-disabled)] ant-text-center">暂无数据`);
-const PRESENTED_IMAGE_SIMPLE = () => {
-  return (() => {
-    const _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild;
-    insert(_el$2, createComponent(EmptySvg, {}));
-    return _el$;
-  })();
+var _tmpl$ = /*#__PURE__*/template(`<div class="mb-[var(--ant-margin-xs)] flex justify-center">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="text-[var(--ant-color-text-description)] text-center">`);
+const PRESENTED_IMAGE_SIMPLE = props => {
+  return createComponent(Element, {
+    get ["class"]() {
+      return cs('my-[var(--ant-margin-xl)] mx-[var(--ant-margin-xs)]', props.class);
+    },
+    get style() {
+      return props.style;
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$();
+        insert(_el$, createComponent(EmptySvg, {}));
+        return _el$;
+      })(), (() => {
+        var _el$2 = _tmpl$2();
+        insert(_el$2, () => props.description ?? '暂无数据');
+        return _el$2;
+      })()];
+    }
+  });
 };
 
 export { PRESENTED_IMAGE_SIMPLE as default };

package/es/Empty/assets/EmptySvg.js

@@ -1,6 +1,6 @@
 import { template } from 'solid-js/web';
 
-const _tmpl$ = /*#__PURE__*/template(`<svg width="184" height="100" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(24 31.67)"><ellipse fill-opacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse><path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path><path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path><path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path><path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path></g><path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path><g transform="translate(149.65 15.383)" fill="#FFF"><ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse><path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z">`);
+var _tmpl$ = /*#__PURE__*/template(`<svg width=184 height=100 viewBox="0 0 184 152"xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g transform="translate(24 31.67)"><ellipse fill-opacity=.8 fill=#F5F5F7 cx=67.797 cy=106.89 rx=67.797 ry=12.668></ellipse><path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"fill=#AEB8C2></path><path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"fill=url(#linearGradient-1) transform=translate(13.56)></path><path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"fill=#F5F5F7></path><path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"fill=#DCE0E6></path></g><path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"fill=#DCE0E6></path><g transform="translate(149.65 15.383)"fill=#FFF><ellipse cx=20.654 cy=3.167 rx=2.849 ry=2.815></ellipse><path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z">`);
 const EmptySvg = () => _tmpl$();
 
 export { EmptySvg as default };

package/es/Empty/assets/SimpleEmptySvg.js

@@ -1,6 +1,6 @@
 import { template } from 'solid-js/web';
 
-const _tmpl$ = /*#__PURE__*/template(`<svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fill-rule="evenodd"><ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"></ellipse><g fill-rule="nonzero" stroke="#d9d9d9"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#fafafa">`);
+var _tmpl$ = /*#__PURE__*/template(`<svg width=64 height=41 viewBox="0 0 64 41"xmlns=http://www.w3.org/2000/svg><g transform="translate(0 1)"fill=none fill-rule=evenodd><ellipse fill=#f5f5f5 cx=32 cy=33 rx=32 ry=7></ellipse><g fill-rule=nonzero stroke=#d9d9d9><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"fill=#fafafa>`);
 const EmptySvg = () => _tmpl$();
 
 export { EmptySvg as default };

package/es/Empty/index.d.ts

@@ -1,5 +1,11 @@
-import { type Component } from 'solid-js';
-declare const Empty: Component & {
-    PRESENTED_IMAGE_SIMPLE: Component;
+import { type JSXElement, type Component, type JSX } from 'solid-js';
+import PRESENTED_IMAGE_SIMPLE from './PRESENTED_IMAGE_SIMPLE';
+export interface EmptyProps {
+    description?: JSXElement;
+    class?: string;
+    style?: JSX.CSSProperties;
+}
+declare const Empty: Component<EmptyProps> & {
+    PRESENTED_IMAGE_SIMPLE: typeof PRESENTED_IMAGE_SIMPLE;
 };
 export default Empty;

package/es/Empty/index.js

@@ -1,15 +1,30 @@
-import { insert, createComponent, template } from 'solid-js/web';
+import { createComponent, insert, template } from 'solid-js/web';
 import PRESENTED_IMAGE_SIMPLE from './PRESENTED_IMAGE_SIMPLE.js';
 import EmptySvg from './assets/EmptySvg.js';
+import Element from '../Element/index.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<div><div class="ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center"></div><div class="ant-text-[var(--ant-color-text)] ant-text-center">暂无数据`);
-const Empty = () => {
-  return (() => {
-    const _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild;
-    insert(_el$2, createComponent(EmptySvg, {}));
-    return _el$;
-  })();
+var _tmpl$ = /*#__PURE__*/template(`<div class="mb-[var(--ant-margin-xs)] flex justify-center">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="text-[var(--ant-color-text)] text-center">`);
+const Empty = props => {
+  return createComponent(Element, {
+    get ["class"]() {
+      return props.class;
+    },
+    get style() {
+      return props.style;
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$();
+        insert(_el$, createComponent(EmptySvg, {}));
+        return _el$;
+      })(), (() => {
+        var _el$2 = _tmpl$2();
+        insert(_el$2, () => props.description ?? '暂无数据');
+        return _el$2;
+      })()];
+    }
+  });
 };
 Empty.PRESENTED_IMAGE_SIMPLE = PRESENTED_IMAGE_SIMPLE;
 

package/es/Form/Form.d.ts

@@ -1,10 +1,13 @@
-import { type JSXElement, type Ref } from 'solid-js';
-import { set } from 'lodash-es';
+import { type JSX, type JSXElement, type Ref } from 'solid-js';
+import { get, set } from 'lodash-es';
+import { type StyleProps } from '../types';
 export interface FormInstance<T extends {} = {}> {
     validateFields: () => Promise<T>;
+    getFieldValue: (name: Parameters<typeof get>[1]) => any;
     setFieldValue: (name: Parameters<typeof set>[1], value: any) => void;
+    removeFieldValue: (name: Parameters<typeof set>[1]) => void;
 }
-export interface FormProps<T extends {} = {}> {
+export interface FormProps<T extends {} = {}> extends StyleProps {
     ref?: Ref<FormInstance<T>>;
     /**
      * 表单布局
@@ -12,7 +15,7 @@ export interface FormProps<T extends {} = {}> {
      */
     layout?: 'horizontal' | 'vertical' | 'inline';
     children: JSXElement;
-    initialValues?: T;
+    initialValues?: Partial<T>;
 }
-declare function Form<T extends {} = {}>(_props: FormProps<T>): import("solid-js").JSX.Element;
+declare function Form<T extends {} = {}>(_props: FormProps<T>): JSX.Element;
 export default Form;