intable 0.0.5 → 0.0.7

package/packages/intable/src/components/DocTree.tsx

@@ -0,0 +1,36 @@
+import type { Editor, NodeType } from '@tiptap/core'
+import { useMemoAsync } from '../hooks'
+import { createEffect, createMemo, createSignal, splitProps } from 'solid-js'
+import { delay } from 'es-toolkit'
+import { Tree } from './Tree'
+
+export function DocTree(_: { editor: Editor }) {
+  const [props, attrs] = splitProps(_, ['editor'])
+
+  const [count, setCount] = createSignal(0)
+  createEffect(() => props.editor.on('update', () => setCount(v => ++v)))
+
+  const json = useMemoAsync(() => (count(), delay(300).then(() => props.editor.getJSON())), {})
+
+  const headings = createMemo(() => {
+    return (function walker (node: NodeType, queue = [], queue2 = []) {
+      if (node.type === 'heading') {
+        let i = queue.length
+        while (i--) if (queue[i].level < node.attrs.level) break
+        const item = { label: node.content?.map(e => e.text).join(''), level: node.attrs.level }
+        queue.push(item)
+        if (i > -1) (queue[i].children ??= []).push(item)
+        else queue2.push(item)
+      } else {
+        node.content?.forEach(e => walker(e, queue, queue2))
+      }
+      return queue2
+    })(json())
+  })
+
+  return (
+    <div class="doc-tree" {...attrs}>
+      <Tree data={headings()} class='min-h-40 max-h-100 overflow-auto' />
+    </div>
+  )
+}

package/packages/intable/src/components/Menu.tsx

@@ -0,0 +1,109 @@
+import { children, createContext, createEffect, createMemo, createResource, createSignal, mergeProps, onMount, splitProps, useContext } from "solid-js"
+import { isEmpty } from 'es-toolkit/compat'
+import { createRender } from "./Render"
+import { autoUpdate, createFloating, offset } from "floating-ui-solid"
+import { combineProps } from '@solid-primitives/props'
+import { pointerHover } from "@solid-primitives/pointer"
+import { createMutable } from "solid-js/store"
+import { delay } from "es-toolkit"
+import { log, unFn } from "../utils"
+import { VDir } from "../hooks/useDir"
+import { Popover } from "./Popover"
+import { useSignle2 } from "../hooks"
+
+export function Menu(props) {
+  const MenuCtx = createContext({ deep: 0 })
+  
+  const _Li = _e => {
+    const ctx = useContext(MenuCtx)
+    const [e, attrs] = splitProps(_e, ['children', 'label', 'icon', 'isActive', 'cb', 'menu', 'popover'])
+
+    const x = createMemo(() => props.x && ctx.deep == 1)
+
+    let el!: HTMLDivElement
+    const [floating, setFloating] = createSignal<HTMLElement>()
+    const [hover, setHover] = useSignle2(false, { before: () => delay(100) })
+    pointerHover
+    
+    const style = createMemo(() => floating() ? createFloating({
+      strategy: 'fixed',
+      placement: x() ? 'bottom-start' : 'right-start',
+      ...e.menu,
+      elements: { reference: () => el, floating },
+      whileElementsMounted(ref, float, update) {
+        return autoUpdate(ref, float, update, { ancestorResize: true, elementResize: true, layoutShift: true, ancestorScroll: true })
+      }
+    }).floatingStyles : void 0)
+    
+    createEffect(() => {
+      floating() && Object.assign(floating()!.style, style()?.() ?? {})
+    })
+
+    const req = createMutable({ loading: false })
+
+    async function onClick() {
+      if (req.loading) return
+      const ret = e.cb?.()
+      if (ret instanceof Promise) {
+        try {
+          await ret
+          req.loading = true
+        } finally {
+          req.loading = false
+          props.onAction?.(e)
+        }
+      }
+      else {
+        props.onAction?.(e)
+      }
+    }
+
+    onMount(() => {
+      <Popover strategy='fixed' reference={el} portal={el} {..._e.popover} middleware={[offset({ mainAxis: 4 })]} />
+    })
+
+    const child = children(() => e.children)
+    return (
+      <div
+        ref={el}
+        use:pointerHover={setHover}
+        {...combineProps({ class: `li flex aic rd-2 ${x() ? 'my-1 p-1' : 'mx-1 pl-1 pr-4 py-1'} ${unFn(e.isActive) && 'active'}` }, attrs)}
+        on:click={onClick}
+      >
+        <div class={`flex aic ${x() ? '' : props.density == 'comfortable' ? 'ml-1 mr-2.5' : 'ml-.5 mr-1'} `}>
+          {req.loading ? <IMyLoading /> : e.icon}
+        </div>
+        {e.label}
+        {/* {hover() && child() && <_Menu ref={setFloating}>{child()}</_Menu>} */}
+        {hover() && e.children && <_Menu ref={setFloating} class='z-1'>{e.children}</_Menu>}
+      </div>
+    )
+  }
+
+  const Li = createRender({
+    is: _Li,
+    processProps: props => {
+      let i = 0
+      Array.isArray(props.children) && props.children.forEach((e) => !e.is && typeof e == 'object' && (e['data-index'] = i++))
+      return props
+    }
+  })
+
+  const _Menu = e => {
+    const parent = useContext(MenuCtx)
+    const ctx = createMutable({ deep: parent.deep + 1 })
+    return (
+      <MenuCtx.Provider value={ctx}>
+        <div
+          {...combineProps({ class: `${props.x && ctx.deep == 1 ? 'tt-menu-x flex' : 'tt-menu max-h-100'} overflow-auto` }, e)}
+          use:VDir={e.usedir}
+          on:click={e => e.stopPropagation()}
+        >
+          {(el => isEmpty(el) ? <div class='px-4 py-2 op40'>无内容</div> : el)(e.children)}
+        </div>
+      </MenuCtx.Provider>
+    )
+  }
+
+  return <Li {...combineProps({}, props)} is={_Menu} items={null} children={props.items} />
+}

package/packages/intable/src/components/Popover.tsx

@@ -0,0 +1,55 @@
+import { children, createEffect, createMemo, createSignal, type JSX, splitProps } from 'solid-js'
+import { Portal } from 'solid-js/web'
+import { autoUpdate, createFloating, type createFloatingProps, type ReferenceType } from 'floating-ui-solid'
+import type { AutoUpdateOptions } from '@floating-ui/dom'
+import { delay } from 'es-toolkit'
+import { useClicked, useHover, useMemoAsync } from '../hooks'
+
+export function Popover(attrs: FloatingProps) {
+  const [_, props] = splitProps(attrs, ['reference', 'floating'])
+  
+  const show = (attrs.trigger == 'click' ? useClicked : useHover)(() => [reference(), floating()].filter(e => e))
+  const show2 = useMemoAsync(() => (
+    attrs.trigger == 'click'
+      ? show()
+      : show() ? delay(100).then(() => true) : delay(200).then(() => false)
+  ))
+
+  const reference = children(() => attrs.reference as HTMLElement)
+  const floating = children(() => show2() ? attrs.floating as HTMLElement : void 0)
+
+  return <Floating {...props} reference={reference} floating={floating} />
+}
+
+type FloatingProps = {
+  reference: ReferenceType
+  floating?: JSX.Element | (() => JSX.Element)
+  portal?: HTMLElement
+  trigger?: 'click' | 'hover'
+} & createFloatingProps
+
+export function Floating(attrs: FloatingProps & { update?: Partial<AutoUpdateOptions> }) {
+  const [_, props] = splitProps(attrs, ['reference', 'floating'])
+  const reference = children(() => attrs.reference)
+  const floating = children(() => attrs.floating)
+
+  const style = createMemo(() => floating() ? createFloating({
+    whileElementsMounted(ref, float, update) {
+      return autoUpdate(ref, float, update, { ancestorResize: true, elementResize: true, layoutShift: true, ancestorScroll: true, ...attrs.update })
+    },
+    ...props,
+    elements: { reference, floating },
+  }).floatingStyles : void 0)
+
+  createEffect(() => {
+    // console.log(props.floating)
+    floating() && Object.assign(floating().style, style()?.() ?? {})
+  })
+
+  return (
+    <>
+      {reference()}
+      {props.portal && floating() ? <Portal mount={props.portal}>{floating()}</Portal> : floating()}
+    </>
+  )
+}

package/packages/intable/src/components/RecycleList.tsx

@@ -0,0 +1,99 @@
+import { createMemo, type JSX, onCleanup, For, getOwner, runWithOwner, children, Show, createRoot } from 'solid-js'
+import { createMutable } from 'solid-js/store'
+import { log } from '../utils'
+
+/**
+ * RecycleList — a keyed list component with DOM recycling.
+ *
+ * Works like SolidJS `<For>` (keyed by reference identity) but instead of
+ * destroying DOM when items leave the list, it hides and pools those DOM
+ * nodes. When new items enter, a pooled slot is reused by swapping the
+ * reactive signals, avoiding the cost of creating & hydrating fresh DOM.
+ *
+ * Each slot gets its own `createRoot` so that its inner reactive tree
+ * (memos, effects) is NOT owned by the reconciliation memo — preventing
+ * SolidJS from disposing child computations when the outer memo re-runs.
+ *
+ * Ideal for virtual-scroll scenarios where items constantly enter/leave
+ * the viewport but the DOM structure per item is identical.
+ *
+ * ```tsx
+ * <RecycleList each={visibleItems()}>
+ *   {(item, index) => <div>{item().name} at {index()}</div>}
+ * </RecycleList>
+ * ```
+ */
+export function RecycleList<T>(props: {
+  each: T[]
+  children: (item: () => T, index: () => number) => JSX.Element
+}): JSX.Element {
+  interface Val {
+    v: any
+    i: number
+    active: boolean
+    el?: any
+  }
+  
+  // Active slots keyed by identity reference
+  const active = new Map<T, Val>()
+  // Pool of inactive (hidden) slots ready for reuse
+  const pool: Val[] = []
+  const owner = getOwner()
+
+  function state<T extends Object>(initial: T): T {
+    return runWithOwner(owner, () => createMutable(initial))!
+  }
+
+  const list = createMemo(() => {
+    const items = props.each || []
+    const nextKeys = new Set(items)
+
+    // 1. Deactivate slots whose keys left the list → move to pool
+    for (const [key, val] of active) {
+      if (!nextKeys.has(key)) {
+        pool.push(val)
+        active.delete(key)
+        // val.v = null
+        // val.i = -1
+        val.active = false
+      }
+    }
+ 
+    // 2. For each item: reuse existing active slot, recycle from pool, or create new
+    const list = [] as Val[]
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i]
+      if (active.has(item)) {
+        const slot = active.get(item)!
+        slot.i = i
+        slot.v = item
+      } else if (pool.length > 0) {
+        const slot = pool.pop()!
+        slot.i = i
+        slot.v = item
+        slot.active = true
+        active.set(item, slot)
+      } else {
+        active.set(item, state({ v: item, i, active: true }))
+      }
+      list.push(active.get(item)!)
+    }
+
+    return list.concat(...pool)
+  })
+
+  onCleanup(() => {
+    active.clear()
+    pool.length = 0
+  })
+
+  return (
+    <For each={list()}>{(val) => {
+      return <>
+        {val.active && runWithOwner(owner, () => (
+          val.el ??= props.children(() => val.v, () => val.i)
+        ))}
+      </>
+    }}</For>
+  )
+}

package/packages/intable/src/components/Render.tsx

@@ -0,0 +1,26 @@
+import { splitProps } from "solid-js"
+import { Dynamic } from "solid-js/web"
+
+const unFn = (fn, ...arg) => typeof fn == 'function' ? fn(...arg) : fn
+
+export function createRender({ is, processProps = e => e } = {}) {
+  const Render = (props: any) => {
+    const [reserve, attrs] = splitProps(processProps?.(props), ['is', 'vIf', 'children'])
+    return (<>
+      { (!('vIf' in reserve) || !!unFn(reserve.vIf)) &&
+        <Dynamic component={reserve.is ?? is} {...attrs}>
+          {List(reserve.children)}
+        </Dynamic>
+      }
+    </>)
+  }
+
+  const List = children => (
+    Array.isArray(children) ? children.map(e => typeof e == 'object' ? Render(e) : e) :
+    children
+  )
+
+  return Render
+}
+
+export const Render = createRender({ is: 'div' })

package/packages/intable/src/components/Split.tsx

@@ -0,0 +1,56 @@
+import { unFn } from '../utils'
+import { createElementBounds } from '@solid-primitives/bounds'
+import { children, createComputed, createEffect, createMemo, For, Index, mapArray, mergeProps, onMount, splitProps, type JSXElement } from 'solid-js'
+import { Portal } from 'solid-js/web'
+
+type SplitProps = {
+  container?: Element
+  cells: () => Element[]
+  handle?: (i: number) => JSXElement
+  size?: number
+  dir?: 'x' | 'y'
+  leading?: boolean
+  trailing?: boolean
+}
+
+export const Split = (props: SplitProps & { children?: JSXElement }) => {
+  let el!: Element
+  const child = children(() => props.children)
+
+  onMount(() => {
+    useSplit({
+      ...props,
+      container: el,
+      cells: () => props.cells ? props.cells() : child()
+    })
+  })
+
+  return <div ref={el} class='relative' {...props}>{child()}</div>
+}
+
+export const useSplit = (props: SplitProps) => {
+  props = mergeProps({ dir: 'x', size: 4 }, props) as SplitProps
+
+  let el!: HTMLDivElement
+  // const bounds = createMemo(() => props.cells().map()
+  const bounds = mapArray(() => props.cells(), el => createElementBounds(el))
+  const rect = createElementBounds(() => el)
+  createEffect(() => el.style.position = 'absolute')
+
+  const style = (e, bool) => props.dir == 'x'
+    ? `transform: translate(${(bool ? e.left + e.width : e.left) - (props.size! / 2)}px, ${e.top}px); width: ${props.size}px; height: ${e.height}px;`
+    : `transform: translate(${e.left}px, ${(bool ? e.top + e.height : e.top) - (props.size! / 2)}px); width: ${e.width}px; height: ${props.size}px;`
+
+  const Handle = (e) => (
+    <div class='absolute z-1' style={style({ ...e.e, left: e.e.left - rect.left, top: e.e.top - rect.top }, e.bool)}>{props.handle?.(e.i)}</div>
+  )
+
+  ; //
+  <Portal ref={el} mount={props.container || document.body}>
+    <For each={bounds().slice(0, -1)}>
+      {(e, i) => <Handle e={unFn(e)} bool={1} i={unFn(i)} />}
+    </For>
+    {!!bounds().length && props.leading && <Handle e={bounds()[0]} i={-1} />}
+    {!!bounds().length && props.trailing && <Handle e={bounds()[bounds().length - 1]} bool={1} i={bounds().length - 1} />}
+  </Portal>
+}

package/packages/intable/src/components/Tree.tsx

@@ -0,0 +1,115 @@
+import { createEffect, createMemo, createSignal, For, Index, on, onCleanup, splitProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import { createLazyMemo } from '@solid-primitives/memo'
+import { combineProps } from '@solid-primitives/props'
+import { castArray } from 'es-toolkit/compat'
+
+function define(that, key) {
+  const signal = createSignal()
+  Object.defineProperty(that, key, {
+    get() { return signal[0]() },
+    set(v) { signal[1](v) }
+  })
+  return signal
+}
+
+function memo<T>(that, key, fn: () => T) {
+  const signal = createLazyMemo(fn)
+  Object.defineProperty(that, key, {
+    get() { return signal() },
+  })
+  return signal
+}
+
+export abstract class $Node {
+  data: any
+  constructor(data: any) {
+    this.data = data
+
+    createEffect(() => {
+      const children = this.children
+      children?.map(e => e.parent = this)
+      onCleanup(() => children?.map(e => e.parent = undefined))
+    })
+  }
+
+  // abstract get Node(data): $Node
+  // abstract get id(): any
+  get label() { return this.data.label }
+  abstract getChildren(): $Node[] | undefined
+  
+  declare children: $Node[] | undefined
+  $children = memo(this, 'children', () => this.getChildren())
+  
+  declare parent: $Node | undefined
+  $parent = define(this, 'parent')
+  
+  declare deep: number
+  $deep = memo(this, 'deep', () => this.parent ? this.parent.deep + 1 : 0)
+
+  declare index: number
+  $index = memo(this, 'index', () => this.parent?.children?.indexOf(this))
+
+  declare prev: $Node | undefined
+  $prev = memo(this, 'prev', () => this.parent?.children?.[this.index - 1])
+
+  declare next: $Node | undefined
+  $next = memo(this, 'next', () => this.parent?.children?.[this.index + 1])
+
+  declare root: $Node
+  $root = memo(this, 'root', () => this.parent ? this.parent.root : this)
+
+  declare path: $Node[]
+  $path = memo(this, 'path', () => {
+    const ret = [this] as $Node[]
+    let e: $Node = this
+    while (e.parent) ret.push(e = e.parent)
+    return ret.reverse()
+  })
+
+  get descendants(): $Node[] {
+    return this.children?.flatMap(e => [e, ...e.descendants]) || []
+  }
+
+  contains(node: $Node) {
+    return node.path.includes(this)
+  }
+
+  remove() {
+    // this.
+  }
+}
+
+export class $TreeItem extends $Node {
+  get is() { return this.data.is }
+  get props() { return this.data }
+  get id() { return this.data.id }
+  getChildren() { return this.data.children?.map(e => new $TreeItem(e)) }
+}
+
+export function Tree(_: { data: any; Node: { new (data: any): $TreeItem } }) {
+  const [props, attrs] = splitProps(_, ['data', 'Node'])
+
+  const Node = props.Node ?? $TreeItem
+
+  const root = createMemo(() => new (class extends Node {
+    getChildren() { return castArray(this.data || []).map(e  => new Node(e)) }
+  })(props.data))
+
+  const flated = createMemo(() => root().descendants as $TreeItem[])
+
+  return (
+    <div {...combineProps({ class: 'tt-menu' }, attrs)}>
+      <Index each={flated()}>
+        {(node, index) => (
+          <Dynamic
+            component={node().is ?? 'div'}
+            {...combineProps({ class: 'li py-1 px-4', style: `padding-left: ${(node().deep) * 16}px` }, node().props)}
+          >
+            {node().label}
+          </Dynamic>
+        )}
+      </Index>
+    </div>
+  )
+}

package/packages/intable/src/components/utils.tsx

@@ -0,0 +1,12 @@
+import type { JSX } from 'solid-js'
+
+export function solidComponent<T extends (...arg) => JSX.Element>(comp: T) {
+  comp.__solid = 1
+  return comp
+}
+
+export function renderComponent(Comp: any, props: any, renderer: any) {
+  if (!Comp) return null
+  if (!Comp.__solid) Comp = renderer(Comp)
+  return <Comp {...props} />
+}