antd-solid 0.0.6 → 0.0.8

package/es/Tree.js

@@ -0,0 +1,198 @@
+import { delegateEvents, createComponent, setAttribute, insert, effect, className, memo, template } from 'solid-js/web';
+import { isEmpty } from 'lodash-es';
+import { createContext, createSignal, createSelector, untrack, useContext, Index, Show } from 'solid-js';
+import cs from 'classnames';
+
+const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:minus-square-outlined">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div class="flex-shrink-0" role="indent"></div><div class="ant-flex-shrink-0 ant-w-24px ant-h-24px ant-flex ant-items-center ant-justify-center"><span class="i-ant-design:holder-outlined"></span></div><div></div><div>`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="ant-inline-block ant-w-24px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<span class="i-ant-design:plus-square-outlined">`);
+const TreeContext = createContext({});
+/**
+ * 单层级 tree
+ */
+function SingleLevelTree(props) {
+  const [expanded, setExpanded] = createSignal(props.defaultExpandAll);
+  const {
+    selectedNodes,
+    setSelectedNodes,
+    draggableNode,
+    setDraggableNode,
+    draggableIndexes,
+    setDraggableIndexes,
+    isDraggable,
+    targetNode,
+    setTargetNode,
+    targetIndexes,
+    setTargetIndexes,
+    isTarget,
+    draggable,
+    onDrop
+  } = useContext(TreeContext);
+  return createComponent(Index, {
+    get each() {
+      return props.treeData;
+    },
+    children: (item, i) => {
+      const indexes = [...(props.parentIndexes ?? []), i];
+      return [(() => {
+        const _el$ = _tmpl$2(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling,
+          _el$4 = _el$3.nextSibling,
+          _el$6 = _el$4.nextSibling;
+        _el$.addEventListener("dragend", () => {
+          onDrop?.({
+            dragNode: draggableNode(),
+            dragIndexes: draggableIndexes(),
+            targetNode: targetNode(),
+            targetIndexes: targetIndexes()
+          });
+          setDraggableNode(null);
+          setDraggableIndexes(null);
+          setTargetNode(null);
+          setTargetIndexes(null);
+        });
+        _el$.addEventListener("dragleave", e => {
+          if (item() === targetNode() && e.relatedTarget) {
+            setTargetNode(null);
+            setTargetIndexes(null);
+          }
+        });
+        _el$.addEventListener("dragenter", () => {
+          if (item() !== draggableNode()) {
+            setTargetNode(item());
+            setTargetIndexes(indexes);
+          }
+        });
+        _el$.addEventListener("dragstart", () => {
+          setDraggableNode(item());
+          setDraggableIndexes(indexes);
+        });
+        setAttribute(_el$, "draggable", draggable);
+        insert(_el$2, () => Array(props.indent).fill(0).map(() => _tmpl$3()));
+        insert(_el$4, createComponent(Show, {
+          get when() {
+            return expanded();
+          },
+          get fallback() {
+            return (() => {
+              const _el$8 = _tmpl$4();
+              _el$8.$$click = setExpanded;
+              _el$8.$$clickData = true;
+              return _el$8;
+            })();
+          },
+          get children() {
+            const _el$5 = _tmpl$();
+            _el$5.$$click = setExpanded;
+            _el$5.$$clickData = false;
+            return _el$5;
+          }
+        }));
+        _el$6.$$click = () => {
+          setSelectedNodes([item()]);
+          props.onSelect?.(item());
+        };
+        insert(_el$6, () => props.titleRender(item(), {
+          indexes
+        }));
+        effect(_p$ => {
+          const _v$ = cs('ant-flex ant-items-center ant-h-28px ant-pb-4px', isDraggable(item()) && 'ant-[border:1px_solid_var(--primary-color)] ant-bg-white', draggableNode() && 'child[]:ant-pointer-events-none'),
+            _v$2 = cs('ant-flex-shrink-0 ant-w-24px ant-h-24px ant-flex ant-items-center ant-justify-center ant-cursor-pointer', isEmpty(props.children(item())) && 'opacity-0'),
+            _v$3 = cs('ant-h-full ant-leading-24px hover:ant-bg-[var(--hover-bg-color)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative', props.blockNode && 'w-full', selectedNodes()?.includes(item()) && '!ant-bg-[var(--active-bg-color)]', isTarget(item()) && "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--primary-color)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--primary-color)]");
+          _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+          _v$2 !== _p$._v$2 && className(_el$4, _p$._v$2 = _v$2);
+          _v$3 !== _p$._v$3 && className(_el$6, _p$._v$3 = _v$3);
+          return _p$;
+        }, {
+          _v$: undefined,
+          _v$2: undefined,
+          _v$3: undefined
+        });
+        return _el$;
+      })(), createComponent(Show, {
+        get when() {
+          return memo(() => !!expanded())() && !isEmpty(props.children(item()));
+        },
+        get children() {
+          return createComponent(SingleLevelTree, {
+            get treeData() {
+              return props.children(item());
+            },
+            get indent() {
+              return props.indent + 1;
+            },
+            parentIndexes: indexes,
+            get blockNode() {
+              return props.blockNode;
+            },
+            get defaultExpandAll() {
+              return props.defaultExpandAll;
+            },
+            get titleRender() {
+              return props.titleRender;
+            },
+            get children() {
+              return props.children;
+            },
+            onSelect: node => untrack(() => props.onSelect?.(node))
+          });
+        }
+      })];
+    }
+  });
+}
+function Tree(props) {
+  const [selectedNodes, setSelectedNodes] = createSignal(props.defaultSelectedNodes ?? []);
+  const [draggableNode, setDraggableNode] = createSignal(null);
+  const isDraggable = createSelector(draggableNode);
+  const [draggableIndexes, setDraggableIndexes] = createSignal(null);
+  const [targetNode, setTargetNode] = createSignal(null);
+  const isTarget = createSelector(targetNode);
+  const [targetIndexes, setTargetIndexes] = createSignal(null);
+  return createComponent(TreeContext.Provider, {
+    get value() {
+      return {
+        selectedNodes,
+        setSelectedNodes: setSelectedNodes,
+        draggableNode,
+        setDraggableNode: setDraggableNode,
+        draggableIndexes,
+        setDraggableIndexes,
+        isDraggable,
+        targetNode,
+        setTargetNode: setTargetNode,
+        targetIndexes,
+        setTargetIndexes,
+        isTarget,
+        draggable: props.draggable,
+        onDrop: props.onDrop
+      };
+    },
+    get children() {
+      return createComponent(SingleLevelTree, {
+        get treeData() {
+          return props.treeData;
+        },
+        indent: 0,
+        get blockNode() {
+          return props.blockNode;
+        },
+        get defaultExpandAll() {
+          return props.defaultExpandAll;
+        },
+        get titleRender() {
+          return props.titleRender;
+        },
+        get children() {
+          return props.children;
+        },
+        onSelect: node => untrack(() => props.onSelect?.(node))
+      });
+    }
+  });
+}
+delegateEvents(["click"]);
+
+export { Tree as default };

package/es/Upload.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type { UploadFile } from 'antd/es/upload';
+declare const Upload: import("solid-js").Component<Omit<Omit<import("antd").UploadProps<any> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<any>, "className"> & {
+    class?: string | undefined;
+}, "children"> & {
+    children?: import("solid-js").JSX.Element;
+}>;
+export type UploadProps = Parameters<typeof Upload>[0];
+export default Upload;

package/es/Upload.js

@@ -0,0 +1,6 @@
+import { replaceChildren, replaceClassName, reactToSolidComponent } from './utils/component.js';
+import { Upload as Upload$1 } from 'antd';
+
+const Upload = replaceChildren(replaceClassName(reactToSolidComponent(Upload$1)));
+
+export { Upload as default };

package/es/form/Form.d.ts

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

package/es/form/Form.js

@@ -0,0 +1,70 @@
+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';
+
+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 formInstance = {
+    async validateFields() {
+      const promises = Object.entries(rulesDict).flatMap(([name, rules]) => {
+        return rules.map(async rule => await rule.validate(get(values, name)).catch(err => {
+          setErrMsgDict[name](err.message);
+          throw err;
+        }));
+      });
+      const results = await Promise.allSettled(promises);
+      if (results.some(result => result.status === 'rejected')) {
+        // eslint-disable-next-line @typescript-eslint/no-throw-literal
+        throw {
+          errorFields: results.filter(res => res.status === 'rejected'),
+          values
+        };
+      }
+      return values;
+    },
+    setFieldValue(name, value) {
+      set(values, name, value);
+    }
+  };
+  onMount(() => {
+    if (typeof _props.ref === 'function') {
+      _props.ref?.(formInstance);
+    }
+  });
+  // 存储 form item 的 dom 节点宽度
+  const [itemWidthDict, setItemWidthDict] = createSignal({});
+  const maxItemWidth = createMemo(() => max(Object.values(itemWidthDict())));
+  return (() => {
+    const _el$ = _tmpl$();
+    _el$.addEventListener("submit", e => {
+      e.preventDefault();
+    });
+    insert(_el$, createComponent(Context.Provider, {
+      get value() {
+        return {
+          formInstance,
+          rulesDict,
+          setErrMsgDict,
+          initialValues: props.initialValues,
+          setItemWidthDict,
+          maxItemWidth
+        };
+      },
+      get children() {
+        return props.children;
+      }
+    }));
+    return _el$;
+  })();
+}
+
+export { Form as default };

package/es/form/FormItem.d.ts

@@ -0,0 +1,19 @@
+import { type JSXElement, type Component, type JSX } from 'solid-js';
+import { type Schema } from 'yup';
+export interface FormItemComponentProps<T = any> {
+    defaultValue?: T;
+    status?: 'error' | 'warning';
+    onChange?: (value: T) => void;
+}
+export interface FormItemProps {
+    class?: string;
+    style?: JSX.CSSProperties;
+    required?: boolean;
+    label?: JSXElement;
+    name?: string;
+    initialValue?: any;
+    rules?: Schema[];
+    component: Component<FormItemComponentProps>;
+}
+declare const FormItem: Component<FormItemProps>;
+export default FormItem;

package/es/form/FormItem.js

@@ -0,0 +1,141 @@
+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 { nanoid } from 'nanoid';
+import cs from 'classnames';
+import Context from './context.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">`);
+const FormItem = props => {
+  const {
+    formInstance,
+    rulesDict,
+    setErrMsgDict,
+    initialValues,
+    setItemWidthDict,
+    maxItemWidth
+  } = useContext(Context);
+  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;
+    }
+    setErrMsgDict[props.name] = setErrMsg;
+  });
+  let label;
+  onMount(() => {
+    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 => ({
+        ...dict,
+        [id]: borderBoxSize.inlineSize
+      }));
+    });
+    resizeObserver.observe(label);
+    onCleanup(() => {
+      setItemWidthDict(dict => {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete dict[id];
+        return {
+          ...dict
+        };
+      });
+      resizeObserver.disconnect();
+    });
+  });
+  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

@@ -0,0 +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>;
+}>;
+export default Context;

package/es/form/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'solid-js';
+
+const Context = createContext({});
+
+export { Context as default };

package/es/form/index.d.ts

@@ -0,0 +1,8 @@
+import InternalForm from './Form';
+import FormItem from './FormItem';
+export type { FormInstance, FormProps } from './Form';
+export type { FormItemProps, FormItemComponentProps } from './FormItem';
+declare const Form: typeof InternalForm & {
+    Item: typeof FormItem;
+};
+export default Form;

package/es/form/index.js

@@ -0,0 +1,7 @@
+import Form$1 from './Form.js';
+import FormItem from './FormItem.js';
+
+const Form = Form$1;
+Form.Item = FormItem;
+
+export { Form as default };

package/es/hooks/createControllableValue.d.ts

@@ -0,0 +1,16 @@
+import { type Signal } from 'solid-js';
+export interface Options<T> {
+    defaultValue?: T;
+    defaultValuePropName?: string;
+    valuePropName?: string;
+    trigger?: string | undefined;
+}
+export type Props = Record<string, any>;
+export interface StandardProps<T> {
+    value: T;
+    defaultValue?: T;
+    onChange: (val: T) => void;
+}
+declare function createControllableValue<T = any>(props: StandardProps<T>): Signal<T>;
+declare function createControllableValue<T = any>(props: Props, options?: Options<T>): Signal<T>;
+export default createControllableValue;

package/es/hooks/createControllableValue.js

@@ -0,0 +1,41 @@
+import { createSignal } from 'solid-js';
+import createUpdateEffect from './createUpdateEffect.js';
+
+function createControllableValue(props, options = {}) {
+  const {
+    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 [value, _setValue] = createSignal(defaultValue);
+  createUpdateEffect(getValue, () => {
+    if (!isControlled()) return;
+    _setValue(getValue());
+  });
+  const setValue = v => {
+    const newValue = typeof v === 'function' ? v(value()) : v;
+    if (!isControlled()) {
+      _setValue(newValue);
+    }
+    if (trigger) {
+      const onChange = props[trigger];
+      if (typeof onChange === 'function') {
+        onChange(newValue);
+      }
+    }
+    return newValue;
+  };
+  return [value, setValue];
+}
+
+export { createControllableValue as default };

package/es/hooks/createUpdateEffect.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor, AccessorArray, NoInfer, OnEffectFunction } from 'solid-js';
+/**
+ * 等同于 createEffect，但是会忽略首次执行，只在依赖更新时执行。
+ */
+export default function createUpdateEffect<S, Next extends Prev, Prev = Next>(deps: AccessorArray<S> | Accessor<S>, fn: OnEffectFunction<S, undefined | NoInfer<Prev>, Next>): void;

package/es/hooks/createUpdateEffect.js

@@ -0,0 +1,12 @@
+import { createEffect, on } from 'solid-js';
+
+/**
+ * 等同于 createEffect，但是会忽略首次执行，只在依赖更新时执行。
+ */
+function createUpdateEffect(deps, fn) {
+  createEffect(on(deps, fn, {
+    defer: true
+  }));
+}
+
+export { createUpdateEffect as default };

package/es/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useClickAway } from './useClickAway';
+export { default as useSize } from './useSize';

package/es/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useClickAway } from './useClickAway.js';
+export { default as useSize } from './useSize.js';

package/es/hooks/useClickAway.d.ts

@@ -0,0 +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;

package/es/hooks/useClickAway.js

@@ -0,0 +1,17 @@
+import { onCleanup } from 'solid-js';
+import { toArray } from '../utils/array.js';
+
+function useClickAway(onClickAway, target) {
+  const onClick = event => {
+    const targets = target ? toArray(target()) : [];
+    if (targets.every(item => !item.contains(event.target))) {
+      onClickAway(event);
+    }
+  };
+  document.body.addEventListener('click', onClick);
+  onCleanup(() => {
+    document.body.removeEventListener('click', onClick);
+  });
+}
+
+export { useClickAway as default };

package/es/hooks/useSize.d.ts

@@ -0,0 +1,5 @@
+import { Accessor } from 'solid-js';
+export default function useSize(target: Element | Accessor<Element>): Accessor<{
+    width: number;
+    height: number;
+} | undefined>;

package/es/hooks/useSize.js

@@ -0,0 +1,22 @@
+import { createSignal, onMount, onCleanup } from 'solid-js';
+
+function getTarget(target) {
+  return target instanceof Element ? target : target();
+}
+function useSize(target) {
+  const [size, setSize] = createSignal();
+  onMount(() => {
+    const _target = getTarget(target);
+    const ro = new ResizeObserver(() => {
+      setSize({
+        width: _target.clientWidth,
+        height: _target.clientHeight
+      });
+    });
+    ro.observe(_target);
+    onCleanup(() => ro.disconnect());
+  });
+  return size;
+}
+
+export { useSize as default };