antd-solid 0.0.6 → 0.0.8

package/es/Tabs.js

@@ -0,0 +1,117 @@
+import { delegateEvents, insert, createComponent, effect, className, style, template, use } from 'solid-js/web';
+import { mergeProps, createSignal, untrack, createSelector, onMount, Switch, Match, For, onCleanup } from 'solid-js';
+import cs from 'classnames';
+import Segmented from './Segmented/index.js';
+import { unwrapStringOrJSXElement } from './utils/solid.js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div><div role="selected-bar" class="ant-absolute ant-bottom-0 ant-bg-[var(--primary-color)] ant-h-2px ant-transition-left">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div>`),
+  _tmpl$3 = /*#__PURE__*/template(`<div>`);
+const Tabs = _props => {
+  const props = mergeProps({
+    type: 'line'
+  }, _props);
+  const [selectedItem, setSelectedItem] = createSignal(untrack(() => props.items[0]));
+  const isSelectedItem = createSelector(() => selectedItem()?.key);
+  const [selectedBarStyle, setSelectedBarStyle] = createSignal({
+    left: '0px',
+    width: '0px'
+  });
+  let nav;
+  const updateSelectedBarStyle = () => {
+    if (!nav) return;
+    const el = nav.querySelector(':scope > .selected');
+    if (!el) return;
+    setSelectedBarStyle({
+      left: `${el.offsetLeft}px`,
+      width: `${el.clientWidth}px`
+    });
+  };
+  onMount(() => {
+    if (!nav) return;
+    updateSelectedBarStyle();
+    const resizeObserver = new ResizeObserver(() => {
+      updateSelectedBarStyle();
+    });
+    resizeObserver.observe(nav);
+    onCleanup(() => {
+      resizeObserver.disconnect();
+    });
+  });
+  return (() => {
+    const _el$ = _tmpl$2(),
+      _el$4 = _el$.firstChild;
+    insert(_el$, createComponent(Switch, {
+      get children() {
+        return [createComponent(Match, {
+          get when() {
+            return props.type === 'line';
+          },
+          get children() {
+            const _el$2 = _tmpl$(),
+              _el$3 = _el$2.firstChild;
+            const _ref$ = nav;
+            typeof _ref$ === "function" ? use(_ref$, _el$2) : nav = _el$2;
+            insert(_el$2, createComponent(For, {
+              get each() {
+                return props.items;
+              },
+              children: item => (() => {
+                const _el$5 = _tmpl$3();
+                _el$5.$$click = () => {
+                  setSelectedItem(item);
+                  updateSelectedBarStyle();
+                };
+                insert(_el$5, () => unwrapStringOrJSXElement(item.label));
+                effect(() => className(_el$5, cs('ant-py-12px ant-cursor-pointer', props.navItemClass, isSelectedItem(item.key) && 'ant-text-[var(--primary-color)] selected')));
+                return _el$5;
+              })()
+            }), _el$3);
+            effect(_p$ => {
+              const _v$ = cs('ant-mb-16px ant-flex ant-gap-32px ant-[border-bottom:solid_1px_rgba(5,5,5,0.1)] ant-relative', props.navClass),
+                _v$2 = selectedBarStyle();
+              _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+              _p$._v$2 = style(_el$3, _v$2, _p$._v$2);
+              return _p$;
+            }, {
+              _v$: undefined,
+              _v$2: undefined
+            });
+            return _el$2;
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.type === 'segment';
+          },
+          get children() {
+            return createComponent(Segmented, {
+              block: true,
+              get options() {
+                return props.items.map(item => ({
+                  label: item.label,
+                  value: item.key,
+                  onClick: () => setSelectedItem(item)
+                }));
+              }
+            });
+          }
+        })];
+      }
+    }), _el$4);
+    insert(_el$4, () => unwrapStringOrJSXElement(selectedItem()?.children));
+    effect(_p$ => {
+      const _v$3 = props.class,
+        _v$4 = props.contentClass;
+      _v$3 !== _p$._v$3 && className(_el$, _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && className(_el$4, _p$._v$4 = _v$4);
+      return _p$;
+    }, {
+      _v$3: undefined,
+      _v$4: undefined
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+
+export { Tabs as default };

package/es/Timeline.d.ts

@@ -0,0 +1,13 @@
+import { type Accessor, type Component, type JSXElement } from 'solid-js';
+import { type TimelineItemProps as TimelineItemAntdProps } from 'antd';
+interface TimelineItemProps extends Omit<TimelineItemAntdProps, 'children' | 'dot' | 'label'> {
+    dot?: JSXElement;
+    label?: JSXElement;
+    children?: Accessor<JSXElement>;
+}
+interface TimelineProps {
+    class?: string;
+    items: TimelineItemProps[];
+}
+declare const Timeline: Component<TimelineProps>;
+export default Timeline;

package/es/Timeline.js

@@ -0,0 +1,30 @@
+import { insert, createComponent, memo, template } from 'solid-js/web';
+import { For } from 'solid-js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-gap-[16px]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-flex ant-relative"><div class="ant-w-[10px] ant-h-[10px] ant-border-solid ant-border-width-[3px] ant-border-[var(--primary-color)] ant-bg-white ant-rounded-[50%] ant-mt-[8px]"></div><div class="ant-ml-[8px]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="ant-absolute ant-top-[8px] ant-bottom-[-24px] ant-left-[4px] ant-w-[2px] ant-bg-[rgba(5,5,5,.06)]">`);
+const Timeline = props => {
+  return (() => {
+    const _el$ = _tmpl$();
+    insert(_el$, createComponent(For, {
+      get each() {
+        return props.items;
+      },
+      children: (item, i) => (() => {
+        const _el$2 = _tmpl$2(),
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling;
+        insert(_el$2, (() => {
+          const _c$ = memo(() => i() !== props.items.length - 1);
+          return () => _c$() && _tmpl$3();
+        })(), _el$3);
+        insert(_el$4, () => item.children?.());
+        return _el$2;
+      })()
+    }));
+    return _el$;
+  })();
+};
+
+export { Timeline as default };

package/es/Tooltip.d.ts

@@ -0,0 +1,34 @@
+import { type Component, type JSXElement, type JSX } from 'solid-js';
+type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
+type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+export interface TooltipProps {
+    /**
+     * 默认: hover
+     */
+    trigger?: ActionType | ActionType[];
+    /**
+     * 默认: top
+     */
+    placement?: TooltipPlacement;
+    contentStyle?: JSX.CSSProperties;
+    content?: JSXElement | ((close: () => void) => JSXElement);
+    children?: JSXElement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 默认: dark
+     */
+    mode?: 'dark' | 'light';
+    /**
+     * 默认: true
+     */
+    arrow?: boolean | {
+        pointAtCenter: boolean;
+    };
+}
+export declare const Content: Component<{
+    content: TooltipProps['content'];
+    close: () => void;
+}>;
+declare const Tooltip: Component<TooltipProps>;
+export default Tooltip;

package/es/Tooltip.js

@@ -0,0 +1,302 @@
+import { delegateEvents, createComponent, memo, Portal, use, insert, effect, className, style, template } from 'solid-js/web';
+import { compact } from 'lodash-es';
+import { Show, mergeProps, children, createEffect, onCleanup, createSignal, createMemo } from 'solid-js';
+import cs from 'classnames';
+import createControllableValue from './hooks/createControllableValue.js';
+import useClickAway from './hooks/useClickAway.js';
+import { toArray } from './utils/array.js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div>`);
+const Content = props => {
+  return createComponent(Show, {
+    get when() {
+      return typeof props.content === 'function';
+    },
+    get fallback() {
+      return props.content;
+    },
+    get children() {
+      return memo(() => typeof props.content === 'function')() && props.content(props.close);
+    }
+  });
+};
+const Tooltip = _props => {
+  const props = mergeProps({
+    trigger: 'hover',
+    placement: 'top',
+    mode: 'dark',
+    arrow: true
+  }, _props);
+  const resolvedChildren = children(() => _props.children);
+  let content;
+  const [open, setOpen] = createControllableValue(_props, {
+    defaultValue: false,
+    valuePropName: 'open',
+    trigger: 'onOpenChange'
+  });
+  const reverseOpen = () => setOpen(v => !v);
+  createEffect(() => {
+    const _children = resolvedChildren();
+    toArray(props.trigger).forEach(trigger => {
+      switch (trigger) {
+        case 'hover':
+          _children.addEventListener('mouseenter', reverseOpen);
+          _children.addEventListener('mouseleave', reverseOpen);
+          onCleanup(() => {
+            _children.removeEventListener('mouseenter', reverseOpen);
+            _children.removeEventListener('mouseleave', reverseOpen);
+          });
+          break;
+        case 'click':
+          _children.addEventListener('click', reverseOpen);
+          onCleanup(() => {
+            _children.removeEventListener('click', reverseOpen);
+          });
+          useClickAway(() => setOpen(false), () => compact([content, _children]));
+          break;
+        case 'focus':
+          _children.addEventListener('focus', reverseOpen);
+          _children.addEventListener('blur', reverseOpen);
+          onCleanup(() => {
+            _children.removeEventListener('focus', reverseOpen);
+            _children.removeEventListener('blur', reverseOpen);
+          });
+          break;
+      }
+    });
+  });
+  const [childrenRect, setChildrenRect] = createSignal(new DOMRect());
+  createEffect(() => {
+    if (open()) {
+      const _children = resolvedChildren();
+      setChildrenRect(_children.getBoundingClientRect());
+    }
+  });
+  const arrowOffset = createMemo(() => props.arrow ? 8 : 0);
+  const contentPositionStyle = createMemo(() => {
+    switch (props.placement) {
+      case 'top':
+        return {
+          top: `${childrenRect().top - arrowOffset()}px`,
+          left: `${childrenRect().left + childrenRect().width / 2}px`,
+          transform: 'translate(-50%, -100%)'
+        };
+      case 'topLeft':
+        return {
+          top: `${childrenRect().top - arrowOffset()}px`,
+          left: `${childrenRect().left}px`,
+          transform: 'translate(0, -100%)'
+        };
+      case 'topRight':
+        return {
+          top: `${childrenRect().top - arrowOffset()}px`,
+          left: `${childrenRect().right}px`,
+          transform: 'translate(-100%, -100%)'
+        };
+      case 'bottom':
+        return {
+          top: `${childrenRect().bottom + arrowOffset()}px`,
+          left: `${childrenRect().left + childrenRect().width / 2}px`,
+          transform: 'translate(-50%, 0)'
+        };
+      case 'bottomLeft':
+        return {
+          top: `${childrenRect().bottom + arrowOffset()}px`,
+          left: `${childrenRect().left}px`
+        };
+      case 'bottomRight':
+        return {
+          top: `${childrenRect().bottom + arrowOffset()}px`,
+          left: `${childrenRect().right}px`,
+          transform: 'translate(-100%, 0)'
+        };
+      case 'left':
+        return {
+          top: `${childrenRect().top + childrenRect().height / 2}px`,
+          left: `${childrenRect().left - arrowOffset()}px`,
+          transform: 'translate(-100%, -50%)'
+        };
+      case 'leftTop':
+        return {
+          top: `${childrenRect().top}px`,
+          left: `${childrenRect().left - arrowOffset()}px`,
+          transform: 'translate(-100%)'
+        };
+      case 'leftBottom':
+        return {
+          top: `${childrenRect().bottom}px`,
+          left: `${childrenRect().left - arrowOffset()}px`,
+          transform: 'translate(-100%, -100%)'
+        };
+      case 'right':
+        return {
+          top: `${childrenRect().top + childrenRect().height / 2}px`,
+          left: `${childrenRect().right + arrowOffset()}px`,
+          transform: 'translate(0, -50%)'
+        };
+      case 'rightTop':
+        return {
+          top: `${childrenRect().top}px`,
+          left: `${childrenRect().right + arrowOffset()}px`
+        };
+      case 'rightBottom':
+        return {
+          top: `${childrenRect().bottom}px`,
+          left: `${childrenRect().right + arrowOffset()}px`,
+          transform: 'translate(0, -100%)'
+        };
+    }
+  });
+  const arrowStyle = createMemo(() => {
+    switch (props.placement) {
+      case 'top':
+        return {
+          'border-top-color': 'var(--color)',
+          top: '100%',
+          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
+          left: '50%',
+          transform: 'translateX(-50%)'
+        };
+      case 'topLeft':
+        return {
+          'border-top-color': 'var(--color)',
+          top: '100%',
+          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
+          left: '8px'
+        };
+      case 'topRight':
+        return {
+          'border-top-color': 'var(--color)',
+          top: '100%',
+          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
+          right: '8px'
+        };
+      case 'bottom':
+        return {
+          'border-bottom-color': 'var(--color)',
+          bottom: '100%',
+          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
+          left: '50%',
+          transform: 'translateX(-50%)'
+        };
+      case 'bottomLeft':
+        return {
+          'border-bottom-color': 'var(--color)',
+          bottom: '100%',
+          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
+          left: '8px'
+        };
+      case 'bottomRight':
+        return {
+          'border-bottom-color': 'var(--color)',
+          bottom: '100%',
+          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
+          right: '8px'
+        };
+      case 'left':
+        return {
+          'border-left-color': 'var(--color)',
+          top: '50%',
+          right: 0,
+          transform: 'translate(100%, -50%)'
+        };
+      case 'leftTop':
+        return {
+          'border-left-color': 'var(--color)',
+          top: '8px',
+          right: 0,
+          transform: 'translate(100%, 0)'
+        };
+      case 'leftBottom':
+        return {
+          'border-left-color': 'var(--color)',
+          bottom: '8px',
+          right: 0,
+          transform: 'translate(100%, 0)'
+        };
+      case 'right':
+        return {
+          'border-right-color': 'var(--color)',
+          top: '50%',
+          left: 0,
+          transform: 'translate(-100%, -50%)'
+        };
+      case 'rightTop':
+        return {
+          'border-right-color': 'var(--color)',
+          top: '8px',
+          left: 0,
+          transform: 'translate(-100%, 0)'
+        };
+      case 'rightBottom':
+        return {
+          'border-right-color': 'var(--color)',
+          bottom: '8px',
+          left: 0,
+          transform: 'translate(-100%, 0)'
+        };
+    }
+  });
+  return [memo(resolvedChildren), createComponent(Show, {
+    get when() {
+      return open();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get children() {
+          const _el$ = _tmpl$();
+          _el$.$$click = e => {
+            e.stopPropagation();
+          };
+          const _ref$ = content;
+          typeof _ref$ === "function" ? use(_ref$, _el$) : content = _el$;
+          insert(_el$, createComponent(Content, {
+            get content() {
+              return props.content;
+            },
+            close: () => setOpen(false)
+          }), null);
+          insert(_el$, createComponent(Show, {
+            get when() {
+              return props.arrow;
+            },
+            get children() {
+              const _el$2 = _tmpl$();
+              effect(_p$ => {
+                const _v$ = cs('ant-w-8px ant-h-8px ant-absolute ant-border-solid ant-border-4px ant-border-transparent'),
+                  _v$2 = {
+                    '--color': props.mode === 'dark' ? 'rgba(0,0,0,0.85)' : 'white',
+                    ...arrowStyle()
+                  };
+                _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+                _p$._v$2 = style(_el$2, _v$2, _p$._v$2);
+                return _p$;
+              }, {
+                _v$: undefined,
+                _v$2: undefined
+              });
+              return _el$2;
+            }
+          }), null);
+          effect(_p$ => {
+            const _v$3 = cs('ant-z-1000 ant-fixed ant-absolute ant-px-8px ant-py-6px ant-rounded-8px ant-box-content ant-[box-shadow:0_6px_16px_0_rgba(0,0,0,0.08),0_3px_6px_-4px_rgba(0,0,0,0.12),0_9px_28px_8px_rgba(0,0,0,0.05)]', props.mode === 'dark' ? 'ant-bg-[rgba(0,0,0,0.85)] ant-text-white' : 'ant-bg-white'),
+              _v$4 = {
+                ...contentPositionStyle(),
+                ...props.contentStyle
+              };
+            _v$3 !== _p$._v$3 && className(_el$, _p$._v$3 = _v$3);
+            _p$._v$4 = style(_el$, _v$4, _p$._v$4);
+            return _p$;
+          }, {
+            _v$3: undefined,
+            _v$4: undefined
+          });
+          return _el$;
+        }
+      });
+    }
+  })];
+};
+delegateEvents(["click"]);
+
+export { Content, Tooltip as default };

package/es/Tree.d.ts

@@ -0,0 +1,28 @@
+import { type JSXElement } from 'solid-js';
+export interface TreeProps<T extends {} = {}> {
+    class?: string;
+    defaultSelectedNodes?: T[];
+    treeData?: T[];
+    /**
+     * 是否节点占据一行
+     */
+    blockNode?: boolean;
+    defaultExpandAll?: boolean;
+    /**
+     * 设置节点可拖拽
+     */
+    draggable?: boolean;
+    titleRender: (node: T, info: {
+        indexes: number[];
+    }) => JSXElement;
+    children: (node: T) => T[] | undefined;
+    onSelect?: (node: T) => void;
+    onDrop?: (info: {
+        dragNode: T;
+        targetNode: T;
+        dragIndexes: number[];
+        targetIndexes: number[];
+    }) => void;
+}
+declare function Tree<T extends {} = {}>(props: TreeProps<T>): import("solid-js").JSX.Element;
+export default Tree;