antd-solid 0.0.11 → 0.0.13

package/es/Table/index.js

@@ -0,0 +1,71 @@
+import { createComponent, insert, effect, className, template } from 'solid-js/web';
+import { For, Show } from 'solid-js';
+import cs from 'classnames';
+import Empty from '../Empty/index.js';
+import Element from '../Element/index.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<table class=w-full><thead><tr></tr></thead><tbody>`),
+  _tmpl$2 = /*#__PURE__*/template(`<th>`),
+  _tmpl$3 = /*#__PURE__*/template(`<tr class=hover:bg-[var(--ant-table-row-hover-bg)]>`),
+  _tmpl$4 = /*#__PURE__*/template(`<td>`);
+const sizeClassDict = {
+  large: 'p-16px leading-22px',
+  middle: 'px-8px py-12px leading-22px',
+  small: 'p-8px leading-22px'
+};
+const Table = props => {
+  const size = useComponentSize(() => props.size);
+  return createComponent(Element, {
+    "class": "[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]",
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$2.nextSibling;
+        insert(_el$3, createComponent(For, {
+          get each() {
+            return props.columns;
+          },
+          children: item => (() => {
+            var _el$5 = _tmpl$2();
+            insert(_el$5, () => item.title);
+            effect(() => className(_el$5, cs(sizeClassDict[size()], 'bg-[var(--ant-table-header-bg)] font-bold [border-bottom:1px_solid_var(--ant-table-border-color)] text-left')));
+            return _el$5;
+          })()
+        }));
+        insert(_el$4, createComponent(For, {
+          get each() {
+            return props.dataSource;
+          },
+          children: (row, i) => (() => {
+            var _el$6 = _tmpl$3();
+            insert(_el$6, createComponent(For, {
+              get each() {
+                return props.columns;
+              },
+              children: item => (() => {
+                var _el$7 = _tmpl$4();
+                insert(_el$7, () => item.render(row, i));
+                effect(() => className(_el$7, cs(sizeClassDict[size()], '[border-bottom:1px_solid_var(--ant-table-border-color)]')));
+                return _el$7;
+              })()
+            }));
+            return _el$6;
+          })()
+        }));
+        return _el$;
+      })(), createComponent(Show, {
+        get when() {
+          return !props.dataSource.length;
+        },
+        get children() {
+          return createComponent(Empty.PRESENTED_IMAGE_SIMPLE, {});
+        }
+      })];
+    }
+  });
+};
+
+export { Table as default };

package/es/Tabs/index.d.ts

@@ -0,0 +1,49 @@
+import { type Component, type JSX } from 'solid-js';
+import { type StyleProps, type StringOrJSXElement, type ComponentSize, type Key } from '../types';
+export interface TabItem {
+    key: Key;
+    label: StringOrJSXElement;
+    children?: StringOrJSXElement;
+}
+export interface TabsProps extends StyleProps {
+    /**
+     * 默认 'line'
+     */
+    type?: 'line' | 'card' | 'segment';
+    /**
+     * 默认 'top'
+     * 对于 'segment' 类型不生效
+     */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * 大小，提供 large middle 和 small 三种大小
+     * 默认 'middle'
+     */
+    size?: ComponentSize;
+    navClass?: string;
+    navItemClass?: string;
+    contentClass?: string;
+    defaultActiveKey?: string;
+    /**
+     * 当前激活 tab 面板的 key
+     */
+    activeKey?: Key;
+    /**
+     * 切换面板的回调
+     * @param activeKey
+     * @returns
+     */
+    onChange?: (activeKey: string) => void;
+    items: TabItem[];
+    addonBefore?: JSX.Element;
+    addonAfter?: JSX.Element;
+    disabled?: boolean;
+    /**
+     * 被隐藏时是否销毁 DOM 结构
+     */
+    destroyInactiveTabPane?: boolean;
+    /** tab bar 的样式对象 */
+    tabBarStyle?: JSX.CSSProperties;
+}
+declare const Tabs: Component<TabsProps>;
+export default Tabs;

package/es/Tabs/index.js

@@ -0,0 +1,256 @@
+import { delegateEvents, createComponent, insert, effect, className, setAttribute, style, Dynamic, template, use } from 'solid-js/web';
+import { mergeProps, untrack, createSelector, createSignal, createEffect, on, children, Show, Switch, Match, For, onCleanup } from 'solid-js';
+import cs from 'classnames';
+import Segmented from '../Segmented/index.js';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
+import DelayShow from '../DelayShow/index.js';
+import Element from '../Element/index.js';
+import createControllableValue from '../hooks/createControllableValue.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div aria-label=selected-bar>`);
+const Tabs = _props => {
+  const props = mergeProps({
+    type: 'line',
+    placement: 'top',
+    disabled: false
+  }, _props);
+  const size = useComponentSize(() => props.size);
+  const [activeKey, setActiveKey] = createControllableValue(props, {
+    defaultValuePropName: 'defaultActiveKey',
+    valuePropName: 'activeKey',
+    trigger: 'onChange',
+    defaultValue: untrack(() => props.items[0]?.key)
+  });
+  const isSelectedItem = createSelector(() => activeKey());
+  const [selectedBarStyle, setSelectedBarStyle] = createSignal({
+    left: '0px',
+    width: '0px'
+  });
+  let lineNav;
+  const updateSelectedBarStyle = () => {
+    if (!lineNav) return;
+    const el = lineNav.querySelector(':scope > [aria-label="selected"]');
+    if (!el) return;
+    if (props.placement === 'top' || props.placement === 'bottom') {
+      setSelectedBarStyle({
+        left: `${el.offsetLeft}px`,
+        width: `${el.clientWidth}px`
+      });
+    } else {
+      setSelectedBarStyle({
+        top: `${el.offsetTop}px`,
+        height: `${el.clientHeight}px`
+      });
+    }
+  };
+  createEffect(on([() => props.type, () => props.placement], () => {
+    if (!lineNav) return;
+    updateSelectedBarStyle();
+    const resizeObserver = new ResizeObserver(() => {
+      updateSelectedBarStyle();
+    });
+    resizeObserver.observe(lineNav);
+    onCleanup(() => {
+      resizeObserver.disconnect();
+    });
+  }));
+  const resolvedAddonBefore = children(() => props.addonBefore);
+  const resolvedAddonAfter = children(() => props.addonAfter);
+  return createComponent(Element, {
+    get ["class"]() {
+      return cs(props.class, 'flex [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', props.placement === 'top' && 'flex-col', props.placement === 'bottom' && 'flex-col-reverse', props.placement === 'right' && 'flex-row-reverse');
+    },
+    get style() {
+      return {
+        // nav 和 content 之间的间隔
+        '--ant-tabs-gap': 'var(--ant-margin)',
+        ...props.style
+      };
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$();
+        insert(_el$, createComponent(Show, {
+          get when() {
+            return resolvedAddonBefore();
+          },
+          get children() {
+            var _el$2 = _tmpl$();
+            insert(_el$2, resolvedAddonBefore);
+            return _el$2;
+          }
+        }), null);
+        insert(_el$, createComponent(Switch, {
+          get children() {
+            return [createComponent(Match, {
+              get when() {
+                return props.type === 'line';
+              },
+              get children() {
+                var _el$3 = _tmpl$2(),
+                  _el$4 = _el$3.firstChild;
+                var _ref$ = lineNav;
+                typeof _ref$ === "function" ? use(_ref$, _el$3) : lineNav = _el$3;
+                insert(_el$3, createComponent(For, {
+                  get each() {
+                    return props.items;
+                  },
+                  children: item => (() => {
+                    var _el$7 = _tmpl$();
+                    _el$7.$$click = () => {
+                      setActiveKey(item.key);
+                      updateSelectedBarStyle();
+                    };
+                    insert(_el$7, () => unwrapStringOrJSXElement(item.label));
+                    effect(_p$ => {
+                      var _v$6 = cs('cursor-pointer', 'hover:text-[var(--ant-color-primary)]', props.navItemClass, isSelectedItem(item.key) && 'text-[var(--ant-color-primary)]', (props.placement === 'top' || props.placement === 'bottom') && {
+                          small: 'py-[--ant-padding-xs]',
+                          middle: 'py-[--ant-padding-sm]',
+                          large: 'py-[--ant-padding]'
+                        }[size()], (props.placement === 'left' || props.placement === 'right') && 'px-24px py-8px'),
+                        _v$7 = isSelectedItem(item.key) ? 'selected' : undefined;
+                      _v$6 !== _p$.e && className(_el$7, _p$.e = _v$6);
+                      _v$7 !== _p$.t && setAttribute(_el$7, "aria-label", _p$.t = _v$7);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined
+                    });
+                    return _el$7;
+                  })()
+                }), _el$4);
+                effect(_p$ => {
+                  var _v$ = cs('grow flex relative', (props.placement === 'top' || props.placement === 'bottom') && 'gap-32px', (props.placement === 'left' || props.placement === 'right') && 'flex-col gap-16px'),
+                    _v$2 = cs('absolute bg-[var(--ant-color-primary)] transition-left,top', props.placement === 'top' && '-bottom-1px', props.placement === 'bottom' && '-top-1px', props.placement === 'left' && '-right-1px', props.placement === 'right' && '-left-1px', (props.placement === 'top' || props.placement === 'bottom') && 'h-2px', (props.placement === 'left' || props.placement === 'right') && 'w-2px'),
+                    _v$3 = selectedBarStyle();
+                  _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+                  _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+                  _p$.a = style(_el$4, _v$3, _p$.a);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined
+                });
+                return _el$3;
+              }
+            }), createComponent(Match, {
+              get when() {
+                return props.type === 'segment';
+              },
+              get children() {
+                return createComponent(Segmented, {
+                  "class": "grow",
+                  block: true,
+                  get size() {
+                    return size();
+                  },
+                  get disabled() {
+                    return props.disabled;
+                  },
+                  get value() {
+                    return activeKey();
+                  },
+                  onChange: key => {
+                    setActiveKey(key);
+                  },
+                  get options() {
+                    return props.items.map(item => ({
+                      label: item.label,
+                      value: item.key
+                    }));
+                  }
+                });
+              }
+            }), createComponent(Match, {
+              get when() {
+                return props.type === 'card';
+              },
+              get children() {
+                var _el$5 = _tmpl$();
+                insert(_el$5, createComponent(For, {
+                  get each() {
+                    return props.items;
+                  },
+                  children: item => (() => {
+                    var _el$8 = _tmpl$();
+                    _el$8.$$click = () => {
+                      setActiveKey(item.key);
+                      updateSelectedBarStyle();
+                    };
+                    insert(_el$8, () => unwrapStringOrJSXElement(item.label));
+                    effect(() => className(_el$8, cs({
+                      small: 'py-6px',
+                      middle: 'py-8px',
+                      large: 'py-8px'
+                    }[size()], 'px-16px cursor-pointer border-solid border-[var(--ant-color-border-secondary)] border-1px relative', 'hover:text-[var(--ant-color-primary)]', props.placement === 'top' && 'rounded-t-[var(--ant-border-radius-lg)] !border-b-0px', props.placement === 'bottom' && 'rounded-b-[var(--ant-border-radius-lg)] !border-t-0px', props.placement === 'left' && 'rounded-l-[var(--ant-border-radius-lg)] !border-r-0px', props.placement === 'right' && 'rounded-r-[var(--ant-border-radius-lg)] !border-l-0px', props.navItemClass, isSelectedItem(item.key) ? ['text-[var(--ant-color-primary)] bg-[var(--ant-color-bg-container)]', ['after:content-empty after:block after:absolute after:bg-inherit', props.placement === 'top' && 'after:bottom--1px', props.placement === 'bottom' && 'after:top--1px', props.placement === 'left' && 'after:right--1px', props.placement === 'right' && 'after:left--1px', (props.placement === 'top' || props.placement === 'bottom') && 'after:left-0 after:right-0 after:h-1px', (props.placement === 'left' || props.placement === 'right') && 'after:top-0 after:bottom-0 after:w-1px']] : 'bg-[var(--ant-tabs-card-bg)]')));
+                    return _el$8;
+                  })()
+                }));
+                effect(() => className(_el$5, cs('grow flex gap-2px relative', (props.placement === 'left' || props.placement === 'right') && 'flex-col')));
+                return _el$5;
+              }
+            })];
+          }
+        }), null);
+        insert(_el$, createComponent(Show, {
+          get when() {
+            return resolvedAddonAfter();
+          },
+          get children() {
+            var _el$6 = _tmpl$();
+            insert(_el$6, resolvedAddonAfter);
+            return _el$6;
+          }
+        }), null);
+        effect(_p$ => {
+          var _v$4 = cs('shrink-0 flex items-center gap-16px', props.navClass, props.type === 'segment' ? 'mb-[--ant-tabs-gap]' : ['border-solid border-[var(--ant-color-border-secondary)] border-0', props.placement === 'top' && '!border-b-1px mb-[--ant-tabs-gap]', props.placement === 'bottom' && '!border-t-1px mt-[--ant-tabs-gap]', props.placement === 'left' && '!border-r-1px mr-[--ant-tabs-gap]', props.placement === 'right' && '!border-l-1px ml-[--ant-tabs-gap]', (props.placement === 'left' || props.placement === 'right') && 'flex-col'], {
+              small: '[font-size:var(--ant-font-size)]',
+              middle: '[font-size:var(--ant-font-size)]',
+              large: '[font-size:var(--ant-font-size-lg)]'
+            }[size()]),
+            _v$5 = props.tabBarStyle;
+          _v$4 !== _p$.e && className(_el$, _p$.e = _v$4);
+          _p$.t = style(_el$, _v$5, _p$.t);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$;
+      })(), createComponent(For, {
+        get each() {
+          return props.items;
+        },
+        children: item => createComponent(Dynamic, {
+          get component() {
+            return props.destroyInactiveTabPane ? Show : DelayShow;
+          },
+          get when() {
+            return isSelectedItem(item.key);
+          },
+          get children() {
+            var _el$9 = _tmpl$();
+            insert(_el$9, () => unwrapStringOrJSXElement(item.children));
+            effect(_p$ => {
+              var _v$8 = cs(props.contentClass, 'grow'),
+                _v$9 = isSelectedItem(item.key) ? 'block' : 'none';
+              _v$8 !== _p$.e && className(_el$9, _p$.e = _v$8);
+              _v$9 !== _p$.t && ((_p$.t = _v$9) != null ? _el$9.style.setProperty("display", _v$9) : _el$9.style.removeProperty("display"));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$9;
+          }
+        })
+      })];
+    }
+  });
+};
+delegateEvents(["click"]);
+
+export { Tabs as default };

package/es/Timeline/index.js

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

package/es/Tooltip/context.d.ts

@@ -0,0 +1,5 @@
+export interface TooltipContextProps {
+    registerSubPopup: (id: string, node: HTMLElement) => void;
+}
+declare const TooltipContext: import("solid-js").Context<TooltipContextProps | undefined>;
+export default TooltipContext;

package/es/Tooltip/context.js

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

package/es/Tooltip/index.d.ts

@@ -0,0 +1,64 @@
+import { type Component, type JSXElement, type JSX } from 'solid-js';
+type ActionType = 'hover' | 'focus' | 'click' | false;
+type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+export interface TooltipProps {
+    /**
+     * 默认: hover
+     */
+    trigger?: ActionType;
+    /**
+     * 默认: top
+     */
+    placement?: TooltipPlacement;
+    contentStyle?: JSX.CSSProperties;
+    content?: JSXElement | ((close: () => void) => JSXElement);
+    children?: JSXElement;
+    /**
+     * 只有在 trigger 为 manual 时生效
+     */
+    position?: [x: number, y: number];
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 简单样式
+     * 如果为 true，则背景色和文字颜色会跟随主题
+     * 默认 false
+     */
+    plain?: boolean;
+    /**
+     * 默认: true
+     */
+    arrow?: boolean | {
+        pointAtCenter: boolean;
+    };
+    /**
+     * 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。
+     * 默认 () => document.body
+     * @returns
+     */
+    getPopupContainer?: () => HTMLElement;
+    /**
+     * x、y 轴的偏移量
+     */
+    offset?: [number, number];
+    /**
+     * 鼠标移出后延时多少才隐藏 Tooltip，单位：秒
+     * 默认 0.1
+     */
+    mouseLeaveDelay?: number;
+    /**
+     * 气泡被遮挡时自动调整位置
+     * 默认 true
+     */
+    autoAdjustOverflow?: boolean;
+    /**
+     * 关闭时销毁 Tooltip 里的子元素
+     */
+    destroyOnClose?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+export declare const unwrapContent: (content: TooltipProps['content'], close: () => void) => JSX.Element;
+declare const Tooltip: Component<TooltipProps>;
+export default Tooltip;