antd-solid 0.0.12 → 0.0.14

package/es/Switch.js

@@ -1,30 +0,0 @@
-import { delegateEvents, effect, className, template } from 'solid-js/web';
-import createControllableValue from './hooks/createControllableValue.js';
-import cs from 'classnames';
-
-const _tmpl$ = /*#__PURE__*/template(`<button><div>`);
-const Switch = props => {
-  const [checked, setChecked] = createControllableValue(props, {
-    defaultValuePropName: 'defaultChecked',
-    valuePropName: 'checked'
-  });
-  return (() => {
-    const _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild;
-    _el$.$$click = () => setChecked(c => !c);
-    effect(_p$ => {
-      const _v$ = cs('ant-w-44px ant-h-22px ant-rounded-100px ant-relative', checked() ? 'ant-bg-[var(--ant-color-primary)]' : 'ant-bg-[rgba(0,0,0,0.45)]'),
-        _v$2 = cs('ant-w-18px ant-h-18px ant-rounded-50% ant-bg-white ant-absolute ant-top-1/2 -ant-translate-y-1/2 ant-transition-left', checked() ? 'ant-left-[calc(100%-20px)]' : 'ant-left-2px');
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && className(_el$2, _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-    return _el$;
-  })();
-};
-delegateEvents(["click"]);
-
-export { Switch as default };

package/es/Table.js

@@ -1,57 +0,0 @@
-import { insert, createComponent, template } from 'solid-js/web';
-import Empty from './Empty/index.js';
-import { For, Show } from 'solid-js';
-
-const _tmpl$ = /*#__PURE__*/template(`<div><table class="ant-w-full"><thead><tr></tr></thead><tbody>`),
-  _tmpl$2 = /*#__PURE__*/template(`<th class="ant-p-16px ant-bg-[var(--light-bg-color)] ant-font-bold ant-[border-bottom:1px_solid_var(--secondary-border-color)] ant-text-left">`),
-  _tmpl$3 = /*#__PURE__*/template(`<tr class="hover:ant-bg-[var(--light-bg-color)]">`),
-  _tmpl$4 = /*#__PURE__*/template(`<td class="ant-p-16px ant-[border-bottom:1px_solid_var(--secondary-border-color)]">`);
-const Table = props => {
-  return (() => {
-    const _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild,
-      _el$3 = _el$2.firstChild,
-      _el$4 = _el$3.firstChild,
-      _el$5 = _el$3.nextSibling;
-    insert(_el$4, createComponent(For, {
-      get each() {
-        return props.columns;
-      },
-      children: item => (() => {
-        const _el$6 = _tmpl$2();
-        insert(_el$6, () => item.title);
-        return _el$6;
-      })()
-    }));
-    insert(_el$5, createComponent(For, {
-      get each() {
-        return props.dataSource;
-      },
-      children: row => (() => {
-        const _el$7 = _tmpl$3();
-        insert(_el$7, createComponent(For, {
-          get each() {
-            return props.columns;
-          },
-          children: item => (() => {
-            const _el$8 = _tmpl$4();
-            insert(_el$8, () => item.render(row));
-            return _el$8;
-          })()
-        }));
-        return _el$7;
-      })()
-    }));
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return !props.dataSource.length;
-      },
-      get children() {
-        return createComponent(Empty.PRESENTED_IMAGE_SIMPLE, {});
-      }
-    }), null);
-    return _el$;
-  })();
-};
-
-export { Table as default };

package/es/Tabs.d.ts

@@ -1,17 +0,0 @@
-import { type Component } from 'solid-js';
-import { type StringOrJSXElement } from './types';
-export interface Tab {
-    key: string;
-    label: StringOrJSXElement;
-    children?: StringOrJSXElement;
-}
-export interface TabsProps {
-    type?: 'line' | 'segment';
-    class?: string;
-    navClass?: string;
-    navItemClass?: string;
-    contentClass?: string;
-    items: Tab[];
-}
-declare const Tabs: Component<TabsProps>;
-export default Tabs;

package/es/Tabs.js

@@ -1,117 +0,0 @@
-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(--ant-color-primary)] 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(--ant-color-primary)] 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.js

@@ -1,30 +0,0 @@
-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(--ant-color-primary)] 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

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

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

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