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

package/src/ui/select.tsx

@@ -0,0 +1,471 @@
+import * as React from "react"
+import { ScrollView, View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+import { Check, ChevronDown } from "@open-dy/lucide-taro"
+import { getRectById, getViewport } from "../lib/measure"
+import { Portal } from "./portal"
+
+type SelectItemValue = string | null
+
+type SelectOption = {
+  /** @desc 该值的显示节点；值为空时可作为 SelectValue 的占位内容。 */
+  label: React.ReactNode
+  /** @desc 选项标识；null 或空字符串作为空选择，普通字符串与 SelectItem.value 对应。 */
+  value: SelectItemValue
+}
+
+const isEmptyValue = (value: SelectItemValue | undefined) =>
+  value === null || value === undefined || value === ""
+
+const SelectContext = React.createContext<{
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  value?: SelectItemValue
+  onValueChange?: (value: SelectItemValue) => void
+  triggerId: string
+  selectedLabel?: React.ReactNode
+  setSelectedLabel: (label?: React.ReactNode) => void
+  placeholder?: React.ReactNode
+}>({
+  open: false,
+  onOpenChange: () => {},
+  triggerId: "",
+  setSelectedLabel: () => {},
+})
+
+/**
+ * @desc 选择框组件。
+ * @param {Parameters<typeof Select>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Select>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { useState } from 'react'
+ * import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@open-dy/vibecoding-sdk-taro/ui/select'
+ * export function ThemePicker() {
+ *   const [value, setValue] = useState<string | null>(null)
+ *   const items = [{ value: 'light', label: '明亮' }, { value: 'dark', label: '深色' }]
+ *   return <Select items={items} value={value} onValueChange={setValue}>
+ *     <SelectTrigger><SelectValue placeholder="选择主题" /></SelectTrigger>
+ *     <SelectContent>{items.map((item) => <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>)}</SelectContent>
+ *   </Select>
+ * }
+ * ```
+ */
+function Select({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  items,
+  children,
+}: {
+  /** @desc 受控展开状态；传入后以该值为准，需在 onOpenChange 中更新。省略时由组件内部管理。 */
+  open?: boolean
+  /** @desc 非受控模式的初始展开状态，默认 false；仅初始化时读取，传入 open 后不生效。 */
+  defaultOpen?: boolean
+  /** @desc 触发器或关闭操作请求改变展开状态时调用，参数为下一状态；受控模式需由调用方同步 open。 */
+  onOpenChange?: (open: boolean) => void
+  /** @desc 受控选中值；字符串表示选项，null 或空字符串表示空选择。省略时使用内部状态，传入后需同步 onValueChange。 */
+  value?: SelectItemValue
+  /** @desc 非受控模式的初始选中值，默认 null；仅初始化时读取，传入 value 后不生效。 */
+  defaultValue?: SelectItemValue
+  /** @desc 点击 SelectItem 时传入其 value；组件随后关闭列表，受控模式需由调用方同步 value。 */
+  onValueChange?: (value: SelectItemValue) => void
+  /** @desc 值与显示文本的映射，用于 SelectValue 的选中标签和空值占位；不自动生成 SelectItem，需在 children 中自行组合。 */
+  items?: SelectOption[]
+  /** @desc 同一实例的触发器、内容区等组合子组件；省略时不显示内容，子组件通过上下文共享状态。 */
+  children?: React.ReactNode
+}) {
+  const triggerIdRef = React.useRef(
+    `select-${Math.random().toString(36).slice(2, 10)}`
+  )
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)
+  const [internalValue, setInternalValue] = React.useState<SelectItemValue>(
+    defaultValue ?? null
+  )
+  const [selectedLabel, setSelectedLabel] = React.useState<React.ReactNode>()
+  const openControlled = openProp !== undefined
+  const valueControlled = valueProp !== undefined
+  const open = openControlled ? openProp : internalOpen
+  const value = valueControlled ? valueProp : internalValue
+  const placeholder = React.useMemo(
+    () => items?.find((item) => isEmptyValue(item.value))?.label,
+    [items]
+  )
+
+  React.useEffect(() => {
+    if (isEmptyValue(value)) {
+      setSelectedLabel(undefined)
+      return
+    }
+
+    const matchedItem = items?.find((item) => item.value === value)
+    if (matchedItem) {
+      setSelectedLabel(matchedItem.label)
+    }
+  }, [items, value])
+
+  return (
+    <SelectContext.Provider
+      value={{
+        open,
+        onOpenChange: (v) => {
+          if (!openControlled) setInternalOpen(v)
+          onOpenChange?.(v)
+        },
+        value,
+        onValueChange: (v) => {
+          if (!valueControlled) setInternalValue(v)
+          onValueChange?.(v)
+        },
+        triggerId: triggerIdRef.current,
+        selectedLabel,
+        setSelectedLabel,
+        placeholder,
+      }}
+    >
+      {children}
+    </SelectContext.Provider>
+  )
+}
+
+/**
+ * @desc 选择框触发器。
+ * @param {Parameters<typeof SelectTrigger>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SelectTrigger>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Select, SelectTrigger } from '@open-dy/vibecoding-sdk-taro/ui/select'
+ * <Select><SelectTrigger /></Select>
+ * ```
+ */
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: ViewProps & {
+  /** @desc 触发器高度，默认 default（h-8），sm 为紧凑高度（h-7）。 */
+  size?: "default" | "sm"
+}) {
+  const { onOpenChange, open, triggerId } = React.useContext(SelectContext)
+  return (
+    <View
+      id={triggerId}
+      data-slot="select-trigger"
+      data-size={size}
+      aria-expanded={open}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&>span]:line-clamp-1",
+        size === "default" && "h-8",
+        size === "sm" && "h-7 rounded-[min(var(--radius-md),12px)]",
+        className
+      )}
+      onClick={() => onOpenChange(!open)}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="opacity-50" size={16} />
+    </View>
+  )
+}
+
+/**
+ * @desc 选择框当前值展示。
+ * @param {Parameters<typeof SelectValue>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SelectValue>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Select, SelectValue } from '@open-dy/vibecoding-sdk-taro/ui/select'
+ * <Select><SelectValue /></Select>
+ * ```
+ */
+function SelectValue({
+  placeholder,
+  className,
+  ...props
+}: ViewProps & {
+  /** @desc 没有有效选中值时的提示文本；优先于根 Select.items 中空值项的标签，省略时使用该标签。 */
+  placeholder?: string }) {
+  const { value, selectedLabel, placeholder: contextPlaceholder } =
+    React.useContext(SelectContext)
+  const hasValue = !isEmptyValue(value)
+  const displayValue = selectedLabel || value || placeholder || contextPlaceholder
+
+  return (
+    <View
+      data-slot="select-value"
+      className={cn(
+        "line-clamp-1 flex items-center gap-1",
+        !hasValue && "text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {displayValue}
+    </View>
+  )
+}
+
+/**
+ * @desc 选择框内容容器。
+ * @param {Parameters<typeof SelectContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SelectContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Select, SelectContent } from '@open-dy/vibecoding-sdk-taro/ui/select'
+ * <Select><SelectContent /></Select>
+ * ```
+ */
+function SelectContent({
+  className,
+  children,
+  position: _position,
+  ...props
+}: ViewProps & {
+  /** @desc 兼容属性；当前实现忽略该字符串，始终测量触发器并按下方浮层定位、限制在视口内。 */
+  position?: string }) {
+  const { open, onOpenChange, triggerId } = React.useContext(SelectContext)
+  const contentIdRef = React.useRef(
+    `select-content-${Math.random().toString(36).slice(2, 10)}`
+  )
+  const [position, setPosition] = React.useState<{
+    left: number
+    top: number
+    width?: number
+  } | null>(null)
+
+  React.useEffect(() => {
+    if (!open) {
+      setPosition(null)
+      return
+    }
+
+    let cancelled = false
+
+    const computePosition = async () => {
+      const [triggerRect, contentRect] = await Promise.all([
+        getRectById(triggerId),
+        getRectById(contentIdRef.current),
+      ])
+
+      if (cancelled || !triggerRect || !contentRect) return
+
+      const viewport = getViewport()
+      const margin = 8
+      const nextWidth = Math.max(triggerRect.width, contentRect.width)
+      const left = Math.min(
+        Math.max(triggerRect.left, margin),
+        Math.max(margin, viewport.width - nextWidth - margin)
+      )
+      const top = Math.min(
+        Math.max(triggerRect.top + triggerRect.height + 4, margin),
+        Math.max(margin, viewport.height - contentRect.height - margin)
+      )
+
+      setPosition({ left, top, width: triggerRect.width })
+    }
+
+    const timer = setTimeout(() => {
+      void computePosition()
+    }, 0)
+
+    return () => {
+      cancelled = true
+      clearTimeout(timer)
+    }
+  }, [open, triggerId])
+
+  if (!open) return null
+
+  return (
+    <Portal>
+      <View className="fixed inset-0 z-40" onClick={() => onOpenChange(false)} />
+      <View
+        id={contentIdRef.current}
+        data-slot="select-content"
+        className={cn(
+          "fixed z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-md",
+          className
+        )}
+        style={
+          position
+            ? {
+                left: position.left,
+                top: position.top,
+                width: position.width,
+              }
+            : {
+                left: 0,
+                top: 0,
+                opacity: 0,
+                pointerEvents: "none",
+              }
+        }
+        {...props}
+      >
+        <ScrollView scrollY className="max-h-[50vh]">
+          <View className="w-full p-1">{children}</View>
+        </ScrollView>
+      </View>
+    </Portal>
+  )
+}
+
+/**
+ * @desc 选择框条目。
+ * @param {Parameters<typeof SelectItem>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SelectItem>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Select, SelectItem } from '@open-dy/vibecoding-sdk-taro/ui/select'
+ * <Select><SelectItem value="one" /></Select>
+ * ```
+ */
+function SelectItem({
+  className,
+  children,
+  value,
+  ...props
+}: ViewProps & {
+  /** @desc 当前项目的选择值；点击时传给根 Select，null/空字符串可表示空选择。显示标签使用 children。 */
+  value: SelectItemValue }) {
+  const ctx = React.useContext(SelectContext)
+  const isSelected = ctx.value === value
+
+  return (
+    <View
+      data-slot="select-item"
+      data-selected={isSelected || undefined}
+      className={cn(
+        "relative flex w-full items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden select-none active:bg-accent active:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        isSelected && "bg-accent text-accent-foreground",
+        className
+      )}
+      onClick={() => {
+        ctx.setSelectedLabel(children)
+        ctx.onValueChange?.(value)
+        ctx.onOpenChange(false)
+      }}
+      {...props}
+    >
+      <View className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        {isSelected ? <Check className="size-4" /> : null}
+      </View>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 选择框分组容器。
+ * @param {Parameters<typeof SelectGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SelectGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Select, SelectGroup } from '@open-dy/vibecoding-sdk-taro/ui/select'
+ * <Select><SelectGroup /></Select>
+ * ```
+ */
+function SelectGroup({ ...props }: ViewProps) {
+  return <View data-slot="select-group" {...props} />
+}
+
+/**
+ * @desc 选择框标签文本。
+ * @param {Parameters<typeof SelectLabel>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SelectLabel>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Select, SelectLabel } from '@open-dy/vibecoding-sdk-taro/ui/select'
+ * <Select><SelectLabel /></Select>
+ * ```
+ */
+function SelectLabel({
+  className,
+  ...props
+}: ViewProps) {
+  return (
+    <View
+      data-slot="select-label"
+      className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 选择框分隔线。
+ * @param {Parameters<typeof SelectSeparator>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SelectSeparator>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Select, SelectSeparator } from '@open-dy/vibecoding-sdk-taro/ui/select'
+ * <Select><SelectSeparator /></Select>
+ * ```
+ */
+function SelectSeparator({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="select-separator"
+      className={cn("-mx-1 my-1 h-px bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 选择框向上滚动按钮。
+ * @param {Parameters<typeof SelectScrollUpButton>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SelectScrollUpButton>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Select, SelectScrollUpButton } from '@open-dy/vibecoding-sdk-taro/ui/select'
+ * <Select><SelectScrollUpButton /></Select>
+ * ```
+ */
+function SelectScrollUpButton({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 选择框向下滚动按钮。
+ * @param {Parameters<typeof SelectScrollDownButton>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SelectScrollDownButton>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Select, SelectScrollDownButton } from '@open-dy/vibecoding-sdk-taro/ui/select'
+ * <Select><SelectScrollDownButton /></Select>
+ * ```
+ */
+function SelectScrollDownButton({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

package/src/ui/separator.tsx

@@ -0,0 +1,37 @@
+import { View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+/**
+ * @desc 分隔线组件。
+ * @param {Parameters<typeof Separator>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Separator>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Separator } from '@open-dy/vibecoding-sdk-taro/ui/separator'
+ * <Separator />
+ * ```
+ */
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: ViewProps & {
+  /** @desc 分隔线方向，默认 horizontal（h-px/w-full）；vertical 使用 w-px 并沿父容器拉伸高度。 */
+  orientation?: "horizontal" | "vertical" }) {
+  return (
+    <View
+      data-slot="separator"
+      data-orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" && "h-px w-full",
+        orientation === "vertical" && "w-px self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }