antd-solid 0.0.12 → 0.0.13

package/es/Form/Form.js

@@ -1,22 +1,27 @@
-import { insert, createComponent, template } from 'solid-js/web';
-import { mergeProps, onMount, createSignal, createMemo } from 'solid-js';
-import { max, get, set } from 'lodash-es';
-import Context from './context.js';
+import { createComponent } from 'solid-js/web';
+import { mergeProps, untrack, createSignal, createMemo } from 'solid-js';
+import { createStore, produce } from 'solid-js/store';
+import { cloneDeep, max, get, set, unset } from 'lodash-es';
+import cs from 'classnames';
+import FormContext from './context.js';
+import { setRef } from '../utils/solid.js';
+import Element from '../Element/index.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<form>`);
 function Form(_props) {
   const props = mergeProps({
     layout: 'horizontal'
   }, _props);
   const rulesDict = {};
+  /**
+   * 用于设置错误消息方法的字典
+   */
   const setErrMsgDict = {};
-  const values = props.initialValues ? {
-    ...props.initialValues
-  } : {};
+  const [values, setValues] = createStore(untrack(() => props.initialValues ? cloneDeep(props.initialValues) : {}));
   const formInstance = {
     async validateFields() {
+      const cloneValues = untrack(() => cloneDeep(values));
       const promises = Object.entries(rulesDict).flatMap(([name, rules]) => {
-        return rules.map(async rule => await rule.validate(get(values, name)).catch(err => {
+        return rules.map(async rule => await rule.validate(get(cloneValues, name)).catch(err => {
           setErrMsgDict[name](err.message);
           throw err;
         }));
@@ -26,45 +31,56 @@ function Form(_props) {
         // eslint-disable-next-line @typescript-eslint/no-throw-literal
         throw {
           errorFields: results.filter(res => res.status === 'rejected'),
-          values
+          values: cloneValues
         };
       }
-      return values;
+      return cloneValues;
+    },
+    getFieldValue(name) {
+      return get(values, name);
     },
     setFieldValue(name, value) {
-      set(values, name, value);
+      setValues(produce(s => {
+        set(s, name, value);
+      }));
+    },
+    removeFieldValue(name) {
+      setValues(produce(s => {
+        unset(s, name);
+      }));
     }
   };
-  onMount(() => {
-    if (typeof _props.ref === 'function') {
-      _props.ref?.(formInstance);
-    }
-  });
+  setRef(_props, formInstance);
   // 存储 form item 的 dom 节点宽度
   const [itemWidthDict, setItemWidthDict] = createSignal({});
   const maxItemWidth = createMemo(() => max(Object.values(itemWidthDict())));
-  return (() => {
-    const _el$ = _tmpl$();
-    _el$.addEventListener("submit", e => {
+  return createComponent(Element, {
+    tag: "form",
+    get ["class"]() {
+      return cs(props.class, '[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', props.layout === 'inline' ? 'inline-flex flex-wrap' : '');
+    },
+    get style() {
+      return props.style;
+    },
+    onSubmit: e => {
       e.preventDefault();
-    });
-    insert(_el$, createComponent(Context.Provider, {
-      get value() {
-        return {
+    },
+    get children() {
+      return createComponent(FormContext.Provider, {
+        value: {
           formInstance,
           rulesDict,
           setErrMsgDict,
-          initialValues: props.initialValues,
           setItemWidthDict,
-          maxItemWidth
-        };
-      },
-      get children() {
-        return props.children;
-      }
-    }));
-    return _el$;
-  })();
+          maxItemWidth,
+          layout: () => props.layout
+        },
+        get children() {
+          return props.children;
+        }
+      });
+    }
+  });
 }
 
 export { Form as default };

package/es/Form/FormItem.d.ts

@@ -1,9 +1,9 @@
-import { type JSXElement, type Component, type JSX } from 'solid-js';
+import { type JSXElement, type JSX, type Component } from 'solid-js';
 import { type Schema } from 'yup';
 export interface FormItemComponentProps<T = any> {
-    defaultValue?: T;
+    value?: T | undefined;
     status?: 'error' | 'warning';
-    onChange?: (value: T) => void;
+    onChange: (value: T) => void;
 }
 export interface FormItemProps {
     class?: string;
@@ -13,7 +13,12 @@ export interface FormItemProps {
     name?: string;
     initialValue?: any;
     rules?: Schema[];
-    component: Component<FormItemComponentProps>;
+    /**
+     * 是否隐藏
+     * 和 when 的区别，只是不会显示，但值依然会存在
+     */
+    hidden?: boolean;
+    component?: Component<FormItemComponentProps>;
 }
-declare const FormItem: Component<FormItemProps>;
+declare const FormItem: (props: FormItemProps) => JSX.Element;
 export default FormItem;

package/es/Form/FormItem.js

@@ -1,49 +1,61 @@
-import { insert, createComponent, Dynamic, effect, className, style, template, spread, mergeProps } from 'solid-js/web';
-import { useContext, createSignal, onMount, onCleanup, Show } from 'solid-js';
-import { isNil, get } from 'lodash-es';
+import { createComponent, use, insert, effect, className, Dynamic, memo, template } from 'solid-js/web';
+import { useContext, createSignal, createEffect, onCleanup, onMount, on, Show } from 'solid-js';
+import { set, unset, isNil } from 'lodash-es';
 import { nanoid } from 'nanoid';
 import cs from 'classnames';
-import Context from './context.js';
+import FormContext from './context.js';
+import Element from '../Element/index.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<span class="ant-mr-4px ant-text-[var(--ant-color-error)]">*`),
-  _tmpl$2 = /*#__PURE__*/template(`<label>`),
-  _tmpl$3 = /*#__PURE__*/template(`<div class="ant-text-[var(--ant-color-error)]">`),
-  _tmpl$4 = /*#__PURE__*/template(`<div><div class="ant-w-full">`);
+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>`);
 const FormItem = props => {
   const {
     formInstance,
     rulesDict,
     setErrMsgDict,
-    initialValues,
     setItemWidthDict,
-    maxItemWidth
-  } = useContext(Context);
+    maxItemWidth,
+    layout
+  } = useContext(FormContext);
   const [errMsg, setErrMsg] = createSignal('');
   const id = nanoid();
-  onMount(() => {
-    if (isNil(props.name)) return;
-    if (!isNil(props.initialValue)) {
-      formInstance.setFieldValue(props.name, props.initialValue);
-    }
-    if (!isNil(props.rules)) {
-      rulesDict[props.name] = props.rules;
+  createEffect(() => {
+    if (props.name && props.rules && rulesDict && setErrMsgDict) {
+      set(rulesDict, props.name, props.rules);
+      set(setErrMsgDict, props.name, setErrMsg);
+      onCleanup(() => {
+        unset(rulesDict, props.name);
+        unset(setErrMsgDict, props.name);
+      });
     }
-    setErrMsgDict[props.name] = setErrMsg;
   });
   let label;
+  console.log('onMount before');
   onMount(() => {
+    console.log('onMount', label);
+  });
+  console.log('onMount after');
+  createEffect(on(() => !props.hidden && layout() === 'horizontal', input => {
+    console.log('label', label);
+    setTimeout(() => {
+      console.log('label after', label);
+    }, 1000);
+    if (!input || !label) return;
     const resizeObserver = new ResizeObserver(entries => {
       const [entry] = entries;
       // Firefox implements `borderBoxSize` as a single content rect, rather than an array
       const borderBoxSize = Array.isArray(entry.borderBoxSize) ? entry.borderBoxSize[0] : entry.borderBoxSize;
-      setItemWidthDict(dict => ({
+      setItemWidthDict?.(dict => ({
         ...dict,
         [id]: borderBoxSize.inlineSize
       }));
     });
     resizeObserver.observe(label);
     onCleanup(() => {
-      setItemWidthDict(dict => {
+      setItemWidthDict?.(dict => {
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
         delete dict[id];
         return {
@@ -52,90 +64,95 @@ const FormItem = props => {
       });
       resizeObserver.disconnect();
     });
+  }));
+  return createComponent(Show, {
+    get when() {
+      return !props.hidden;
+    },
+    get children() {
+      return createComponent(Element, {
+        get ["class"]() {
+          return cs(props.class, 'mb-[--ant-margin-lg]', layout() === 'horizontal' && 'flex items-center', layout() === 'inline' && 'inline-flex mr-[--ant-margin-lg]');
+        },
+        get style() {
+          return props.style;
+        },
+        get children() {
+          return [(() => {
+            var _el$ = _tmpl$3(),
+              _el$2 = _el$.firstChild;
+            var _ref$ = label;
+            typeof _ref$ === "function" ? use(_ref$, _el$2) : label = _el$2;
+            insert(_el$2, createComponent(Show, {
+              get when() {
+                return !isNil(props.label);
+              },
+              get children() {
+                var _el$3 = _tmpl$();
+                insert(_el$3, () => props.label);
+                return _el$3;
+              }
+            }), null);
+            insert(_el$2, createComponent(Show, {
+              get when() {
+                return !isNil(props.required);
+              },
+              get children() {
+                return _tmpl$2();
+              }
+            }), null);
+            effect(_p$ => {
+              var _v$ = layout() === 'horizontal' && maxItemWidth ? `${maxItemWidth() ?? 0}px` : undefined,
+                _v$2 = cs('shrink-0 leading-32px not[:empty]:h-32px not[:empty]:pr-8px text-right [white-space:nowrap]');
+              _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("width", _v$) : _el$.style.removeProperty("width"));
+              _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$;
+          })(), (() => {
+            var _el$5 = _tmpl$5(),
+              _el$6 = _el$5.firstChild;
+            insert(_el$6, createComponent(Dynamic, {
+              get component() {
+                return props.component;
+              },
+              get value() {
+                return memo(() => !!props.name)() ? formInstance?.getFieldValue(props.name) : undefined;
+              },
+              get status() {
+                return errMsg() ? 'error' : undefined;
+              },
+              onChange: value => {
+                if (!isNil(props.name)) formInstance?.setFieldValue(props.name, value);
+                props.rules?.forEach(rule => {
+                  rule.validate(value).then(() => {
+                    setErrMsg('');
+                  }).catch(err => {
+                    setErrMsg(err.message);
+                  });
+                });
+              }
+            }));
+            insert(_el$5, createComponent(Show, {
+              get when() {
+                return errMsg();
+              },
+              get children() {
+                var _el$7 = _tmpl$4();
+                insert(_el$7, errMsg);
+                return _el$7;
+              }
+            }), null);
+            effect(() => (layout() === 'horizontal' && maxItemWidth ? `calc(100% - ${maxItemWidth() ?? 0}px)` : undefined) != null ? _el$5.style.setProperty("width", layout() === 'horizontal' && maxItemWidth ? `calc(100% - ${maxItemWidth() ?? 0}px)` : undefined) : _el$5.style.removeProperty("width"));
+            return _el$5;
+          })()];
+        }
+      });
+    }
   });
-  const getLabel = hidden => (() => {
-    const _el$ = _tmpl$2();
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return cs('ant-shrink-0 ant-h-32px ant-leading-32px not[:empty]:ant-pr-8px ant-text-right ant-[white-space:nowrap]', hidden && 'ant-absolute ant-opacity-0');
-      }
-    }, () => hidden ? {
-      ref: el => {
-        label = el;
-      }
-    } : {
-      style: {
-        width: `${maxItemWidth() ?? 0}px`
-      }
-    }), false, true);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return !isNil(props.required);
-      },
-      get children() {
-        return _tmpl$();
-      }
-    }), null);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return !isNil(props.label);
-      },
-      get children() {
-        const _el$3 = _tmpl$2();
-        insert(_el$3, () => props.label);
-        return _el$3;
-      }
-    }), null);
-    return _el$;
-  })();
-  return (() => {
-    const _el$4 = _tmpl$4(),
-      _el$5 = _el$4.firstChild;
-    insert(_el$4, () => getLabel(true), _el$5);
-    insert(_el$4, getLabel, _el$5);
-    insert(_el$5, createComponent(Dynamic, {
-      get component() {
-        return props.component;
-      },
-      get defaultValue() {
-        return props.initialValue ?? get(initialValues, props.name);
-      },
-      get status() {
-        return errMsg() ? 'error' : undefined;
-      },
-      onChange: value => {
-        if (!isNil(props.name)) formInstance.setFieldValue(props.name, value);
-        props.rules?.forEach(rule => {
-          rule.validate(value).then(() => {
-            setErrMsg('');
-          }).catch(err => {
-            setErrMsg(err.message);
-          });
-        });
-      }
-    }), null);
-    insert(_el$5, createComponent(Show, {
-      get when() {
-        return errMsg();
-      },
-      get children() {
-        const _el$6 = _tmpl$3();
-        insert(_el$6, errMsg);
-        return _el$6;
-      }
-    }), null);
-    effect(_p$ => {
-      const _v$ = cs(props.class, 'ant-flex ant-items-center ant-mb-16px'),
-        _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$4, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$4, _v$2, _p$._v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-    return _el$4;
-  })();
 };
 
 export { FormItem as default };

package/es/Form/context.d.ts

@@ -1,12 +1,12 @@
 import { type Setter, type Accessor } from 'solid-js';
-import { type FormInstance } from './Form';
 import { type Schema } from 'yup';
-declare const Context: import("solid-js").Context<{
-    formInstance: FormInstance;
-    rulesDict: Record<string, Schema[]>;
-    setErrMsgDict: Record<string, Setter<string>>;
-    initialValues: {};
-    setItemWidthDict: Setter<Record<string, number>>;
-    maxItemWidth: Accessor<number | undefined>;
+import { type FormProps, type FormInstance } from './Form';
+declare const FormContext: import("solid-js").Context<{
+    formInstance?: FormInstance<{}> | undefined;
+    rulesDict?: Record<string, Schema<any, any, any, "">[]> | undefined;
+    setErrMsgDict?: Record<string, Setter<string>> | undefined;
+    setItemWidthDict?: Setter<Record<string, number>> | undefined;
+    maxItemWidth?: Accessor<number | undefined> | undefined;
+    layout: Accessor<FormProps['layout']>;
 }>;
-export default Context;
+export default FormContext;

package/es/Form/context.js

@@ -1,5 +1,7 @@
 import { createContext } from 'solid-js';
 
-const Context = createContext({});
+const FormContext = createContext({
+  layout: () => 'horizontal'
+});
 
-export { Context as default };
+export { FormContext as default };

package/es/Fragment/index.d.ts

@@ -0,0 +1,4 @@
+import { type Component, type ParentProps } from 'solid-js';
+type FragmentProps = ParentProps & Record<string, any>;
+declare const Fragment: Component<FragmentProps>;
+export default Fragment;

package/es/Fragment/index.js

@@ -0,0 +1,7 @@
+import { memo } from 'solid-js/web';
+
+const Fragment = props => {
+  return memo(() => props.children);
+};
+
+export { Fragment as default };

package/es/Image/index.d.ts

@@ -0,0 +1,10 @@
+import { type Component } from 'solid-js';
+import { type RootStyleProps, type StyleProps } from '../types';
+export interface ImageProps extends RootStyleProps, StyleProps {
+    width?: string | number;
+    height?: string | number;
+    src?: string;
+    fallback?: string;
+}
+declare const Image: Component<ImageProps>;
+export default Image;

package/es/Image/index.js

@@ -0,0 +1,37 @@
+import { spread, mergeProps, effect, className, style, template } from 'solid-js/web';
+import cs from 'classnames';
+
+var _tmpl$ = /*#__PURE__*/template(`<div><img>`);
+const Image = props => {
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    spread(_el$2, mergeProps(props, {
+      get src() {
+        return props.src ? props.src : props.fallback;
+      },
+      "onError": e => {
+        if (props.fallback) {
+          e.currentTarget.src = props.fallback;
+        }
+      }
+    }), false, false);
+    effect(_p$ => {
+      var _v$ = cs(props.rootClass, 'inline-block'),
+        _v$2 = {
+          width: typeof props.width === 'string' ? props.width : undefined,
+          height: typeof props.height === 'string' ? props.height : undefined,
+          ...props.rootStyle
+        };
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+};
+
+export { Image as default };

package/es/Input/TextArea.d.ts

@@ -0,0 +1,23 @@
+import { type JSX, type Component, type Ref } from 'solid-js';
+import { type RootStyleProps } from '../types';
+export interface TextAreaProps extends RootStyleProps, Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> {
+    ref?: Ref<HTMLTextAreaElement>;
+    defaultValue?: string | null | undefined;
+    value?: string | null | undefined;
+    autoFocus?: boolean;
+    /**
+     * 设置校验状态
+     */
+    status?: 'error' | 'warning';
+    /**
+     * 设置尺寸
+     * 默认 'middle'
+     * 高度分别为 40px、32px 和 24px
+     */
+    size?: 'small' | 'middle' | 'large';
+    onChange?: JSX.InputEventHandler<HTMLTextAreaElement, InputEvent>;
+    onPressEnter?: JSX.EventHandler<HTMLTextAreaElement, KeyboardEvent>;
+    onKeyDown?: JSX.EventHandler<HTMLTextAreaElement, KeyboardEvent>;
+}
+declare const TextArea: Component<TextAreaProps>;
+export default TextArea;

package/es/Input/TextArea.js

@@ -0,0 +1,84 @@
+import { createComponent, use, spread, mergeProps, template } from 'solid-js/web';
+import { splitProps, onMount } from 'solid-js';
+import cs from 'classnames';
+import Element from '../Element/index.js';
+import createControllableValue from '../hooks/createControllableValue.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+import { statusClassDict } from './index.js';
+import useFocus from '../hooks/useFocus.js';
+import { setRef } from '../utils/solid.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<textarea>`);
+const TextArea = props => {
+  const size = useComponentSize(() => props.size);
+  const [_, inputProps] = splitProps(props, ['defaultValue', 'value', 'onChange', 'onPressEnter', 'onKeyDown', 'size', 'autoFocus', 'status']);
+  let inputRef;
+  const foucs = useFocus(() => inputRef);
+  onMount(() => {
+    if (props.autoFocus) {
+      inputRef?.focus();
+    }
+  });
+  const isControlled = () => Object.keys(props).includes('value');
+  const [value, setValue] = createControllableValue(props, {
+    trigger: null
+  });
+  return createComponent(Element, {
+    get ["class"]() {
+      return cs(props.rootClass, 'flex');
+    },
+    get style() {
+      return {
+        '--ant-input-padding': {
+          small: '0 7px',
+          middle: '4px 11px',
+          large: '7px 11px'
+        }[size()],
+        '--ant-input-font-size': {
+          small: 'var(--ant-font-size)',
+          middle: 'var(--ant-font-size)',
+          large: 'var(--ant-font-size-lg)'
+        }[size()],
+        ...props.rootStyle
+      };
+    },
+    get children() {
+      var _el$ = _tmpl$();
+      use(el => {
+        setRef(props, el);
+        inputRef = el;
+      }, _el$);
+      spread(_el$, mergeProps(inputProps, {
+        get ["class"]() {
+          return cs('p-[--ant-input-padding] border-1px border-solid bg-[--ant-color-bg-container]', 'w-full h-full [font-size:var(--ant-input-font-size)] [outline:none] placeholder-text-[var(--ant-color-text-placeholder)]', props.disabled && 'color-[var(--ant-color-text-disabled)] cursor-not-allowed', {
+            small: 'rounded-[var(--ant-border-radius-sm)]',
+            middle: 'rounded-[var(--ant-border-radius)]',
+            large: 'rounded-[var(--ant-border-radius-lg)]'
+          }[size()], statusClassDict[props.status ?? 'default'](!!props.disabled, foucs()), props.class);
+        },
+        get value() {
+          return value() ?? '';
+        },
+        "onInput": e => {
+          setValue(e.target.value);
+          try {
+            props.onChange?.(e);
+          } finally {
+            if (isControlled() && e.target.value !== props.value) {
+              e.target.value = props.value ?? '';
+            }
+          }
+        },
+        "onKeyDown": e => {
+          if (e.key === 'Enter') {
+            props.onPressEnter?.(e);
+          }
+          props.onKeyDown?.(e);
+        }
+      }), false, false);
+      return _el$;
+    }
+  });
+};
+
+export { TextArea as default };

package/es/Input/index.d.ts

@@ -0,0 +1,44 @@
+import type { JSX, Component, JSXElement, Ref } from 'solid-js';
+import TextArea from './TextArea';
+import './index.scss';
+import { type RootStyleProps } from '../types';
+type CommonInputProps = RootStyleProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'prefix' | 'suffix'> & {
+    ref?: Ref<HTMLInputElement>;
+    defaultValue?: string | null | undefined;
+    value?: string | null | undefined;
+    addonBefore?: JSXElement;
+    addonAfter?: JSXElement;
+    prefix?: JSXElement;
+    suffix?: JSXElement;
+    /**
+       * 仅供 InputNumber 使用
+       */
+    actions?: JSXElement;
+    /**
+       * 设置校验状态
+       */
+    status?: 'error' | 'warning';
+    /**
+       * 设置尺寸
+       * 默认 'middle'
+       * 高度分别为 40px、32px 和 24px
+       */
+    size?: 'small' | 'middle' | 'large';
+    autoFocus?: boolean;
+    allowClear?: boolean;
+    onChange?: JSX.InputEventHandler<HTMLInputElement, InputEvent>;
+    onPressEnter?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;
+    onKeyDown?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;
+};
+export declare const statusClassDict: {
+    default: (disabled: boolean, foucs: boolean) => "border-[--ant-color-border]" | "border-[--ant-color-primary] [box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]" | "border-[--ant-color-border] hover:border-[--ant-color-primary]";
+    error: (disabled: boolean, foucs: boolean) => "border-[--ant-color-error]" | "border-[--ant-color-error] [box-shadow:0_0_0_2px_rgba(255,38,5,.06)]" | "border-[--ant-color-error] hover:border-[--ant-color-error-border-hover]";
+    warning: (disabled: boolean, foucs: boolean) => "border-[--ant-color-warning]" | "border-[--ant-color-warning] [box-shadow:0_0_0_2px_rgba(255,215,5,.1)]" | "border-[--ant-color-warning] hover:border-[--ant-color-warning-border-hover]";
+};
+export declare function CommonInput(props: CommonInputProps): JSX.Element;
+export type InputProps = Omit<CommonInputProps, 'actions' | 'textarea'>;
+declare const Input: Component<InputProps> & {
+    TextArea: typeof TextArea;
+};
+export type { TextAreaProps } from './TextArea';
+export default Input;