intable 0.0.6 → 0.0.7

package/packages/intable/src/hooks/useDir.ts

@@ -0,0 +1,78 @@
+import { createEffect, mergeProps } from 'solid-js'
+import { createEventListener } from '@solid-primitives/event-listener'
+import { createPointerList } from '@solid-primitives/pointer'
+import { access, type MaybeAccessor } from '@solid-primitives/utils'
+import { createMutationObserver } from '@solid-primitives/mutation-observer'
+
+interface UseDirOptions {
+  ref: MaybeAccessor<HTMLElement | undefined>,
+  list?: MaybeAccessor<HTMLElement | undefined>,
+  loop?: boolean
+  options?: EventListenerOptions
+  defaultFirst?: boolean
+}
+
+export function useDir(options: UseDirOptions) {
+  options = mergeProps({ loop: true }, options)
+  const list = () => access(options.list) ?? access(options.ref)
+  const ref = () => access(options.ref) ?? access(options.list)
+
+  createEffect(() => {
+    if (ref().tabIndex > -1) return
+    ref().tabIndex = 0
+  })
+
+  createEventListener(ref, 'keydown', e => {
+    if (!['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key)) return
+
+    e.stopPropagation()
+    e.preventDefault()
+
+    let hover = list()?.querySelector('.hover')
+    
+    if (e.key == 'Enter') {
+      hover?.click()
+      return
+    }
+
+    let index = (
+      e.key == 'ArrowDown' ? hover ? +hover?.getAttribute('data-index')! + 1 : 0 :
+      e.key == 'ArrowUp' ? hover ? +hover?.getAttribute('data-index')! - 1 : -1 :
+      0
+    )
+
+    const el = list()?.querySelector(`[data-index='${index}']`)
+    if (!el) {
+      if (options.loop) {
+        hover?.classList.remove('hover')
+        index >= 0
+          ? list()?.querySelector(`[data-index='0']`)?.classList.add('hover')
+          : [...list()?.querySelectorAll(`[data-index]`)].at(-1)?.classList.add('hover')
+      }
+    } else {
+      // list()?.querySelector(`[data-index=0]`)!
+      hover?.classList.remove('hover')
+      el.classList.add('hover')
+    }
+  }, options.options)
+
+  createEffect(() => {
+    if (!options.defaultFirst) return
+    const el = list()
+    if (!el) return
+    const hover = () => {
+      if (el.querySelector('.hover')) return
+      el.querySelector(`[data-index]`)?.classList.add('hover')
+    }
+    createMutationObserver(el, { childList: true }, hover)
+    hover()
+  })
+
+  createEventListener(list, 'mouseover', () => {
+    list()?.querySelector('.hover')?.classList.remove('hover')
+  })
+}
+
+export function VDir(el: HTMLElement, options) {
+  useDir({ ...options(), list: el })
+}

package/packages/intable/src/hooks/useSelector.ts

@@ -0,0 +1,91 @@
+import { createSignal, createMemo, createSelector } from 'solid-js'
+import { log, toArr } from '../utils'
+
+interface UseSelectorOpt<T> {
+  value?: T
+  onChange?: (v: T) => void
+  multiple?: boolean
+  selectable?: (v) => boolean
+}
+
+class SingleSet implements Set<any> {
+  #value: any
+  constructor(value) { this.#value = Array.from(value || [])[0] }
+  add(value) { this.#value = value; return this }
+  clear() { this.#value = undefined }
+  delete(value) { if (this.#value === value) { this.#value = undefined; return true } return false }
+  forEach(callbackfn) { if (this.#value !== undefined) callbackfn.call(this, this.#value, this.#value, this) }
+  has(value) { return this.#value === value }
+  get size() { return this.#value !== undefined ? 1 : 0 }
+  entries() { return this.values() }
+  keys() { return this.values() }
+  values() { return this.#value !== undefined ? [[this.#value, this.#value]].entries() : [].entries() }
+  [Symbol.iterator]() { return this.values()[Symbol.iterator]() }
+  [Symbol.toStringTag] = 'SingleSet'
+}
+
+export function useSelector<T = any>(opt: UseSelectorOpt<T>) {
+  const { value: initialValue, onChange, multiple = false, selectable } = opt
+
+  const Set2 = (multiple ? Set : SingleSet) as SetConstructor
+  
+  const [selected, setSelected] = createSignal(new Set2(toArr(initialValue)))
+
+  // 检查是否包含某个值
+  const has = createSelector<Set<any>, any>(selected, (a, b) => b.has(a as T))
+
+  // 检查值是否可选择
+  const isSelectable = (v: T): boolean => {
+    return selectable ? selectable(v) : true
+  }
+
+  // 清空选择
+  const clear = () => {
+    setSelected(new Set2())
+    onChange?.(value())
+  }
+
+  // 设置选择
+  const set = (v: T) => {
+    if (!isSelectable(v)) return
+    setSelected(new Set2(toArr(v)))
+    onChange?.(value())
+  }
+
+  // 添加选择
+  const add = (v: T) => {
+    if (!isSelectable(v)) return
+    const newSet = new Set2(selected())
+    newSet.add(v)
+    setSelected(newSet)
+    onChange?.(value())
+  }
+
+  // 删除选择
+  const del = (v: T) => {
+    const newSet = new Set2(selected())
+    newSet.delete(v)
+    setSelected(newSet)
+    onChange?.(value())
+  }
+
+  // 切换选择状态
+  const toggle = (v: T) => {
+    has(v) ? del(v) : add(v)
+  }
+
+  // 使用 createMemo 优化 selected 的计算
+  const value = createMemo(() => {
+    return (multiple ? Array.from(selected()) : Array.from(selected())[0]) as T
+  })
+
+  return {
+    clear,
+    set,
+    has,
+    add,
+    del,
+    toggle,
+    get value() { return value() }
+  }
+}

package/packages/intable/src/hooks/useSort.tsx

@@ -0,0 +1,118 @@
+import { createMutable, reconcile } from 'solid-js/store'
+import { mergeProps, Portal } from 'solid-js/web'
+
+import { createEventListener, createEventListenerMap } from '@solid-primitives/event-listener'
+import { access, type MaybeAccessor } from '@solid-primitives/utils'
+import { findAsync, log } from '../utils'
+
+type Awaitable<T> = T | Promise<T>;
+
+interface UseSortOption {
+  enable?: boolean
+  guideLine: any
+  draggable: (el: HTMLElement) => Awaitable<boolean>
+  dragover: (el: HTMLElement) => boolean
+  children: (el: HTMLElement) => HTMLElement[]
+  dragend: () => void
+}
+
+export const useSort = (el: MaybeAccessor<HTMLElement | undefined>, opt: UseSortOption) => {
+  opt = mergeProps({ enable: true } as UseSortOption, opt)
+  let count = 0
+
+  createEventListenerMap(() => opt.enable ? access(el) : void 0, {
+    async pointerdown(e) {
+      const _c = count
+      const drag = await findAsync(e.composedPath(), e => e instanceof HTMLElement && opt.draggable(e))
+      if (_c != count) return
+      if (!drag) return
+      e.stopPropagation()
+      state.drag = drag
+      state.drag?.setAttribute('draggable', 'true')
+    },
+    pointerup() {
+      count++
+      dragend()
+    },
+    pointermove() {
+      count++
+    },
+    dragstart(e) {
+      e.dataTransfer!.setDragImage(document.createElement('img'), 0, 0)
+    },
+    dragover(e) {
+      if (!state.drag) return
+      const aa = e.composedPath().filter(e => e instanceof HTMLElement)
+      const over = state.over = aa.find(e => opt.dragover(e)) ?? state.over
+      if (!over) return
+      e.preventDefault()
+      e.stopPropagation()
+      // 
+      const children = opt.children(over) as HTMLElement[]
+      if (children) {
+        let i = 0, d = Infinity, s = ''
+        children.forEach((el, ii) => {
+          const display = getComputedStyle(el).display
+          const __ = ['table-cell', 'inline'].some(e => display.includes(e))
+          const rect = el.getBoundingClientRect()
+          if (__) {
+            let dd = Math.sqrt((e.clientX - rect.x) ** 2 + (e.clientY - rect.y + rect.height / 2) ** 2)
+            if (dd < d) (i = ii, d = dd, s = 'l')
+            dd = Math.sqrt((e.clientX - rect.right) ** 2 + (e.clientY - rect.y + rect.height / 2) ** 2)
+            if (dd < d) (i = ii, d = dd, s = 'r')
+          } else {
+            let dd = Math.sqrt((e.clientY - rect.y) ** 2 + (e.clientX - rect.x + rect.width / 2) ** 2)
+            if (dd < d) (i = ii, d = dd, s = 't')
+            dd = Math.sqrt((e.clientY - rect.bottom) ** 2 + (e.clientX - rect.x + rect.width / 2) ** 2)
+            if (dd < d) (i = ii, d = dd, s = 'b')
+          }
+        })
+  
+        const rect1 = children[i].getBoundingClientRect()
+        const x = s == 'l' || s == 'r', y = s == 't' || s == 'b'
+        const size = 3
+        state.style = {
+          width: `${y ? rect1.width : size}px`,
+          height: `${y ? size : rect1.height}px`,
+          translate: `${y ? rect1.x : (s == 'l' ? rect1.x : rect1.right) - size / 2}px ${x ? rect1.y : (s == 't' ? rect1.y : rect1.bottom) - size / 2}px`
+        }
+        state.rel = children[i]
+        state.type = s == 'l' || s == 't' ? 'before' : 'after'
+      } else {
+        const rect1 = over.getBoundingClientRect()
+        state.style = {
+          width: rect1.width,
+          height: rect1.height,
+          translate: `${rect1.x}px ${rect1.y}px`
+        }
+        state.rel = over
+        state.type = 'inner'
+      }
+    },
+    dragend() {
+      dragend()
+    },
+  })
+
+  function dragend() {
+    state.drag?.removeAttribute('draggable')
+    if (state.drag && state.rel) opt.dragend?.()
+    reconcile({})(state)
+  }
+
+  const state = createMutable({
+    style: void 0 as any,
+    drag: void 0 as any,
+    over: void 0 as any,
+    rel: void 0 as any,
+    type: ''
+  })
+
+  ;(<>{state.style && 
+    <Portal mount={access(el)}>
+      <div {...opt.guideLine} style={state.style} />
+    </Portal>
+  }</>)
+
+  return state
+}

package/packages/intable/src/hooks/useVirtualizer.ts

@@ -0,0 +1,180 @@
+import { createElementSize } from '@solid-primitives/resize-observer'
+import { createScrollPosition } from '@solid-primitives/scroll'
+import { keyBy, uniqBy } from 'es-toolkit'
+import { createComputed, createMemo, createSignal, mergeProps, untrack } from 'solid-js'
+
+/**
+ * Fenwick Tree (Binary Indexed Tree)
+ * O(log n) point-update and prefix-sum query.
+ * Used to compute virtual item positions without rebuilding the full items array.
+ */
+class FenwickTree {
+  n: number
+  tree: Float64Array
+  constructor(n: number) {
+    this.n = n
+    this.tree = new Float64Array(n + 1)
+  }
+  /** O(log n) add delta to index i (0-based) */
+  add(i: number, delta: number) {
+    for (i += 1; i <= this.n; i += i & -i) this.tree[i] += delta
+  }
+  /** O(log n) prefix sum [0..i] inclusive (0-based) */
+  sum(i: number): number {
+    let s = 0
+    for (i += 1; i > 0; i -= i & -i) s += this.tree[i]
+    return s
+  }
+  /** Total sum of all elements */
+  total(): number {
+    return this.n > 0 ? this.sum(this.n - 1) : 0
+  }
+  /**
+   * O(log n) find the 0-based index of the element "containing" offset.
+   * Returns smallest i where prefix_sum(0..i) > target.
+   */
+  findByOffset(target: number): number {
+    let i = 0
+    for (let pw = 1 << Math.floor(Math.log2(this.n || 1)); pw > 0; pw >>= 1) {
+      if (i + pw <= this.n && this.tree[i + pw] <= target) {
+        i += pw
+        target -= this.tree[i]
+      }
+    }
+    return Math.min(i, this.n - 1)
+  }
+  /** O(n) build from a sizes array (more efficient than n individual adds) */
+  static build(values: number[]): FenwickTree {
+    const n = values.length
+    const ft = new FenwickTree(n)
+    for (let i = 0; i < n; i++) {
+      ft.tree[i + 1] += values[i]
+      const j = i + 1 + ((i + 1) & -(i + 1))
+      if (j <= n) ft.tree[j] += ft.tree[i + 1]
+    }
+    return ft
+  }
+}
+
+interface VirtualizerOptions {
+  enable?: boolean
+  overscan?: number
+  batch?: number
+  getScrollElement: () => Element
+  horizontal?: boolean
+  count: number
+  estimateSize: (i: number) => number
+  extras?: (startIdx: number, endIdx: number) => number[]
+  indexAttribute?: string
+  rangeExtractor?: (range: any) => number[]
+}
+
+export function useVirtualizer(opt: VirtualizerOptions) {
+  opt = mergeProps({ overscan: 0, batch: 0, enable: true }, opt)
+  const scrollSize = createElementSize(opt.getScrollElement)
+  const pos = createScrollPosition(opt.getScrollElement)
+  const scrollPos = createMemo(() => opt.horizontal ? pos.x : pos.y)
+  const viewSize = createMemo(() => opt.horizontal ? scrollSize.width : scrollSize.height)
+
+  // Plain (non-reactive) sizes array + Fenwick tree.
+  // Avoids O(n) full-rebuild on every resizeItem call.
+  const sizes: number[] = []
+  let tree = new FenwickTree(0)
+
+  // Version signal: bumped by resizeItem; triggers start/end/items recompute.
+  const [v, bumpV] = createSignal(undefined, { equals: false })
+
+  // Grow when count increases; shrink when it decreases.
+  createComputed(() => {
+    const { count } = opt
+    untrack(() => {
+      if (count === sizes.length) return
+      if (count > sizes.length) {
+        for (let i = sizes.length; i < count; i++) sizes.push(opt.estimateSize(i))
+      } else {
+        sizes.length = count
+      }
+      // O(n) rebuild of Fenwick tree preserving measured sizes
+      tree = FenwickTree.build(sizes.slice(0, count))
+      bumpV()
+    })
+  })
+
+  type Item = { start: number; end: number; index: number }
+  /** Compute item geometry directly from Fenwick tree — no array needed. */
+  const getItem = (i: number): Item => ({
+    index: i,
+    start: i > 0 ? tree.sum(i - 1) : 0,
+    end: tree.sum(i),
+  })
+
+  const startIdx = createMemo((prev: number) => {
+    v()
+    const { batch: batchSize, overscan = 0 } = opt
+    let i = tree.findByOffset(scrollPos()) - overscan
+    if (batchSize) {
+      if (i > prev) i = i <= prev + batchSize ? prev : (i > prev + batchSize * 2 ? i : prev + batchSize)
+        else i -= batchSize
+    }
+    return Math.max(i, 0)
+  }, 0)
+
+  const endIdx = createMemo((prev: number) => {
+    v()
+    const { batch: batchSize, overscan = 0 } = opt
+    let i = tree.findByOffset(scrollPos() + viewSize()) + overscan
+    if (batchSize) {
+      if (i < prev) i = i >= prev - batchSize ? prev : (i < prev - batchSize * 2 ? i : prev - batchSize)
+      else i += batchSize
+    }
+    return Math.min(i, opt.count - 1)
+  }, 0)
+
+  const items2 = createMemo(() => {
+    v()
+    if (!opt.enable) {
+      return Array.from({ length: opt.count }, (_, i) => getItem(i))
+    }
+    let arr: Item[] = []
+    for (let i = startIdx(); i <= endIdx(); i++) arr.push(getItem(i))
+    if (opt.extras) {
+      arr.push(...(opt.extras(startIdx(), endIdx())?.map(i => getItem(i)) || []))
+      arr = uniqBy(arr, e => e.index).sort((a, b) => a.index - b.index)
+    }
+    return arr
+  })
+
+  return {
+    options: opt,
+    startIdx,
+    endIdx,
+    getTotalSize: () => (v(), tree.total()),
+    resizeItem: (i: number, newSize: number) => {
+      const old = sizes[i] ?? 0
+      if (old === newSize) return
+      // Scroll-position correction to prevent jitter when items above viewport resize
+      if (i < startIdx()) {
+        const el = opt.getScrollElement()
+        const scroll = opt.horizontal ? el.scrollLeft : el.scrollTop
+        if (scroll !== 0) {
+          opt.horizontal
+            ? (el.scrollLeft += newSize - old)
+            : (el.scrollTop += newSize - old)
+        }
+      }
+      tree.add(i, newSize - old)
+      sizes[i] = newSize
+      bumpV()
+    },
+    getVirtualItems: items2,
+    getVirtualItem: (() => {
+      const keyed = createMemo(() => {
+        v()
+        const map: Record<number, Item> = {}
+        for (const item of items2()) map[item.index] = item
+        return map
+      })
+      return (i: number) => keyed()[i]
+    })()
+  }
+}