antd-solid 0.0.2 → 0.0.3

package/src/Table.tsx

@@ -1,45 +1,52 @@
-import { type JSXElement, For } from 'solid-js'
+import Empty from './Empty'
+import { type JSXElement, For, Show } from 'solid-js'
 
-export interface Column<R extends {}> {
+export interface TableColumn<R extends {}> {
   title: JSXElement
   render: (row: R) => JSXElement
 }
 
 export interface TableProps<R extends {}> {
-  columns: Array<Column<R>>
+  columns: Array<TableColumn<R>>
   dataSource: R[]
 }
 
 const Table = <R extends {}>(props: TableProps<R>) => {
   return (
-    <table class="ant-w-full">
-      <thead>
-        <tr>
-          <For each={props.columns}>
-            {item => (
-              <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">
-                {item.title}
-              </th>
+    <div>
+      <table class="ant-w-full">
+        <thead>
+          <tr>
+            <For each={props.columns}>
+              {item => (
+                <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">
+                  {item.title}
+                </th>
+              )}
+            </For>
+          </tr>
+        </thead>
+        <tbody>
+          <For each={props.dataSource}>
+            {row => (
+              <tr class="hover:ant-bg-[var(--light-bg-color)]">
+                <For each={props.columns}>
+                  {item => (
+                    <td class="ant-p-16px ant-[border-bottom:1px_solid_var(--secondary-border-color)]">
+                      {item.render(row)}
+                    </td>
+                  )}
+                </For>
+              </tr>
             )}
           </For>
-        </tr>
-      </thead>
-      <tbody>
-        <For each={props.dataSource}>
-          {row => (
-            <tr class="hover:ant-bg-[var(--light-bg-color)]">
-              <For each={props.columns}>
-                {item => (
-                  <td class="ant-p-16px ant-[border-bottom:1px_solid_var(--secondary-border-color)]">
-                    {item.render(row)}
-                  </td>
-                )}
-              </For>
-            </tr>
-          )}
-        </For>
-      </tbody>
-    </table>
+        </tbody>
+      </table>
+
+      <Show when={!props.dataSource.length}>
+        <Empty.PRESENTED_IMAGE_SIMPLE />
+      </Show>
+    </div>
   )
 }
 

package/src/Tabs.tsx

@@ -1,86 +1,129 @@
 import {
   type Component,
   For,
-  type JSXElement,
   createSelector,
   createSignal,
   onMount,
   untrack,
   type JSX,
-  Show,
+  onCleanup,
+  mergeProps,
+  Switch,
+  Match,
 } from 'solid-js'
 import cs from 'classnames'
-import { isNil } from 'lodash-es'
+import Segmented from './Segmented'
+import { type StringOrJSXElement } from './types'
+import { unwrapStringOrJSXElement } from './utils/solid'
 
 export interface Tab {
   key: string
-  label: JSXElement
-  children?: JSXElement
+  label: StringOrJSXElement
+  children?: StringOrJSXElement
 }
 
 export interface TabsProps {
+  type?: 'line' | 'segment'
   class?: string
-  navWrapClass?: string
+  navClass?: string
   navItemClass?: string
+  contentClass?: string
   items: Tab[]
 }
 
-const Tabs: Component<TabsProps> = props => {
-  const [selectedItem, setSelectedItem] = createSignal<Tab | undefined>(untrack(() => props.items[0]))
+const Tabs: Component<TabsProps> = _props => {
+  const props = mergeProps(
+    {
+      type: 'line',
+    } as TabsProps,
+    _props,
+  )
+
+  const [selectedItem, setSelectedItem] = createSignal<Tab | undefined>(
+    untrack(() => props.items[0]),
+  )
   const isSelectedItem = createSelector(() => selectedItem()?.key)
   const [selectedBarStyle, setSelectedBarStyle] = createSignal<JSX.CSSProperties>({
     left: '0px',
     width: '0px',
   })
-  const updateSelectedBarStyle = (el: HTMLElement) => {
+
+  let nav: HTMLDivElement | undefined
+  const updateSelectedBarStyle = () => {
+    if (!nav) return
+
+    const el = nav.querySelector<HTMLElement>(':scope > .selected')
+    if (!el) return
+
     setSelectedBarStyle({
       left: `${el.offsetLeft}px`,
       width: `${el.clientWidth}px`,
     })
   }
-
-  let navWrap: HTMLDivElement
   onMount(() => {
-    updateSelectedBarStyle(navWrap.children[0] as HTMLElement)
+    if (!nav) return
+
+    updateSelectedBarStyle()
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateSelectedBarStyle()
+    })
+
+    resizeObserver.observe(nav)
+    onCleanup(() => {
+      resizeObserver.disconnect()
+    })
   })
 
   return (
-    <div class={cs(props.class, 'ant-grid ant-[grid-template-rows:auto_1fr]')}>
-      <div
-        ref={navWrap!}
-        class={cs(
-          'ant-flex ant-gap-32px ant-[border-bottom:solid_1px_rgba(5,5,5,0.1)] ant-relative',
-          props.navWrapClass,
-        )}
-      >
-        <For each={props.items}>
-          {item => (
-            <div
-              class={cs(
-                'ant-py-12px ant-cursor-pointer',
-                props.navItemClass,
-                isSelectedItem(item.key) && 'ant-text-[var(--primary-color)]',
+    <div class={props.class}>
+      <Switch>
+        <Match when={props.type === 'line'}>
+          <div
+            ref={nav!}
+            class={cs(
+              'ant-mb-16px ant-flex ant-gap-32px ant-[border-bottom:solid_1px_rgba(5,5,5,0.1)] ant-relative',
+              props.navClass,
+            )}
+          >
+            <For each={props.items}>
+              {item => (
+                <div
+                  class={cs(
+                    'ant-py-12px ant-cursor-pointer',
+                    props.navItemClass,
+                    isSelectedItem(item.key) && 'ant-text-[var(--primary-color)] selected',
+                  )}
+                  onClick={() => {
+                    setSelectedItem(item)
+                    updateSelectedBarStyle()
+                  }}
+                >
+                  {unwrapStringOrJSXElement(item.label)}
+                </div>
               )}
-              onClick={e => {
-                setSelectedItem(item)
-                updateSelectedBarStyle(e.currentTarget)
-              }}
-            >
-              {item.label}
-            </div>
-          )}
-        </For>
+            </For>
 
-        <div
-          role={'selected-bar' as any}
-          class="ant-absolute ant-bottom-0 ant-bg-[var(--primary-color)] ant-h-2px ant-transition-left"
-          style={selectedBarStyle()}
-        />
-      </div>
+            <div
+              role={'selected-bar' as any}
+              class="ant-absolute ant-bottom-0 ant-bg-[var(--primary-color)] ant-h-2px ant-transition-left"
+              style={selectedBarStyle()}
+            />
+          </div>
+        </Match>
+        <Match when={props.type === 'segment'}>
+          <Segmented
+            block
+            options={props.items.map(item => ({
+              label: item.label,
+              value: item.key,
+              onClick: () => setSelectedItem(item),
+            }))}
+          />
+        </Match>
+      </Switch>
 
-      <Show when={!isNil(selectedItem()?.children)}>
-        <div class="ant-px-12px ant-py-16px ant-overflow-auto">{selectedItem()?.children}</div>
-      </Show>
+      <div class={props.contentClass}>{unwrapStringOrJSXElement(selectedItem()?.children)}</div>
     </div>
   )
 }

package/src/Tooltip.tsx

@@ -2,17 +2,20 @@ import { compact } from 'lodash-es'
 import {
   type Component,
   type JSXElement,
+  type JSX,
   children,
   createEffect,
   Show,
   mergeProps,
   onCleanup,
   createMemo,
+  createSignal,
 } from 'solid-js'
 import { Portal } from 'solid-js/web'
 import cs from 'classnames'
 import createControllableValue from './hooks/createControllableValue'
 import { useClickAway } from './hooks'
+import { toArray } from './utils/array'
 
 type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu'
 type TooltipPlacement =
@@ -33,11 +36,12 @@ export interface TooltipProps {
   /**
    * 默认: hover
    */
-  trigger?: ActionType
+  trigger?: ActionType | ActionType[]
   /**
    * 默认: top
    */
   placement?: TooltipPlacement
+  contentStyle?: JSX.CSSProperties
   content?: JSXElement | ((close: () => void) => JSXElement)
   children?: JSXElement
   open?: boolean
@@ -70,13 +74,12 @@ const Tooltip: Component<TooltipProps> = _props => {
       placement: 'top',
       mode: 'dark',
       arrow: true,
-    } as TooltipProps,
+    },
     _props,
   )
 
   const resolvedChildren = children(() => _props.children)
-  let contentWrap: HTMLDivElement
-  let arrow: HTMLDivElement
+  let content: HTMLDivElement
   const [open, setOpen] = createControllableValue(_props, {
     defaultValue: false,
     valuePropName: 'open',
@@ -86,117 +89,260 @@ const Tooltip: Component<TooltipProps> = _props => {
 
   createEffect(() => {
     const _children = resolvedChildren() as Element
-    switch (props.trigger) {
-      case 'hover':
-        _children.addEventListener('mouseenter', reverseOpen)
-        onCleanup(() => {
-          _children.removeEventListener('mouseenter', reverseOpen)
-        })
-
-        _children.addEventListener('mouseleave', reverseOpen)
-        onCleanup(() => {
-          _children.removeEventListener('mouseleave', reverseOpen)
-        })
-        break
-      case 'click':
-        _children.addEventListener('click', reverseOpen)
-        onCleanup(() => {
-          _children.removeEventListener('click', reverseOpen)
-        })
+    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([contentWrap, _children]),
-        )
-        break
-    }
+          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() as Element
-      const childrenRect = _children.getBoundingClientRect()
-      const pointAtCenter = typeof props.arrow === 'object' ? props.arrow.pointAtCenter : false
-      const arrowOffset = 8
-
-      switch (props.placement) {
-        case 'top':
-          contentWrap.style.top = `${childrenRect.top}px`
-          contentWrap.style.left = `${childrenRect.left + childrenRect.width / 2}px`
-          contentWrap.style.transform = 'translate(-50%, -100%)'
-          break
-        case 'topRight':
-          contentWrap.style.top = `${childrenRect.top}px`
-          contentWrap.style.left = `${childrenRect.right}px`
-          contentWrap.style.transform = 'translate(-100%, -100%)'
-          if (arrow) arrow.style.right = `${arrowOffset}px`
-          break
-        case 'bottom':
-          contentWrap.style.top = `${childrenRect.top + childrenRect.height}px`
-          contentWrap.style.left = `${childrenRect.left + childrenRect.width / 2}px`
-          contentWrap.style.transform = 'translate(-50%, 0)'
-          break
-        case 'bottomLeft':
-          contentWrap.style.top = `${childrenRect.top + childrenRect.height}px`
-          contentWrap.style.left = `${childrenRect.left}px`
-          if (arrow) arrow.style.left = `${arrowOffset}px`
-          break
-        case 'bottomRight':
-          contentWrap.style.top = `${childrenRect.top + childrenRect.height}px`
-          contentWrap.style.left = `${childrenRect.right + (pointAtCenter ? arrowOffset : 0)}px`
-          contentWrap.style.transform = 'translate(-100%, 0)'
-          if (arrow) arrow.style.right = `${arrowOffset}px`
-          break
-      }
+      setChildrenRect(_children.getBoundingClientRect())
     }
   })
 
-  const direction = createMemo(() => {
-    if (props.placement?.startsWith('top')) return 'top'
-    if (props.placement?.startsWith('bottom')) return 'bottom'
-    if (props.placement?.startsWith('left')) return 'left'
-    if (props.placement?.startsWith('right')) return 'right'
+  const firstDirection = createMemo(() => {
+    if (props.placement.startsWith('bottom')) return 'bottom'
+    if (props.placement.startsWith('left')) return 'left'
+    if (props.placement.startsWith('right')) return 'right'
+    return 'top'
+  })
+
+  const secondDirection = createMemo(() => {
+    if (props.placement.endsWith('Left')) return 'left'
+    if (props.placement.endsWith('Right')) return 'right'
+    if (props.placement.endsWith('Top')) return 'top'
+    if (props.placement.endsWith('Bottom')) return 'bottom'
+    return 'center'
+  })
+
+  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%)',
+        } as JSX.CSSProperties
+      case 'topLeft':
+        return {
+          top: `${childrenRect().top - arrowOffset()}px`,
+          left: `${childrenRect().left}px`,
+          transform: 'translate(0, -100%)',
+        } as JSX.CSSProperties
+      case 'topRight':
+        return {
+          top: `${childrenRect().top - arrowOffset()}px`,
+          left: `${childrenRect().right}px`,
+          transform: 'translate(-100%, -100%)',
+        } as JSX.CSSProperties
+      case 'bottom':
+        return {
+          top: `${childrenRect().bottom + arrowOffset()}px`,
+          left: `${childrenRect().left + childrenRect().width / 2}px`,
+          transform: 'translate(-50%, 0)',
+        } as JSX.CSSProperties
+      case 'bottomLeft':
+        return {
+          top: `${childrenRect().bottom + arrowOffset()}px`,
+          left: `${childrenRect().left}px`,
+        } as JSX.CSSProperties
+      case 'bottomRight':
+        return {
+          top: `${childrenRect().bottom + arrowOffset()}px`,
+          left: `${childrenRect().right}px`,
+          transform: 'translate(-100%, 0)',
+        } as JSX.CSSProperties
+      case 'left':
+        return {
+          top: `${childrenRect().top + childrenRect().height / 2}px`,
+          left: `${childrenRect().left - arrowOffset()}px`,
+          transform: 'translate(-100%, -50%)',
+        } as JSX.CSSProperties
+      case 'leftTop':
+        return {
+          top: `${childrenRect().top}px`,
+          left: `${childrenRect().left - arrowOffset()}px`,
+          transform: 'translate(-100%)',
+        } as JSX.CSSProperties
+      case 'leftBottom':
+        return {
+          top: `${childrenRect().bottom}px`,
+          left: `${childrenRect().left - arrowOffset()}px`,
+          transform: 'translate(-100%, -100%)',
+        } as JSX.CSSProperties
+      case 'right':
+        return {
+          top: `${childrenRect().top + childrenRect().height / 2}px`,
+          left: `${childrenRect().right + arrowOffset()}px`,
+          transform: 'translate(0, -50%)',
+        } as JSX.CSSProperties
+      case 'rightTop':
+        return {
+          top: `${childrenRect().top}px`,
+          left: `${childrenRect().right + arrowOffset()}px`,
+        } as JSX.CSSProperties
+      case 'rightBottom':
+        return {
+          top: `${childrenRect().bottom}px`,
+          left: `${childrenRect().right + arrowOffset()}px`,
+          transform: 'translate(0, -100%)',
+        } as JSX.CSSProperties
+    }
+  })
+  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%)',
+        } as JSX.CSSProperties
+      case 'topLeft':
+        return {
+          'border-top-color': 'var(--color)',
+          top: '100%',
+          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
+          left: '8px',
+        } as JSX.CSSProperties
+      case 'topRight':
+        return {
+          'border-top-color': 'var(--color)',
+          top: '100%',
+          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
+          right: '8px',
+        } as JSX.CSSProperties
+      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%)',
+        } as JSX.CSSProperties
+      case 'bottomLeft':
+        return {
+          'border-bottom-color': 'var(--color)',
+          bottom: '100%',
+          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
+          left: '8px',
+        } as JSX.CSSProperties
+      case 'bottomRight':
+        return {
+          'border-bottom-color': 'var(--color)',
+          bottom: '100%',
+          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
+          right: '8px',
+        } as JSX.CSSProperties
+      case 'left':
+        return {
+          'border-left-color': 'var(--color)',
+          top: '50%',
+          right: 0,
+          transform: 'translate(100%, -50%)',
+        } as JSX.CSSProperties
+      case 'leftTop':
+        return {
+          'border-left-color': 'var(--color)',
+          top: '8px',
+          right: 0,
+          transform: 'translate(100%, 0)',
+        } as JSX.CSSProperties
+      case 'leftBottom':
+        return {
+          'border-left-color': 'var(--color)',
+          bottom: '8px',
+          right: 0,
+          transform: 'translate(100%, 0)',
+        } as JSX.CSSProperties
+      case 'right':
+        return {
+          'border-right-color': 'var(--color)',
+          top: '50%',
+          left: 0,
+          transform: 'translate(-100%, -50%)',
+        } as JSX.CSSProperties
+      case 'rightTop':
+        return {
+          'border-right-color': 'var(--color)',
+          top: '8px',
+          left: 0,
+          transform: 'translate(-100%, 0)',
+        } as JSX.CSSProperties
+      case 'rightBottom':
+        return {
+          'border-right-color': 'var(--color)',
+          bottom: '8px',
+          left: 0,
+          transform: 'translate(-100%, 0)',
+        } as JSX.CSSProperties
+    }
   })
 
   return (
     <>
-      {resolvedChildren}
+      {resolvedChildren()}
 
       <Show when={open()}>
         <Portal>
           {/* Portal 存在缺陷，onClick 依然会沿着 solid 的组件树向上传播，因此需要 stopPropagation */}
           <div
-            ref={contentWrap!}
+            ref={content!}
             class={cs(
-              'ant-z-1000 ant-fixed after:ant-content-empty',
-              props.arrow ? '[--padding:8px]' : '[--padding:4px]',
-              direction() === 'top' && 'ant-pb-[var(--padding)]',
-              direction() === 'bottom' && 'ant-pt-[var(--padding)]',
+              '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',
             )}
+            style={{
+              ...contentPositionStyle(),
+              ...props.contentStyle,
+            }}
             onClick={e => {
               e.stopPropagation()
             }}
           >
-            <div
-              class={cs(
-                'ant-p-12px ant-rounded-8px 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',
-              )}
-            >
-              <Content content={props.content} close={() => setOpen(false)} />
-            </div>
+            <Content content={props.content} close={() => setOpen(false)} />
+
             <Show when={props.arrow}>
               <div
-                ref={arrow!}
                 class={cs(
-                  'ant-w-8px ant-h-8px ant-rotate-45 ant-absolute',
-                  props.mode === 'dark' ? 'ant-bg-[rgba(0,0,0,0.85)]' : 'ant-bg-white',
-                  direction() === 'top' &&
-                    'ant-bottom-0 -ant-translate-x-1/2 -ant-translate-y-1/2 ant-[filter:drop-shadow(3px_2px_2px_rgba(0,0,0,0.08))]',
-                  direction() === 'bottom' &&
-                    'ant-top-0 -ant-translate-x-1/2 ant-translate-y-1/2 ant-[filter:drop-shadow(-3px_-2px_2px_rgba(0,0,0,0.08))]',
-                  (props.placement === 'top' || props.placement === 'bottom') && 'left-1/2',
+                  'ant-w-8px ant-h-8px ant-absolute ant-border-solid ant-border-4px ant-border-transparent',
                 )}
+                style={{
+                  '--color': props.mode === 'dark' ? 'rgba(0,0,0,0.85)' : 'white',
+                  ...arrowStyle(),
+                }}
               />
             </Show>
           </div>

package/src/Tree.tsx

@@ -166,7 +166,7 @@ function SingleLevelTree<T extends {} = {}>(props: SingleLevelTreeProps<T>) {
               </div>
               <div
                 class={cs(
-                  'ant-h-full ant-leading-24px ant-hover:bg-[rgba(0,0,0,.04)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative',
+                  'ant-h-full ant-leading-24px hover:ant-bg-[var(--hover-bg-color)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative',
                   props.blockNode && 'w-full',
                   selectedNodes()?.includes(item()) && '!ant-bg-[var(--active-bg-color)]',
                   isTarget(item()) &&
@@ -215,14 +215,14 @@ function Tree<T extends {} = {}>(props: TreeProps<T>) {
     <TreeContext.Provider
       value={{
         selectedNodes,
-        setSelectedNodes,
+        setSelectedNodes: setSelectedNodes as unknown as Setter<Array<{}>>,
         draggableNode,
-        setDraggableNode,
+        setDraggableNode: setDraggableNode as unknown as Setter<{} | null>,
         draggableIndexes,
         setDraggableIndexes,
         isDraggable,
         targetNode,
-        setTargetNode,
+        setTargetNode: setTargetNode as unknown as Setter<{} | null>,
         targetIndexes,
         setTargetIndexes,
         isTarget,