antd-solid 0.0.11 → 0.0.13

package/es/Tooltip/index.js

@@ -0,0 +1,499 @@
+import { createComponent, memo, Dynamic, Portal, insert, effect, className, style, template } from 'solid-js/web';
+import { isEqual, compact } from 'lodash-es';
+import { mergeProps, createSignal, useContext, children, createMemo, createEffect, onCleanup, createRenderEffect, on, Show } from 'solid-js';
+import cs from 'classnames';
+import { nanoid } from 'nanoid';
+import createControllableValue from '../hooks/createControllableValue.js';
+import useClickAway from '../hooks/useClickAway.js';
+import useSize from '../hooks/useSize.js';
+import DelayShow from '../DelayShow/index.js';
+import useHover from '../hooks/useHover.js';
+import Element$1 from '../Element/index.js';
+import TooltipContext from './context.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div>`);
+const unwrapContent = (content, close) => {
+  return typeof content === 'function' ? content(close) : content;
+};
+const ARROW_STYLE_DICT = {
+  top: {
+    top: '100%',
+    left: '50%',
+    transform: 'translate(-50%, -50%) rotate(135deg)'
+  },
+  topLeft: {
+    top: '100%',
+    left: '8px',
+    transform: 'translateY(-50%) rotate(135deg)'
+  },
+  topRight: {
+    top: '100%',
+    right: '8px',
+    transform: 'translateY(-50%) rotate(135deg)'
+  },
+  bottom: {
+    bottom: '100%',
+    left: '50%',
+    transform: 'translate(-50%, 50%) rotate(-45deg)'
+  },
+  bottomLeft: {
+    bottom: '100%',
+    left: '8px',
+    transform: 'translateY(50%) rotate(-45deg)'
+  },
+  bottomRight: {
+    bottom: '100%',
+    right: '8px',
+    transform: 'translateY(50%) rotate(-45deg)'
+  },
+  left: {
+    top: '50%',
+    right: 0,
+    transform: 'translate(50%, -50%) rotate(45deg)'
+  },
+  leftTop: {
+    top: '8px',
+    right: 0,
+    transform: 'translate(50%, 0%) rotate(45deg)'
+  },
+  leftBottom: {
+    bottom: '8px',
+    right: 0,
+    transform: 'translate(50%, 0%) rotate(45deg)'
+  },
+  right: {
+    top: '50%',
+    left: 0,
+    transform: 'translate(-50%, -50%) rotate(-135deg)'
+  },
+  rightTop: {
+    top: '8px',
+    left: 0,
+    transform: 'translate(-50%, 0%) rotate(-135deg)'
+  },
+  rightBottom: {
+    bottom: '8px',
+    left: 0,
+    transform: 'translate(-50%, 0%) rotate(-135deg)'
+  }
+};
+const REVERSE_PLACEMENT_DICT = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+const mergePlacement = (mainPlacement, minorPlacement) => {
+  if (!minorPlacement) return mainPlacement;
+  switch (mainPlacement) {
+    case 'top':
+      return minorPlacement === 'left' ? 'topLeft' : 'topRight';
+    case 'bottom':
+      return minorPlacement === 'left' ? 'bottomLeft' : 'bottomRight';
+    case 'left':
+      return minorPlacement === 'top' ? 'leftTop' : 'leftBottom';
+    case 'right':
+      return minorPlacement === 'top' ? 'rightTop' : 'rightBottom';
+  }
+};
+const getMainPlacement = placement => {
+  let mainPlacement = 'top';
+  switch (placement) {
+    case 'bottom':
+    case 'bottomLeft':
+    case 'bottomRight':
+      mainPlacement = 'bottom';
+      break;
+    case 'left':
+    case 'leftTop':
+    case 'leftBottom':
+      mainPlacement = 'left';
+      break;
+    case 'right':
+    case 'rightTop':
+    case 'rightBottom':
+      mainPlacement = 'right';
+      break;
+  }
+  return mainPlacement;
+};
+const getMinorPlacement = placement => {
+  let minorPlacement;
+  switch (placement) {
+    case 'leftTop':
+    case 'rightTop':
+      minorPlacement = 'top';
+      break;
+    case 'leftBottom':
+    case 'rightBottom':
+      minorPlacement = 'bottom';
+      break;
+    case 'topLeft':
+    case 'bottomLeft':
+      minorPlacement = 'left';
+      break;
+    case 'topRight':
+    case 'bottomRight':
+      minorPlacement = 'right';
+      break;
+  }
+  return minorPlacement;
+};
+// TODO 超出范围滚动
+const Tooltip = _props => {
+  const props = mergeProps({
+    trigger: 'hover',
+    placement: 'top',
+    mode: 'dark',
+    arrow: true,
+    getPopupContainer: () => document.body,
+    mouseLeaveDelay: 0.1,
+    plain: false,
+    autoAdjustOverflow: true
+  }, _props);
+  // ========================== Context ===========================
+  const [subPopupElements, setSubPopupElements] = createSignal({});
+  const parentContext = useContext(TooltipContext);
+  const context = {
+    registerSubPopup: (id, subPopupEle) => {
+      setSubPopupElements(prev => ({
+        ...prev,
+        [id]: subPopupEle
+      }));
+      parentContext?.registerSubPopup(id, subPopupEle);
+    }
+  };
+  // =========================== Tooltip ============================
+  const id = nanoid();
+  const resolvedChildren = children(() => createComponent(TooltipContext.Provider, {
+    value: context,
+    get children() {
+      return props.children;
+    }
+  }));
+  const [contentRef, setContentRef] = createSignal();
+  const setPopupRef = node => {
+    setContentRef(node);
+    parentContext?.registerSubPopup(id, node);
+  };
+  const [_open, setOpen] = createControllableValue(_props, {
+    defaultValue: false,
+    defaultValuePropName: 'defaultOpen',
+    valuePropName: 'open',
+    trigger: 'onOpenChange'
+  });
+  const isEmptyContent = createMemo(() => !props.content);
+  const open = createMemo(() => _open() && !props.disabled && !isEmptyContent());
+  const reverseOpen = () => setOpen(v => !v);
+  const show = () => setOpen(true);
+  const hide = () => setOpen(false);
+  // children 的 BoundingClientRect
+  const [childrenRect, setChildrenRect] = createSignal(new DOMRect(), {
+    equals: (a, b) => isEqual(a.toJSON(), b.toJSON())
+  });
+  createEffect(() => {
+    const _children = resolvedChildren();
+    if (!(_children instanceof Element)) return;
+    setChildrenRect(_children.getBoundingClientRect());
+    if (!open()) return;
+    let handle;
+    const tick = () => {
+      setChildrenRect(_children.getBoundingClientRect());
+      handle = window.requestAnimationFrame(tick);
+    };
+    tick();
+    onCleanup(() => {
+      if (typeof handle === 'number') window.cancelAnimationFrame(handle);
+    });
+  });
+  const hovering = useHover(() => {
+    const _children = resolvedChildren();
+    if (props.trigger === 'hover' && _children instanceof Element) {
+      return [_children, ...Object.values(subPopupElements())].concat(contentRef() ? [contentRef()] : []);
+    }
+  });
+  createEffect(() => {
+    if (props.trigger === 'hover') {
+      if (hovering()) {
+        show();
+      } else {
+        setTimeout(() => {
+          if (!hovering()) {
+            hide();
+          }
+        }, props.mouseLeaveDelay * 1000);
+      }
+    }
+  });
+  createEffect(() => {
+    const _children = resolvedChildren();
+    if (!(_children instanceof Element)) return;
+    const abortController = new AbortController();
+    switch (props.trigger) {
+      case 'click':
+        _children.addEventListener('click', reverseOpen, {
+          signal: abortController.signal
+        });
+        useClickAway(hide, () => compact([...Object.values(subPopupElements()), contentRef(), _children]));
+        break;
+      case 'focus':
+        _children.addEventListener('focusin', show, {
+          signal: abortController.signal
+        });
+        _children.addEventListener('focusout', hide, {
+          signal: abortController.signal
+        });
+        break;
+    }
+    onCleanup(() => {
+      abortController.abort();
+    });
+  });
+  const arrowOffset = createMemo(() => props.arrow ? 4 : 0);
+  let mainPlacementReverse = false;
+  let minorPlacementReverse = false;
+  createRenderEffect(on(open, () => {
+    mainPlacementReverse = false;
+    minorPlacementReverse = false;
+  }));
+  const [reversedMainPlacement, setReversedMainPlacement] = createSignal('top');
+  const [reversedMinorPlacement, setReversedMinorPlacement] = createSignal();
+  const contentSize = useSize(contentRef);
+  // 设置 content 显示时的 translate
+  createEffect(() => {
+    const _contentRef = contentRef();
+    const _contentSize = contentSize();
+    if (!_contentRef || !_contentSize || !open()) return;
+    let translateX = 0;
+    let translateY = 0;
+    const _childrenRect = new DOMRect(childrenRect().x, childrenRect().y, childrenRect().width, childrenRect().height);
+    if (props.offset) {
+      const [offsetX, offsetY] = props.offset;
+      _childrenRect.x += offsetX;
+      _childrenRect.y += offsetY;
+    }
+    const updateTranslateByMinorPlacement = placement => {
+      switch (placement) {
+        case 'top':
+        case 'bottom':
+          translateX = _childrenRect.left + _childrenRect.width / 2 - _contentSize.width / 2;
+          break;
+        case 'topLeft':
+        case 'bottomLeft':
+          translateX = _childrenRect.left;
+          break;
+        case 'topRight':
+        case 'bottomRight':
+          translateX = _childrenRect.right - _contentSize.width;
+          break;
+        case 'left':
+        case 'right':
+          translateY = _childrenRect.top + _childrenRect.height / 2 - _contentSize.height / 2;
+          break;
+        case 'leftTop':
+        case 'rightTop':
+          translateY = _childrenRect.top;
+          break;
+        case 'leftBottom':
+        case 'rightBottom':
+          translateY = _childrenRect.bottom - _contentSize.height;
+          break;
+      }
+    };
+    updateTranslateByMinorPlacement(props.placement);
+    const updateTranslateByMainPlacement = mainPlacement => {
+      const defaultOffset = props.offset ? 0 : 6;
+      switch (mainPlacement) {
+        case 'top':
+          translateY = _childrenRect.top - arrowOffset() - defaultOffset - _contentSize.height;
+          break;
+        case 'bottom':
+          translateY = _childrenRect.bottom + arrowOffset() + defaultOffset;
+          break;
+        case 'left':
+          translateX = _childrenRect.left - arrowOffset() - defaultOffset - _contentSize.width;
+          break;
+        case 'right':
+          translateX = _childrenRect.right + arrowOffset() + defaultOffset;
+          break;
+      }
+    };
+    let mainPlacement = getMainPlacement(props.placement);
+    if (props.autoAdjustOverflow) {
+      if (mainPlacementReverse) {
+        mainPlacement = REVERSE_PLACEMENT_DICT[mainPlacement];
+      }
+      updateTranslateByMainPlacement(mainPlacement);
+      const reverseMainPlacement = () => {
+        mainPlacementReverse = !mainPlacementReverse;
+        mainPlacement = REVERSE_PLACEMENT_DICT[mainPlacement];
+        updateTranslateByMainPlacement(mainPlacement);
+      };
+      switch (mainPlacement) {
+        case 'top':
+          if (translateY < 0) {
+            reverseMainPlacement();
+          }
+          break;
+        case 'bottom':
+          if (translateY + _contentSize.height > window.innerHeight) {
+            reverseMainPlacement();
+          }
+          break;
+        case 'left':
+          if (translateX + _contentSize.width > window.innerWidth) {
+            reverseMainPlacement();
+          }
+          break;
+        case 'right':
+          if (translateX < 0) {
+            reverseMainPlacement();
+          }
+          break;
+      }
+      let minorPlacement = getMinorPlacement(props.placement);
+      if (minorPlacement) {
+        if (minorPlacementReverse) {
+          minorPlacement = REVERSE_PLACEMENT_DICT[minorPlacement];
+        }
+        updateTranslateByMinorPlacement(mergePlacement(mainPlacement, minorPlacement));
+        const reverseMinorPlacement = () => {
+          if (!minorPlacement) return;
+          minorPlacementReverse = !minorPlacementReverse;
+          minorPlacement = REVERSE_PLACEMENT_DICT[minorPlacement];
+          updateTranslateByMinorPlacement(mergePlacement(mainPlacement, minorPlacement));
+        };
+        switch (minorPlacement) {
+          case 'top':
+            if (translateY < 0) {
+              reverseMinorPlacement();
+            }
+            break;
+          case 'bottom':
+            if (translateY + _contentSize.height > window.innerHeight) {
+              reverseMinorPlacement();
+            }
+            break;
+          case 'left':
+            if (translateX + _contentSize.width > window.innerWidth) {
+              reverseMinorPlacement();
+            }
+            break;
+          case 'right':
+            if (translateX < 0) {
+              reverseMinorPlacement();
+            }
+            break;
+        }
+      }
+      setReversedMainPlacement(mainPlacement);
+      setReversedMinorPlacement(minorPlacement);
+    } else {
+      updateTranslateByMainPlacement(mainPlacement);
+    }
+    _contentRef.style.setProperty('--translate-x', `${translateX}px`);
+    _contentRef.style.setProperty('--translate-y', `${translateY}px`);
+    // placement 为 top 和 bottom 时，tooltip 超出可视区域时对 content 进行偏移矫正
+    if (props.placement === 'top' || props.placement === 'bottom') {
+      let innerTranslateX = 0;
+      const maxInnerTranslateX = _contentSize.width / 2 - 20;
+      if (translateX < 0) {
+        innerTranslateX = Math.min(-translateX, maxInnerTranslateX);
+      }
+      if (translateX + _contentSize.width > window.innerWidth) {
+        innerTranslateX = Math.max(window.innerWidth - (translateX + _contentSize.width), -maxInnerTranslateX);
+      }
+      _contentRef.style.setProperty('--inner-translate-x', `${innerTranslateX}px`);
+      _contentRef.style.setProperty('--inner-translate-y', '0px');
+    } else if (props.placement === 'left' || props.placement === 'right') {
+      let innerTranslateY = 0;
+      const maxInnerTranslateY = _contentSize.height / 2 - 20;
+      if (translateY < 0) {
+        innerTranslateY = Math.min(-translateY, maxInnerTranslateY);
+      }
+      if (translateY + _contentSize.height > window.innerHeight) {
+        innerTranslateY = Math.max(window.innerHeight - (translateY + _contentSize.height), -maxInnerTranslateY);
+      }
+      _contentRef.style.setProperty('--inner-translate-x', '0px');
+      _contentRef.style.setProperty('--inner-translate-y', `${innerTranslateY}px`);
+    }
+  });
+  return [memo(resolvedChildren), createComponent(Dynamic, {
+    get component() {
+      return props.destroyOnClose ? Show : DelayShow;
+    },
+    get when() {
+      return open();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get mount() {
+          return props.getPopupContainer();
+        },
+        get children() {
+          return createComponent(Element$1, {
+            ref: setPopupRef,
+            get ["class"]() {
+              return cs('z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', open() ? 'block' : 'hidden');
+            },
+            style: {
+              transform: 'translate(var(--translate-x), var(--translate-y))'
+            },
+            onClick: e => {
+              e.stopPropagation();
+            },
+            get children() {
+              return [(() => {
+                var _el$ = _tmpl$();
+                insert(_el$, createComponent(TooltipContext.Provider, {
+                  value: context,
+                  get children() {
+                    return unwrapContent(props.content, () => setOpen(false));
+                  }
+                }));
+                effect(_p$ => {
+                  var _v$ = cs('px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]'),
+                    _v$2 = {
+                      transform: 'translate(var(--inner-translate-x), var(--inner-translate-y))',
+                      ...props.contentStyle
+                    };
+                  _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+                  _p$.t = style(_el$, _v$2, _p$.t);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$;
+              })(), createComponent(Show, {
+                get when() {
+                  return props.arrow;
+                },
+                get children() {
+                  var _el$2 = _tmpl$();
+                  effect(_p$ => {
+                    var _v$3 = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
+                      _v$4 = {
+                        'clip-path': 'polygon(-100% -100%, 200% -100%, 200% 200%)',
+                        'background-color': props.plain ? 'var(--ant-color-bg-container-tertiary)' : 'var(--ant-color-bg-spotlight)',
+                        ...ARROW_STYLE_DICT[mergePlacement(reversedMainPlacement(), reversedMinorPlacement())]
+                      };
+                    _v$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
+                    _p$.t = style(_el$2, _v$4, _p$.t);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined
+                  });
+                  return _el$2;
+                }
+              })];
+            }
+          });
+        }
+      });
+    }
+  })];
+};
+
+export { Tooltip as default, unwrapContent };

package/es/Transformer/index.d.ts

@@ -0,0 +1,88 @@
+import { type Ref, type Component } from 'solid-js';
+export interface TransformValue {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotate: number;
+}
+export interface TransformerInstance {
+    /** 手动进入移动状态 */
+    enterMove: (e: MouseEvent) => void;
+    /** 手动进入调整大小状态 */
+    enterResize: (e: MouseEvent) => void;
+    /** 手动进入旋转状态 */
+    enterRotate: (e: MouseEvent) => void;
+}
+export type LayoutPoint<T = DOMPoint> = T | null | [T | null, T | null];
+export interface Layout<T = LayoutPoint> {
+    topLeftPoint: T;
+    topRightPoint: T;
+    bottomLeftPoint: T;
+    bottomRightPoint: T;
+    xCenterLine?: [DOMPoint, DOMPoint];
+    yCenterLine?: [DOMPoint, DOMPoint];
+}
+export interface TransformerProps {
+    ref?: Ref<TransformerInstance>;
+    defaultValue?: TransformValue;
+    value?: TransformValue;
+    onChange?: (value: TransformValue) => void;
+    /**
+     * 移动位置时触发
+     */
+    onMove?: (value: Pick<TransformValue, 'x' | 'y'>) => void;
+    /**
+     * 缩放时触发
+     */
+    onResize?: (value: Pick<TransformValue, 'x' | 'y' | 'width' | 'height'>) => void;
+    /**
+     * 旋转时触发
+     */
+    onRotate?: (value: Pick<TransformValue, 'rotate'>) => void;
+    /**
+     * 转变结束时触发
+     */
+    onTransformEnd?: () => void;
+    /**
+     * 吸附功能
+     */
+    adsorb?: {
+        /**
+         * 吸附容器（通常是父级）宽度
+         */
+        width: number;
+        /**
+         * 吸附容器（通常是父级）高度
+         */
+        height: number;
+        /**
+         * 吸附误差，鼠标位于吸附误差范围内时，吸附
+         * 默认 5
+         */
+        gap?: number;
+    };
+    localToParentPoint?: (point: DOMPoint, transformValue: TransformValue, transformOrigin: DOMPoint) => DOMPoint | undefined;
+    parentToLocalPoint?: (point: DOMPoint, transformValue: TransformValue, transformOrigin: DOMPoint) => DOMPoint | undefined;
+    parentToWorldPoint?: (point: DOMPoint) => DOMPoint | undefined;
+    worldToParentPoint?: (point: DOMPoint) => DOMPoint | undefined;
+    localToWorldLayout?: (value: Layout<DOMPoint>) => Layout;
+    parentToWorldLayout?: (value: Layout<DOMPoint>) => Layout;
+    /**
+     * 转换中心
+     * 默认为 ['50%', '50%']
+     */
+    transformOrigin?: [x: number | `${number}%`, y: number | `${number}%`] | ((width: number, height: number) => [x: number, y: number]);
+    /**
+     * 是否显示 transformOriginIcon
+     */
+    transformOriginIcon?: boolean;
+    /**
+     * 设置 svg 的 viewBox
+     * 默认不需要设置，不设置时 svg 的宽高为 1*1，overflow 为 visible（此时显示范围不限制）
+     * 为什么要设置？某些极端情况下，如在 3d perspective 的情况下，某些点可能 x、y 值超级超级大，此时如果没有限制显示范围，显示会出现异常
+     */
+    viewBox?: DOMRect;
+}
+declare const Transformer: Component<TransformerProps>;
+export default Transformer;