antd-solid 0.0.12 → 0.0.13

package/es/hooks/useClickAway.js

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

package/es/hooks/useComponentSize.d.ts

@@ -0,0 +1,3 @@
+import { type Accessor } from 'solid-js';
+import { type ComponentSize } from '../types';
+export default function useComponentSize(size: Accessor<ComponentSize | undefined>): Accessor<ComponentSize>;

package/es/hooks/useComponentSize.js

@@ -0,0 +1,12 @@
+import { useContext, createMemo } from 'solid-js';
+import ConfigProviderContext from '../ConfigProvider/context.js';
+
+function useComponentSize(size) {
+  const {
+    componentSize
+  } = useContext(ConfigProviderContext);
+  const _size = createMemo(() => size() ?? componentSize());
+  return _size;
+}
+
+export { useComponentSize as default };

package/es/hooks/useCounter.d.ts

@@ -0,0 +1,12 @@
+import { type Accessor, type Setter } from 'solid-js';
+declare function useCounter(initialValue: number, options?: {
+    min?: number | Accessor<number>;
+    max?: number | Accessor<number>;
+    step?: number | Accessor<number>;
+}): readonly [Accessor<number>, {
+    readonly set: Setter<number>;
+    readonly inc: (stepValue?: number) => number;
+    readonly dec: (stepValue?: number) => number;
+    readonly reset: () => number;
+}];
+export default useCounter;

package/es/hooks/useCounter.js

@@ -0,0 +1,30 @@
+import { clamp } from 'lodash-es';
+import { createSignal } from 'solid-js';
+import NP from 'number-precision';
+import { unwrapFunction } from '../utils/solid.js';
+
+function useCounter(initialValue, options) {
+  const [value, setValue] = createSignal(initialValue);
+  const step = options?.step ?? 1;
+  const set = v => {
+    const newV = typeof v === 'function' ? v(value()) : v;
+    return setValue(clamp(newV, unwrapFunction(options?.min ?? -Infinity), unwrapFunction(options?.max ?? Infinity)));
+  };
+  const inc = stepValue => {
+    return set(NP.plus(value(), stepValue ?? unwrapFunction(step)));
+  };
+  const dec = stepValue => {
+    return set(NP.minus(value(), stepValue ?? unwrapFunction(step)));
+  };
+  const reset = () => {
+    return setValue(initialValue);
+  };
+  return [value, {
+    set,
+    inc,
+    dec,
+    reset
+  }];
+}
+
+export { useCounter as default };

package/es/hooks/useFocus.d.ts

@@ -0,0 +1,2 @@
+import { type Accessor } from 'solid-js';
+export default function useFocus(target: Accessor<HTMLElement | undefined>): Accessor<boolean>;

package/es/hooks/useFocus.js

@@ -0,0 +1,24 @@
+import { createSignal, createEffect, onCleanup } from 'solid-js';
+
+function useFocus(target) {
+  const [hover, setHover] = createSignal(false);
+  createEffect(() => {
+    const _target = target();
+    if (!_target) return;
+    const onMouseEnter = () => {
+      setHover(true);
+    };
+    _target.addEventListener('focusin', onMouseEnter);
+    const onMouseLeave = () => {
+      setHover(false);
+    };
+    _target.addEventListener('focusout', onMouseLeave);
+    onCleanup(() => {
+      _target.removeEventListener('focusin', onMouseEnter);
+      _target.removeEventListener('focusout', onMouseLeave);
+    });
+  });
+  return hover;
+}
+
+export { useFocus as default };

package/es/hooks/useHover.d.ts

@@ -0,0 +1,2 @@
+import { type Accessor } from 'solid-js';
+export default function useHover(target: Accessor<Element | Element[] | undefined>): Accessor<boolean>;

package/es/hooks/useHover.js

@@ -0,0 +1,33 @@
+import { createSignal, createEffect, onCleanup } from 'solid-js';
+import { toArray } from '../utils/array.js';
+
+function useHover(target) {
+  const [hover, setHover] = createSignal(false);
+  createEffect(() => {
+    const _target = target();
+    if (!_target) {
+      setHover(false);
+      return;
+    }
+    const onMouseEnter = () => {
+      setHover(true);
+    };
+    const onMouseLeave = () => {
+      setHover(false);
+    };
+    const targetList = toArray(_target);
+    targetList.forEach(item => {
+      item.addEventListener('mouseenter', onMouseEnter);
+      item.addEventListener('mouseleave', onMouseLeave);
+    });
+    onCleanup(() => {
+      targetList.forEach(item => {
+        item.removeEventListener('mouseenter', onMouseEnter);
+        item.removeEventListener('mouseleave', onMouseLeave);
+      });
+    });
+  });
+  return hover;
+}
+
+export { useHover as default };

package/es/hooks/useLocale.d.ts

@@ -0,0 +1 @@
+export default function useLocale(): import("solid-js").Accessor<import("../locale").Locale>;

package/es/hooks/useLocale.js

@@ -0,0 +1,11 @@
+import { useContext } from 'solid-js';
+import ConfigProviderContext from '../ConfigProvider/context.js';
+
+function useLocale() {
+  const {
+    locale
+  } = useContext(ConfigProviderContext);
+  return locale;
+}
+
+export { useLocale as default };

package/es/hooks/useMouse.d.ts

@@ -0,0 +1 @@
+export default function useMouse(): import("solid-js").Accessor<MouseEvent | undefined>;

package/es/hooks/useMouse.js

@@ -0,0 +1,18 @@
+import { createSignal, onCleanup } from 'solid-js';
+
+function useMouse() {
+  const [mouse, setMouse] = createSignal();
+  const abortController = new AbortController();
+  window.addEventListener('mousemove', e => {
+    setMouse(e);
+  }, {
+    capture: true,
+    signal: abortController.signal
+  });
+  onCleanup(() => {
+    abortController.abort();
+  });
+  return mouse;
+}
+
+export { useMouse as default };

package/es/hooks/useScroll.d.ts

@@ -0,0 +1,2 @@
+import { type Accessor } from 'solid-js';
+export default function useScroll(target: Accessor<Element | undefined>): Accessor<any>;

package/es/hooks/useScroll.js

@@ -0,0 +1,29 @@
+import { isEqual } from 'lodash-es';
+import { createSignal, createEffect, onCleanup } from 'solid-js';
+
+function useScroll(target) {
+  const [scroll, setScroll] = createSignal({
+    left: 0,
+    top: 0
+  }, {
+    equals: isEqual
+  });
+  createEffect(() => {
+    const _target = target();
+    if (!_target) return;
+    const onScroll = () => {
+      setScroll({
+        left: _target.scrollLeft,
+        top: _target.scrollTop
+      });
+    };
+    onScroll();
+    _target.addEventListener('scroll', onScroll);
+    onCleanup(() => {
+      _target.removeEventListener('scroll', onScroll);
+    });
+  });
+  return scroll;
+}
+
+export { useScroll as default };

package/es/hooks/useSize.d.ts

@@ -1,5 +1,11 @@
-import { Accessor } from 'solid-js';
-export default function useSize(target: Element | Accessor<Element>): Accessor<{
+import { type Accessor } from 'solid-js';
+/**
+ * 获取元素尺寸
+ * @param target
+ * @param type 宽高的类型，'client' 代表 clientWidth、clientHeight，'offset' 代表 offsetWidth、offsetHeight
+ * @returns
+ */
+export default function useSize(target: Accessor<HTMLElement | undefined>, type?: 'client' | 'offset'): Accessor<{
     width: number;
     height: number;
 } | undefined>;

package/es/hooks/useSize.js

@@ -1,20 +1,32 @@
-import { createSignal, onMount, onCleanup } from 'solid-js';
+import { isEqual } from 'lodash-es';
+import { createSignal, createEffect, 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(() => {
+/**
+ * 获取元素尺寸
+ * @param target
+ * @param type 宽高的类型，'client' 代表 clientWidth、clientHeight，'offset' 代表 offsetWidth、offsetHeight
+ * @returns
+ */
+function useSize(target, type = 'client') {
+  const [size, setSize] = createSignal(undefined, {
+    equals: isEqual
+  });
+  createEffect(() => {
+    const _target = target();
+    if (!_target) return;
+    const callback = () => {
       setSize({
-        width: _target.clientWidth,
-        height: _target.clientHeight
+        width: type === 'offset' ? _target.offsetWidth : _target.clientWidth,
+        height: type === 'offset' ? _target.offsetHeight : _target.clientHeight
       });
-    });
+    };
+    // ResizeObserver observe 后虽然也会立刻执行 callback，但它执行不及时
+    callback();
+    const ro = new ResizeObserver(callback);
     ro.observe(_target);
-    onCleanup(() => ro.disconnect());
+    onCleanup(() => {
+      ro.disconnect();
+    });
   });
   return size;
 }

package/es/hooks/useVirtualList.d.ts

@@ -0,0 +1,14 @@
+import { type Accessor } from 'solid-js';
+export interface Options {
+    containerTarget: Accessor<HTMLElement>;
+    wrapperTarget: Accessor<HTMLElement>;
+    itemSize: Accessor<number>;
+    /**
+     * 垂直或者水平方向，默认 vertical
+     */
+    layout?: Accessor<'vertical' | 'horizontal'>;
+}
+declare const useVirtualList: <T = any>(list: Accessor<T[]>, options: Options) => {
+    list: Accessor<T[]>;
+};
+export default useVirtualList;

package/es/hooks/useVirtualList.js

@@ -0,0 +1,45 @@
+import { createSignal, createMemo, createEffect, onCleanup, untrack } from 'solid-js';
+
+const useVirtualList = (list, options) => {
+  const [range, setRange] = createSignal([0, 0]);
+  const layout = createMemo(() => options.layout?.() ?? 'vertical');
+  const calculateRange = () => {
+    const container = options.containerTarget();
+    const wrapper = options.wrapperTarget();
+    const wrapperStyle = getComputedStyle(wrapper);
+    const scrollSize = layout() === 'vertical' ? container.scrollTop - parseFloat(wrapperStyle.borderTopWidth) - parseFloat(wrapperStyle.paddingTop) : container.scrollLeft - parseFloat(wrapperStyle.borderLeftWidth) - parseFloat(wrapperStyle.paddingLeft);
+    const clientSize = layout() === 'vertical' ? container.clientHeight : container.clientWidth;
+    const start = Math.floor(Math.max(scrollSize, 0) / options.itemSize());
+    const end = Math.ceil(Math.max(scrollSize + clientSize, 0) / options.itemSize());
+    setRange([start, end]);
+    const totalSize = options.itemSize() * list().length;
+    const translateSize = start * options.itemSize();
+    if (layout() === 'vertical') {
+      wrapper.style.marginTop = `${translateSize}px`;
+      wrapper.style.height = `${totalSize - translateSize}px`;
+    } else {
+      wrapper.style.marginLeft = `${translateSize}px`;
+      wrapper.style.width = `${totalSize - translateSize}px`;
+    }
+    wrapper.style.boxSizing = 'content-box';
+  };
+  createEffect(() => {
+    const container = options.containerTarget();
+    const onScroll = () => {
+      untrack(calculateRange);
+    };
+    container.addEventListener('scroll', onScroll);
+    onCleanup(() => {
+      container.removeEventListener('scroll', onScroll);
+    });
+  });
+  createEffect(() => {
+    calculateRange();
+  });
+  const rangeList = createMemo(() => list().slice(...range()));
+  return {
+    list: rangeList
+  };
+};
+
+export { useVirtualList as default };

package/es/index.d.ts

@@ -1,45 +1,96 @@
 export { default as Button } from './Button';
 export { default as Input } from './Input';
-export type { InputProps } from './Input';
+export type { InputProps, TextAreaProps } from './Input';
 export { default as InputNumber } from './InputNumber';
 export type { InputNumberProps } from './InputNumber';
 export { default as Timeline } from './Timeline';
 export { default as Modal } from './Modal';
-export type { ModalInstance } from './Modal';
+export type { ModalProps } from './Modal';
 export { default as Drawer } from './Drawer';
-export type { DrawerProps, DrawerInstance } from './Drawer';
-export { default as DatePicker } from './DatePicker';
+export type { DrawerProps } from './Drawer';
+export type { RangeInputProps } from './RangeInput';
+export { default as RangeInput } from './RangeInput';
+export type { SelectInputProps } from './SelectInput';
+export { default as SelectInput } from './SelectInput';
 export { default as Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
 export { default as Tree } from './Tree';
 export type { TreeProps } from './Tree';
 export { default as Popover } from './Popover';
+export type { PopoverProps } from './Popover';
 export { default as Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
 export { default as ColorPicker } from './ColorPicker';
 export type { ColorPickerProps } from './ColorPicker';
 export { default as Result } from './Result';
 export { default as Progress } from './Progress';
 export type { ProgressProps } from './Progress';
 export { default as Tabs } from './Tabs';
-export type { TabsProps, Tab } from './Tabs';
+export type { TabsProps, TabItem } from './Tabs';
 export { default as Popconfirm } from './Popconfirm';
+export type { PopconfirmProps } from './Popconfirm';
 export { default as Upload } from './Upload';
 export type { UploadProps, UploadFile } from './Upload';
 export { default as Radio } from './Radio';
-export type { RadioProps, RadioGroupProps } from './Radio';
+export type { RadioProps } from './Radio';
+export type { RadioGroupProps } from './Radio/Group';
 export { default as Form } from './Form';
 export type { FormInstance, FormProps, FormItemProps, FormItemComponentProps } from './Form';
 export { default as Switch } from './Switch';
 export type { SwitchProps } from './Switch';
-export { default as Skeleton } from './Skeleton';
 export { default as Spin } from './Spin';
 export { default as Image } from './Image';
+export type { ImageProps } from './Image';
 export { default as Table } from './Table';
 export type { TableProps, TableColumn } from './Table';
 export { default as Compact } from './Compact';
+export { default as CompactContextIsolator } from './Compact/CompactContextIsolator';
 export type { CollapseProps, CollapseItem } from './Collapse';
 export { default as Collapse } from './Collapse';
 export { default as Empty } from './Empty';
 export type { SegmentedProps } from './Segmented';
 export { default as Segmented } from './Segmented';
+export type { AlertProps } from './Alert';
+export { default as Alert } from './Alert';
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { default as TreeSelect } from './TreeSelect';
+export type { TreeSelectProps, TreeSelectNode } from './TreeSelect';
+export { default as Divider } from './Divider';
+export type { DividerProps } from './Divider';
+export { default as Slider } from './Slider';
+export type { SliderProps } from './Slider';
+export { default as Transformer } from './Transformer';
+export type { TransformerProps, TransformValue, TransformerInstance } from './Transformer';
+export { default as Menu } from './Menu';
+export type { MenuProps, MenuItem, MenuItemType, MenuDividerType } from './Menu';
+export { default as Dropdown } from './Dropdown';
+export type { DropdownProps } from './Dropdown';
+export { default as Element } from './Element';
+export type { ElementProps } from './Element';
+export { default as Cursor } from './Cursor';
+export type { CursorProps } from './Cursor';
+export { default as Space } from './Space';
+export { default as CodeInput } from './CodeInput';
+export type { CodeInputProps } from './CodeInput';
+export { default as message } from './Message';
+export type { MessageApi } from './Message';
+export { default as Command } from './Command';
+export { default as ContextMenu } from './ContextMenu';
+export { default as ConfigProvider } from './ConfigProvider';
+export { default as Fragment } from './Fragment';
+export { default as DelayShow } from './DelayShow';
+export { default as TreeFor } from './TreeFor';
 export { default as createControllableValue } from './hooks/createControllableValue';
-export { message } from 'antd';
+export { default as useClickAway } from './hooks/useClickAway';
+export { default as useSize } from './hooks/useSize';
+export { default as useScroll } from './hooks/useScroll';
+export { default as useHover } from './hooks/useHover';
+export { default as useFocus } from './hooks/useFocus';
+export { default as useVirtualList } from './hooks/useVirtualList';
+export { default as useCounter } from './hooks/useCounter';
+export { default as useMouse } from './hooks/useMouse';
+export { setupGlobalDrag } from './utils/setupGlobalDrag';
+export type { ComponentSize } from './types';
+export { default as enUS } from './locale/en_US';
+export { default as zhCN } from './locale/zh_CN';

package/es/index.js

@@ -1,30 +1,60 @@
 export { default as Button } from './Button/index.js';
-export { default as Input } from './Input.js';
-export { default as InputNumber } from './InputNumber.js';
-export { default as Timeline } from './Timeline.js';
-export { default as Modal } from './Modal.js';
+export { default as Input } from './Input/index.js';
+export { default as InputNumber } from './InputNumber/index.js';
+export { default as Timeline } from './Timeline/index.js';
+export { default as Modal } from './Modal/index.js';
 export { default as Drawer } from './Drawer/index.js';
-export { default as DatePicker } from './DatePicker.js';
-export { default as Select } from './Select.js';
-export { default as Tree } from './Tree.js';
-export { default as Popover } from './Popover.js';
-export { default as Tooltip } from './Tooltip.js';
-export { default as ColorPicker } from './ColorPicker.js';
-export { default as Result } from './Result.js';
+export { default as RangeInput } from './RangeInput/index.js';
+export { default as SelectInput } from './SelectInput/index.js';
+export { default as Select } from './Select/index.js';
+export { default as Tree } from './Tree/index.js';
+export { default as Popover } from './Popover/index.js';
+export { default as Tooltip } from './Tooltip/index.js';
+export { default as ColorPicker } from './ColorPicker/index.js';
+export { default as Result } from './Result/index.js';
 export { default as Progress } from './Progress/index.js';
-export { default as Tabs } from './Tabs.js';
-export { default as Popconfirm } from './Popconfirm.js';
-export { default as Upload } from './Upload.js';
-export { default as Radio } from './Radio.js';
+export { default as Tabs } from './Tabs/index.js';
+export { default as Popconfirm } from './Popconfirm/index.js';
+export { default as Upload } from './Upload/index.js';
+export { default as Radio } from './Radio/index.js';
 export { default as Form } from './Form/index.js';
-export { default as Switch } from './Switch.js';
-export { default as Skeleton } from './Skeleton.js';
-export { default as Spin } from './Spin.js';
-export { default as Image } from './Image.js';
-export { default as Table } from './Table.js';
+export { default as Switch } from './Switch/index.js';
+export { default as Spin } from './Spin/index.js';
+export { default as Image } from './Image/index.js';
+export { default as Table } from './Table/index.js';
 export { default as Compact } from './Compact/index.js';
+export { default as CompactContextIsolator } from './Compact/CompactContextIsolator.js';
 export { default as Collapse } from './Collapse/index.js';
 export { default as Empty } from './Empty/index.js';
 export { default as Segmented } from './Segmented/index.js';
+export { default as Alert } from './Alert/index.js';
+export { default as Checkbox } from './Checkbox/index.js';
+export { default as TreeSelect } from './TreeSelect/index.js';
+export { default as Divider } from './Divider/index.js';
+export { default as Slider } from './Slider/index.js';
+export { default as Transformer } from './Transformer/index.js';
+export { default as Menu } from './Menu/index.js';
+export { default as Dropdown } from './Dropdown/index.js';
+export { default as Element } from './Element/index.js';
+export { default as Cursor } from './Cursor/index.js';
+export { default as Space } from './Space/index.js';
+export { default as CodeInput } from './CodeInput/index.js';
+export { default as message } from './Message/index.js';
+export { default as Command } from './Command/index.js';
+export { default as ContextMenu } from './ContextMenu/index.js';
+export { default as ConfigProvider } from './ConfigProvider/index.js';
+export { default as Fragment } from './Fragment/index.js';
+export { default as DelayShow } from './DelayShow/index.js';
+export { default as TreeFor } from './TreeFor/index.js';
 export { default as createControllableValue } from './hooks/createControllableValue.js';
-export { message } from 'antd';
+export { default as useClickAway } from './hooks/useClickAway.js';
+export { default as useSize } from './hooks/useSize.js';
+export { default as useScroll } from './hooks/useScroll.js';
+export { default as useHover } from './hooks/useHover.js';
+export { default as useFocus } from './hooks/useFocus.js';
+export { default as useVirtualList } from './hooks/useVirtualList.js';
+export { default as useCounter } from './hooks/useCounter.js';
+export { default as useMouse } from './hooks/useMouse.js';
+export { setupGlobalDrag } from './utils/setupGlobalDrag.js';
+export { default as enUS } from './locale/en_US.js';
+export { default as zhCN } from './locale/zh_CN.js';

package/es/locale/en_US.d.ts

@@ -0,0 +1,3 @@
+import { type Locale } from '.';
+declare const locale: Locale;
+export default locale;

package/es/locale/en_US.js

@@ -0,0 +1,9 @@
+const locale = {
+  locale: 'en',
+  Modal: {
+    okText: 'OK',
+    cancelText: 'Cancel'
+  }
+};
+
+export { locale as default };

package/es/locale/index.d.ts

@@ -0,0 +1,5 @@
+import { type ModalLocale } from '../Modal';
+export interface Locale {
+    locale: string;
+    Modal?: ModalLocale;
+}

package/es/locale/index.js

@@ -0,0 +1 @@
+

package/es/locale/zh_CN.d.ts

@@ -0,0 +1,3 @@
+import { type Locale } from '.';
+declare const locale: Locale;
+export default locale;

package/es/locale/zh_CN.js

@@ -0,0 +1,9 @@
+const locale = {
+  locale: 'zh-cn',
+  Modal: {
+    okText: '确定',
+    cancelText: '取消'
+  }
+};
+
+export { locale as default };

package/es/types/index.d.ts

@@ -1,3 +1,12 @@
-import { type JSXElement } from 'solid-js';
+import { type JSXElement, type JSX } from 'solid-js';
 export type Key = string | number;
-export type StringOrJSXElement = string | number | undefined | null | (() => JSXElement);
+export type StringOrJSXElement = JSXElement | (() => JSXElement);
+export interface StyleProps {
+    class?: string;
+    style?: JSX.CSSProperties;
+}
+export interface RootStyleProps {
+    rootClass?: string;
+    rootStyle?: JSX.CSSProperties;
+}
+export type ComponentSize = 'small' | 'middle' | 'large';

package/es/utils/animation.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 水波动画
+ * @param parent
+ * @param color
+ */
+export declare function wave(parent: HTMLElement, color: string): void;

package/es/utils/animation.js

@@ -0,0 +1,20 @@
+import cs from 'classnames';
+
+/**
+ * 水波动画
+ * @param parent
+ * @param color
+ */
+function wave(parent, color) {
+  const div = document.createElement('div');
+  div.style.color = color;
+  div.className = cs('absolute inset-0 z--1 rounded-inherit border-solid border-[currentColor] keyframes-wave [animation:wave_ease-out_.3s]');
+  const onAnimationEnd = () => {
+    div.remove();
+    div.removeEventListener('animationend', onAnimationEnd);
+  };
+  div.addEventListener('animationend', onAnimationEnd);
+  parent.insertBefore(div, parent.childNodes[0]);
+}
+
+export { wave };

package/es/utils/array.d.ts

@@ -1,9 +1,10 @@
 /**
  * 如果传入一个非数组字段，则将其转化为数组
  * @param value
+ * @param allowNil 如果设置为 false，则 value isNil 的情况下，会返回空数组
  * @returns
  */
-export declare function toArray<T>(value: T | T[]): T[];
+export declare function toArray<T>(value: T | T[], allowNil?: boolean): T[];
 export interface StandardNode {
     children?: this[];
 }