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

package/src/ui/dialog.tsx

@@ -0,0 +1,290 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+import { X } from "@open-dy/lucide-taro"
+
+const DialogContext = React.createContext<{
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}>({ open: false, onOpenChange: () => {} })
+
+/**
+ * @desc 对话框组件。
+ * @param {Parameters<typeof Dialog>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Dialog>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Dialog } from '@open-dy/vibecoding-sdk-taro/ui/dialog'
+ * <Dialog />
+ * ```
+ */
+function Dialog({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: {
+  /** @desc 受控展开状态；传入后以该值为准，需在 onOpenChange 中更新。省略时由组件内部管理。 */
+  open?: boolean
+  /** @desc 非受控模式的初始展开状态，默认 false；仅初始化时读取，传入 open 后不生效。 */
+  defaultOpen?: boolean
+  /** @desc 触发器或关闭操作请求改变展开状态时调用，参数为下一状态；受控模式需由调用方同步 open。 */
+  onOpenChange?: (open: boolean) => void
+  /** @desc 同一实例的触发器、内容区等组合子组件；省略时不显示内容，子组件通过上下文共享状态。 */
+  children?: React.ReactNode
+}) {
+  const [internal, setInternal] = React.useState(defaultOpen ?? false)
+  const controlled = openProp !== undefined
+  const open = controlled ? openProp : internal
+
+  return (
+    <DialogContext.Provider
+      value={{
+        open,
+        onOpenChange: (v) => {
+          if (!controlled) setInternal(v)
+          onOpenChange?.(v)
+        },
+      }}
+    >
+      {children}
+    </DialogContext.Provider>
+  )
+}
+
+/**
+ * @desc 对话框触发器。
+ * @param {Parameters<typeof DialogTrigger>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DialogTrigger>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Dialog, DialogTrigger } from '@open-dy/vibecoding-sdk-taro/ui/dialog'
+ * <Dialog><DialogTrigger /></Dialog>
+ * ```
+ */
+function DialogTrigger({
+  children,
+  render,
+  ...props
+}: Omit<ViewProps, "children"> & {
+  /** @desc 默认触发器内容；render 非空时由 render 内容替代。 */
+  children?: React.ReactNode
+  /** @desc 触发器内要显示的 React 节点，优先于 children；仍由外层 View 处理打开操作，不是渲染函数。 */
+  render?: React.ReactNode
+}) {
+  const { onOpenChange } = React.useContext(DialogContext)
+  return (
+    <View data-slot="dialog-trigger" onClick={() => onOpenChange(true)} {...props}>
+      {render ?? children}
+    </View>
+  )
+}
+
+/**
+ * @desc 对话框关闭按钮。
+ * @param {Parameters<typeof DialogClose>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DialogClose>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Dialog, DialogClose } from '@open-dy/vibecoding-sdk-taro/ui/dialog'
+ * <Dialog><DialogClose /></Dialog>
+ * ```
+ */
+function DialogClose({ children, ...props }: ViewProps) {
+  const { onOpenChange } = React.useContext(DialogContext)
+  return (
+    <View data-slot="dialog-close" onClick={() => onOpenChange(false)} {...props}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 对话框跨层级渲染入口。
+ * @param {Parameters<typeof DialogPortal>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DialogPortal>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Dialog, DialogPortal } from '@open-dy/vibecoding-sdk-taro/ui/dialog'
+ * <Dialog><DialogPortal /></Dialog>
+ * ```
+ */
+function DialogPortal({ children }: {
+  /** @desc 要渲染的子节点；该兼容包装只返回 Fragment，不额外创建原生容器或执行挂载迁移。 */
+  children?: React.ReactNode }) {
+  return <>{children}</>
+}
+
+/**
+ * @desc 对话框遮罩。
+ * @param {Parameters<typeof DialogOverlay>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DialogOverlay>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Dialog, DialogOverlay } from '@open-dy/vibecoding-sdk-taro/ui/dialog'
+ * <Dialog><DialogOverlay /></Dialog>
+ * ```
+ */
+function DialogOverlay({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 对话框内容容器。
+ * @param {Parameters<typeof DialogContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DialogContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Dialog, DialogContent } from '@open-dy/vibecoding-sdk-taro/ui/dialog'
+ * <Dialog><DialogContent /></Dialog>
+ * ```
+ */
+function DialogContent({
+  className,
+  children,
+  showClose = true,
+  showCloseButton,
+  ...props
+}: ViewProps & {
+  /** @desc 是否显示内置关闭按钮，默认 true；showCloseButton 有值时以其为准。 */
+  showClose?: boolean;
+  /** @desc 内置关闭按钮开关，优先于 showClose；两者都省略时显示。不会关闭遮罩点击行为。 */
+  showCloseButton?: boolean }) {
+  const ctx = React.useContext(DialogContext)
+  const shouldShowClose = showCloseButton ?? showClose
+  if (!ctx.open) return null
+
+  return (
+    <View className="fixed inset-0 z-50 flex items-center justify-center">
+      <DialogOverlay onClick={() => ctx.onOpenChange(false)} />
+      <View
+        data-slot="dialog-content"
+        className={cn(
+          "relative z-50 grid w-full max-w-lg gap-4 rounded-xl border bg-background p-4 shadow-lg sm:max-w-md",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {shouldShowClose ? <View
+            className="absolute top-3 right-3 flex size-5 items-center justify-center rounded-sm opacity-70"
+            onClick={() => ctx.onOpenChange(false)}
+          >
+            <X className="size-4" />
+          </View> : null}
+      </View>
+    </View>
+  )
+}
+
+/**
+ * @desc 对话框头部布局。
+ * @param {Parameters<typeof DialogHeader>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DialogHeader>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Dialog, DialogHeader } from '@open-dy/vibecoding-sdk-taro/ui/dialog'
+ * <Dialog><DialogHeader /></Dialog>
+ * ```
+ */
+function DialogHeader({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="dialog-header"
+      className={cn(
+        "flex flex-col gap-2 text-center sm:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 对话框底部布局。
+ * @param {Parameters<typeof DialogFooter>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DialogFooter>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Dialog, DialogFooter } from '@open-dy/vibecoding-sdk-taro/ui/dialog'
+ * <Dialog><DialogFooter /></Dialog>
+ * ```
+ */
+function DialogFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 对话框标题。
+ * @param {Parameters<typeof DialogTitle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DialogTitle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Dialog, DialogTitle } from '@open-dy/vibecoding-sdk-taro/ui/dialog'
+ * <Dialog><DialogTitle /></Dialog>
+ * ```
+ */
+function DialogTitle({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 对话框说明文本。
+ * @param {Parameters<typeof DialogDescription>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DialogDescription>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Dialog, DialogDescription } from '@open-dy/vibecoding-sdk-taro/ui/dialog'
+ * <Dialog><DialogDescription /></Dialog>
+ * ```
+ */
+function DialogDescription({
+  className,
+  ...props
+}: ViewProps) {
+  return (
+    <View
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/src/ui/drawer.tsx

@@ -0,0 +1,272 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+const DrawerContext = React.createContext<{
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  direction?: "bottom" | "top" | "left" | "right"
+}>({ open: false, onOpenChange: () => {}, direction: "bottom" })
+
+/**
+ * @desc 抽屉组件。
+ * @param {Parameters<typeof Drawer>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Drawer>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Drawer } from '@open-dy/vibecoding-sdk-taro/ui/drawer'
+ * <Drawer />
+ * ```
+ */
+function Drawer({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  direction = "bottom",
+  children,
+}: {
+  /** @desc 受控展开状态；传入后以该值为准，需在 onOpenChange 中更新。省略时由组件内部管理。 */
+  open?: boolean
+  /** @desc 非受控模式的初始展开状态，默认 false；仅初始化时读取，传入 open 后不生效。 */
+  defaultOpen?: boolean
+  /** @desc 触发器或关闭操作请求改变展开状态时调用，参数为下一状态；受控模式需由调用方同步 open。 */
+  onOpenChange?: (open: boolean) => void
+  /** @desc 抽屉出现的位置：bottom 底部、top 顶部、left 左侧、right 右侧，默认 bottom；同时决定宽高、边框及圆角。 */
+  direction?: "bottom" | "top" | "left" | "right"
+  /** @desc 同一实例的触发器、内容区等组合子组件；省略时不显示内容，子组件通过上下文共享状态。 */
+  children?: React.ReactNode
+}) {
+  const [internal, setInternal] = React.useState(defaultOpen ?? false)
+  const controlled = openProp !== undefined
+  const open = controlled ? openProp : internal
+
+  return (
+    <DrawerContext.Provider
+      value={{
+        open,
+        onOpenChange: (v) => {
+          if (!controlled) setInternal(v)
+          onOpenChange?.(v)
+        },
+        direction,
+      }}
+    >
+      {children}
+    </DrawerContext.Provider>
+  )
+}
+
+/**
+ * @desc 抽屉触发器。
+ * @param {Parameters<typeof DrawerTrigger>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DrawerTrigger>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerTrigger } from '@open-dy/vibecoding-sdk-taro/ui/drawer'
+ * <Drawer><DrawerTrigger /></Drawer>
+ * ```
+ */
+function DrawerTrigger({ children, ...props }: ViewProps) {
+  const { onOpenChange } = React.useContext(DrawerContext)
+  return (
+    <View data-slot="drawer-trigger" onClick={() => onOpenChange(true)} {...props}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 抽屉跨层级渲染入口。
+ * @param {Parameters<typeof DrawerPortal>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DrawerPortal>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerPortal } from '@open-dy/vibecoding-sdk-taro/ui/drawer'
+ * <Drawer><DrawerPortal /></Drawer>
+ * ```
+ */
+function DrawerPortal({ children }: {
+  /** @desc 要渲染的子节点；该兼容包装只返回 Fragment，不额外创建原生容器或执行挂载迁移。 */
+  children?: React.ReactNode }) {
+  return <>{children}</>
+}
+
+/**
+ * @desc 抽屉关闭按钮。
+ * @param {Parameters<typeof DrawerClose>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DrawerClose>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerClose } from '@open-dy/vibecoding-sdk-taro/ui/drawer'
+ * <Drawer><DrawerClose /></Drawer>
+ * ```
+ */
+function DrawerClose({ children, ...props }: ViewProps) {
+  const { onOpenChange } = React.useContext(DrawerContext)
+  return (
+    <View data-slot="drawer-close" onClick={() => onOpenChange(false)} {...props}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 抽屉遮罩。
+ * @param {Parameters<typeof DrawerOverlay>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DrawerOverlay>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerOverlay } from '@open-dy/vibecoding-sdk-taro/ui/drawer'
+ * <Drawer><DrawerOverlay /></Drawer>
+ * ```
+ */
+function DrawerOverlay({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="drawer-overlay"
+      className={cn("fixed inset-0 z-50 bg-black/50", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 抽屉内容容器。
+ * @param {Parameters<typeof DrawerContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DrawerContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerContent } from '@open-dy/vibecoding-sdk-taro/ui/drawer'
+ * <Drawer><DrawerContent /></Drawer>
+ * ```
+ */
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: ViewProps) {
+  const { open, onOpenChange, direction } = React.useContext(DrawerContext)
+  if (!open) return null
+
+  return (
+    <View className="fixed inset-0 z-50">
+      <DrawerOverlay onClick={() => onOpenChange(false)} />
+      <View
+        data-slot="drawer-content"
+        data-direction={direction}
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground",
+          direction === "bottom" &&
+            "inset-x-0 bottom-0 mt-24 max-h-[80vh] rounded-t-xl border-t",
+          direction === "top" &&
+            "inset-x-0 top-0 mb-24 max-h-[80vh] rounded-b-xl border-b",
+          direction === "left" &&
+            "inset-y-0 left-0 w-3/4 rounded-r-xl border-r sm:max-w-sm",
+          direction === "right" &&
+            "inset-y-0 right-0 w-3/4 rounded-l-xl border-l sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {direction === "bottom" && (
+          <View className="mx-auto mt-4 h-1 w-[100px] shrink-0 rounded-full bg-muted" />
+        )}
+        {children}
+      </View>
+    </View>
+  )
+}
+
+/**
+ * @desc 抽屉头部布局。
+ * @param {Parameters<typeof DrawerHeader>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DrawerHeader>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerHeader } from '@open-dy/vibecoding-sdk-taro/ui/drawer'
+ * <Drawer><DrawerHeader /></Drawer>
+ * ```
+ */
+function DrawerHeader({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="drawer-header"
+      className={cn("flex flex-col gap-0.5 p-4 text-center md:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 抽屉底部布局。
+ * @param {Parameters<typeof DrawerFooter>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DrawerFooter>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerFooter } from '@open-dy/vibecoding-sdk-taro/ui/drawer'
+ * <Drawer><DrawerFooter /></Drawer>
+ * ```
+ */
+function DrawerFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 抽屉标题。
+ * @param {Parameters<typeof DrawerTitle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DrawerTitle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerTitle } from '@open-dy/vibecoding-sdk-taro/ui/drawer'
+ * <Drawer><DrawerTitle /></Drawer>
+ * ```
+ */
+function DrawerTitle({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="drawer-title"
+      className={cn("font-heading text-base font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 抽屉说明文本。
+ * @param {Parameters<typeof DrawerDescription>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof DrawerDescription>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerDescription } from '@open-dy/vibecoding-sdk-taro/ui/drawer'
+ * <Drawer><DrawerDescription /></Drawer>
+ * ```
+ */
+function DrawerDescription({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}