@open-dy/vibecoding-sdk-taro 0.0.1-beta.5 → 0.0.1-beta.6

package/src/ui/resizable.tsx

@@ -0,0 +1,410 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+import Taro, { ENV_TYPE } from "@tarojs/taro"
+import { cn } from "../lib/utils"
+import { isH5 } from "../lib/platform"
+
+type Direction = "horizontal" | "vertical"
+
+type ResizablePanelGroupProps = ViewProps & {
+  /** @desc 兼容属性；当前实现不使用它控制布局，请使用 orientation 指定排列方向。 */
+  direction?: Direction
+  /** @desc 面板排列与拖拽方向，默认 horizontal；vertical 为上下排列。容器必须有可测量的有效宽高。 */
+  orientation?: Direction
+}
+
+type ResizablePanelProps = ViewProps & {
+  /** @desc 初始占比权重；可传数字或数字/百分号字符串。组会归一化为总和 100%；全部省略时均分，部分省略时未填项权重为 0。 */
+  defaultSize?: number | string
+  /** @desc 组组件内部注入的归一化占比；调用方不要直接设置，由拖拽状态维护。 */
+  __size?: number
+  /** @desc 组组件内部注入的方向标识；调用方不要直接设置。 */
+  __direction?: Direction
+}
+
+type ResizableHandleProps = ViewProps & {
+  /** @desc 是否显示可视握柄，默认 false；为 false 时仍保留分隔线和组注入的拖拽事件。 */
+  withHandle?: boolean
+  /** @desc 组组件内部注入的方向；决定分隔线/握柄布局，调用方不要直接设置。 */
+  __direction?: Direction
+}
+
+function getPoint(e: any) {
+  const touch = e?.touches?.[0] || e?.changedTouches?.[0]
+  return touch || e
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
+function parseDefaultSize(size?: number | string) {
+  if (typeof size === "number" && Number.isFinite(size)) return size
+  if (typeof size !== "string") return null
+
+  const normalized = size.trim()
+  if (!normalized) return null
+
+  const numeric = normalized.endsWith("%")
+    ? Number.parseFloat(normalized.slice(0, -1))
+    : Number.parseFloat(normalized)
+
+  return Number.isFinite(numeric) ? numeric : null
+}
+
+/**
+ * @desc 可调整尺寸的面板组。
+ * @param {Parameters<typeof ResizablePanelGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ResizablePanelGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup } from '@open-dy/vibecoding-sdk-taro/ui/resizable'
+ * <ResizablePanelGroup />
+ * ```
+ */
+const ResizablePanelGroup = ({
+  className,
+  children,
+  orientation,
+  ...props
+}: ResizablePanelGroupProps) => {
+  const resolvedDirection = orientation ?? "horizontal"
+  const idRef = React.useRef(`resizable-${Math.random().toString(36).slice(2, 11)}`)
+  const groupRef = React.useRef<any>(null)
+  const sizesRef = React.useRef<number[] | null>(null)
+  const [sizes, setSizes] = React.useState<number[] | null>(null)
+  const rectSizeRef = React.useRef<{ width: number; height: number } | null>(null)
+  const dragRef = React.useRef<{
+    axis: "x" | "y"
+    input: "mouse" | "touch"
+    leftIndex: number
+    startPos: number
+    startSizes: number[]
+    containerSize: number
+  } | null>(null)
+
+  React.useEffect(() => {
+    sizesRef.current = sizes
+  }, [sizes])
+
+  const isPanelElement = React.useCallback((child: any) => {
+    return child?.type?.displayName === "ResizablePanel"
+  }, [])
+
+  const isHandleElement = React.useCallback((child: any) => {
+    return child?.type?.displayName === "ResizableHandle"
+  }, [])
+
+  const panels = React.useMemo(() => {
+    const nextPanels: React.ReactElement[] = []
+    React.Children.forEach(children as any, (child) => {
+      if (!React.isValidElement(child)) return
+      if (isPanelElement(child)) nextPanels.push(child as any)
+    })
+    return nextPanels
+  }, [children, isPanelElement])
+
+  const measure = React.useCallback(() => {
+    const element = groupRef.current
+
+    if (isH5() && typeof element?.getBoundingClientRect === "function") {
+      const rect = element.getBoundingClientRect()
+      if (typeof rect?.width === "number" && typeof rect?.height === "number") {
+        rectSizeRef.current = { width: rect.width, height: rect.height }
+        return Promise.resolve(rectSizeRef.current)
+      }
+    }
+
+    return new Promise<{ width: number; height: number } | null>((resolve) => {
+      const query = Taro.createSelectorQuery()
+      query
+        .select(`#${idRef.current}`)
+        .boundingClientRect((res) => {
+          const rect = Array.isArray(res) ? res[0] : res
+          if (typeof rect?.width === "number" && typeof rect?.height === "number") {
+            rectSizeRef.current = { width: rect.width, height: rect.height }
+            resolve(rectSizeRef.current)
+            return
+          }
+          resolve(null)
+        })
+        .exec()
+    })
+  }, [])
+
+  React.useEffect(() => {
+    const defaults = panels.map((panel) => {
+      const size = (panel.props as ResizablePanelProps)?.defaultSize
+      return parseDefaultSize(size)
+    })
+    const hasAnyDefault = defaults.some((value) => value != null)
+    const nextSizes = hasAnyDefault
+      ? defaults.map((value) => (value == null ? 0 : value))
+      : panels.map(() => 100 / Math.max(1, panels.length))
+    const total = nextSizes.reduce((sum, value) => sum + value, 0) || 1
+    const normalized = nextSizes.map((value) => (value / total) * 100)
+
+    setSizes((prev) => {
+      if (prev && prev.length === normalized.length) return prev
+      return normalized
+    })
+  }, [panels])
+
+  React.useEffect(() => {
+    void measure()
+    if (!isH5() || typeof window === "undefined") return
+    const onResize = () => void measure()
+    window.addEventListener("resize", onResize)
+    return () => window.removeEventListener("resize", onResize)
+  }, [measure])
+
+  const applyMove = React.useCallback((e: any) => {
+    const drag = dragRef.current
+    const currentSizes = sizesRef.current
+    if (!drag || !currentSizes) return
+
+    const point = getPoint(e)
+    const position = drag.axis === "x" ? point?.pageX : point?.pageY
+    if (typeof position !== "number" || !drag.containerSize) return
+
+    const deltaPercent = ((position - drag.startPos) / drag.containerSize) * 100
+    const left = drag.leftIndex
+    const right = left + 1
+    const total = drag.startSizes[left] + drag.startSizes[right]
+    const minSize = 10
+    const nextLeft = clamp(drag.startSizes[left] + deltaPercent, minSize, total - minSize)
+    const nextSizes = drag.startSizes.slice()
+
+    nextSizes[left] = nextLeft
+    nextSizes[right] = total - nextLeft
+    setSizes(nextSizes)
+  }, [])
+
+  const endDrag = React.useCallback(() => {
+    dragRef.current = null
+    if (!isH5() || typeof document === "undefined") return
+
+    document.removeEventListener("mousemove", onDocumentMouseMove as any)
+    document.removeEventListener("mouseup", onDocumentMouseUp as any)
+    document.removeEventListener("touchmove", onDocumentTouchMove as any)
+    document.removeEventListener("touchend", onDocumentTouchEnd as any)
+    document.removeEventListener("touchcancel", onDocumentTouchEnd as any)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const onDocumentMouseMove = React.useCallback((e: any) => applyMove(e), [applyMove])
+  const onDocumentMouseUp = React.useCallback(() => endDrag(), [endDrag])
+  const onDocumentTouchMove = React.useCallback(
+    (e: any) => {
+      const drag = dragRef.current
+      if (!drag || drag.input !== "touch") return
+      e?.preventDefault?.()
+      applyMove(e)
+    },
+    [applyMove]
+  )
+  const onDocumentTouchEnd = React.useCallback(() => endDrag(), [endDrag])
+
+  React.useEffect(() => {
+    return () => endDrag()
+  }, [endDrag])
+
+  const startDrag = React.useCallback(
+    async (leftIndex: number, e: any) => {
+      const currentSizes = sizesRef.current
+      if (!currentSizes || leftIndex < 0 || leftIndex >= currentSizes.length - 1) return
+
+      const axis = resolvedDirection === "horizontal" ? "x" : "y"
+      const point = getPoint(e)
+      const position = axis === "x" ? point?.pageX : point?.pageY
+      if (typeof position !== "number") return
+
+      const input: "mouse" | "touch" = e?.touches?.length ? "touch" : "mouse"
+      const rect = rectSizeRef.current || (await measure())
+      const containerSize = axis === "x" ? rect?.width : rect?.height
+      if (!containerSize) return
+
+      dragRef.current = {
+        axis,
+        input,
+        leftIndex,
+        startPos: position,
+        startSizes: currentSizes.slice(),
+        containerSize,
+      }
+      e?.preventDefault?.()
+
+      if (isH5() && typeof document !== "undefined") {
+        if (input === "mouse") {
+          document.addEventListener("mousemove", onDocumentMouseMove as any)
+          document.addEventListener("mouseup", onDocumentMouseUp as any)
+        } else {
+          document.addEventListener("touchmove", onDocumentTouchMove as any, { passive: false } as any)
+          document.addEventListener("touchend", onDocumentTouchEnd as any)
+          document.addEventListener("touchcancel", onDocumentTouchEnd as any)
+        }
+      }
+    },
+    [
+      measure,
+      onDocumentMouseMove,
+      onDocumentMouseUp,
+      onDocumentTouchEnd,
+      onDocumentTouchMove,
+      resolvedDirection,
+    ]
+  )
+
+  const onGroupTouchMove = React.useCallback(
+    (e: any) => {
+      const drag = dragRef.current
+      if (!drag || drag.input !== "touch") return
+      e?.preventDefault?.()
+      applyMove(e)
+    },
+    [applyMove]
+  )
+
+  const onGroupTouchEnd = React.useCallback(() => endDrag(), [endDrag])
+
+  let panelIndex = 0
+  let handleIndex = 0
+
+  return (
+    <View
+      id={idRef.current}
+      ref={groupRef}
+      data-slot="resizable-panel-group"
+      data-direction={resolvedDirection}
+      className={cn(
+        "flex h-full w-full items-stretch overflow-hidden",
+        resolvedDirection === "vertical" ? "flex-col" : "flex-row",
+        className
+      )}
+      {...props}
+      onTouchMove={onGroupTouchMove}
+      onTouchEnd={onGroupTouchEnd}
+      onTouchCancel={onGroupTouchEnd as any}
+    >
+      {React.Children.map(children as any, (child) => {
+        if (!React.isValidElement(child)) return child
+
+        if (isPanelElement(child)) {
+          const size = sizes?.[panelIndex]
+          const cloned = React.cloneElement(child as any, {
+            __size: typeof size === "number" ? size : undefined,
+            __direction: resolvedDirection,
+          })
+          panelIndex += 1
+          return cloned
+        }
+
+        if (isHandleElement(child)) {
+          const leftIndex = panelIndex - 1
+          const cloned = React.cloneElement(child as any, {
+            __direction: resolvedDirection,
+            className: cn(
+              resolvedDirection === "horizontal" ? "cursor-col-resize" : "cursor-row-resize",
+              (child.props as ResizableHandleProps)?.className
+            ),
+            onTouchStart: (e: any) => void startDrag(leftIndex, e),
+            onMouseDown: (e: any) => void startDrag(leftIndex, e),
+            "data-handle-index": handleIndex,
+          })
+          handleIndex += 1
+          return cloned
+        }
+
+        return child
+      })}
+    </View>
+  )
+}
+
+/**
+ * @desc 可调整尺寸面板。
+ * @param {Parameters<typeof ResizablePanel>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ResizablePanel>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel } from '@open-dy/vibecoding-sdk-taro/ui/resizable'
+ * <ResizablePanelGroup><ResizablePanel /></ResizablePanelGroup>
+ * ```
+ */
+const ResizablePanel = ({
+  className,
+  children,
+  defaultSize,
+  __size,
+  ...props
+}: ResizablePanelProps) => {
+  const parsedDefaultSize = parseDefaultSize(defaultSize)
+
+  return (
+    <View
+      data-slot="resizable-panel"
+      {...props}
+      className={cn("flex min-h-0 min-w-0 flex-col overflow-hidden", className)}
+      style={{
+        flexBasis: 0,
+        flexGrow: __size ?? parsedDefaultSize ?? 1,
+        flexShrink: 1,
+        minWidth: 0,
+        minHeight: 0,
+        ...(props.style as Record<string, any>),
+      }}
+    >
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 可调整尺寸面板尺寸调整手柄。
+ * @param {Parameters<typeof ResizableHandle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ResizableHandle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizableHandle } from '@open-dy/vibecoding-sdk-taro/ui/resizable'
+ * <ResizablePanelGroup><ResizableHandle /></ResizablePanelGroup>
+ * ```
+ */
+const ResizableHandle = ({
+  withHandle,
+  className,
+  __direction,
+  ...props
+}: ResizableHandleProps) => (
+  <View
+    data-slot="resizable-handle"
+    {...props}
+    className={cn(
+      "relative flex shrink-0 items-center justify-center bg-transparent",
+      __direction === "vertical" ? "h-3 self-stretch" : "w-3 self-stretch",
+      className
+    )}
+  >
+    <View
+      className={cn(
+        "absolute bg-border",
+        __direction === "vertical"
+          ? "inset-x-0 top-1/2 -translate-y-1/2"
+          : "inset-y-0 left-1/2 -translate-x-1/2"
+      )}
+      style={__direction === "vertical" ? { height: "1PX" } : { width: "1PX" }}
+    />
+    {withHandle ? <View className="z-10 flex h-6 w-3 items-center justify-center rounded-md bg-border">
+        <View
+          className={cn(
+            "rounded-full bg-background/80",
+            __direction === "vertical" ? "h-1 w-6" : "h-6 w-1"
+          )}
+        />
+      </View> : null}
+  </View>
+)
+
+;(ResizablePanel as any).displayName = "ResizablePanel"
+;(ResizableHandle as any).displayName = "ResizableHandle"
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

package/src/ui/scroll-area.tsx

@@ -0,0 +1,102 @@
+import * as React from "react"
+import { ScrollView, View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+type ScrollAreaProps = Omit<
+  React.ComponentPropsWithoutRef<typeof ScrollView>,
+  "scrollX" | "scrollY"
+>
+
+function resolveScrollAxis(children: React.ReactNode) {
+  let hasHorizontalBar = false
+  let hasVerticalBar = false
+
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child) || child.type !== ScrollBar) {
+      return
+    }
+
+    if (child.props.orientation === "horizontal") {
+      hasHorizontalBar = true
+      return
+    }
+
+    hasVerticalBar = true
+  })
+
+  if (hasHorizontalBar && hasVerticalBar) {
+    return "both"
+  }
+
+  if (hasHorizontalBar) {
+    return "horizontal"
+  }
+
+  return "vertical"
+}
+
+/**
+ * @desc 滚动区域组件。
+ * @param {Parameters<typeof ScrollArea>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof ScrollArea>[0]["children"]} props.children 滚动内容及直接子节点 ScrollBar；无横向 ScrollBar 时默认纵向滚动，两种方向都有时启用双轴。容器需有受限宽高才能滚动。
+ * @return {ReturnType<typeof ScrollArea>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ScrollArea } from '@open-dy/vibecoding-sdk-taro/ui/scroll-area'
+ * <ScrollArea />
+ * ```
+ */
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaProps) {
+  const resolvedOrientation = resolveScrollAxis(children)
+
+  return (
+    <ScrollView
+      data-slot="scroll-area"
+      scrollY={resolvedOrientation === "vertical" || resolvedOrientation === "both"}
+      scrollX={resolvedOrientation === "horizontal" || resolvedOrientation === "both"}
+      className={cn("relative", className)}
+      {...props}
+    >
+      {children}
+    </ScrollView>
+  )
+}
+
+/**
+ * @desc 滚动区域的方向标记和滚动条样式；作为 ScrollArea 直接子节点时参与滚动轴判定。
+ * @param {Parameters<typeof ScrollBar>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ScrollBar>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ScrollArea, ScrollBar } from '@open-dy/vibecoding-sdk-taro/ui/scroll-area'
+ * <ScrollArea><ScrollBar /></ScrollArea>
+ * ```
+ */
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ViewProps & {
+  /** @desc 滚动方向标识，默认 vertical；作为 ScrollArea 的直接子节点时控制滚动轴，两种方向都存在时允许双轴滚动。 */
+  orientation?: "horizontal" | "vertical" }) {
+  return (
+    <View
+      data-slot="scroll-bar"
+      data-orientation={orientation}
+      className={cn(
+        "flex touch-none select-none p-px transition-colors",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { ScrollArea, ScrollBar }