soda-heroui 0.11.2 → 0.11.4

package/README.md

@@ -1,23 +1,23 @@
-# soda-tanstack-form
-
-[![NPM version](https://img.shields.io/npm/v/soda-tanstack-form.svg?style=flat)](https://npmjs.com/package/soda-tanstack-form)
-[![NPM downloads](http://img.shields.io/npm/dm/soda-tanstack-form.svg?style=flat)](https://npmjs.com/package/soda-tanstack-form)
-
-## Install
-
-```bash
-$ pnpm install
-```
-
-```bash
-$ npm run dev
-$ npm run build
-```
-
-## Options
-
-TODO
-
-## LICENSE
-
-MIT
+# soda-tanstack-form
+
+[![NPM version](https://img.shields.io/npm/v/soda-tanstack-form.svg?style=flat)](https://npmjs.com/package/soda-tanstack-form)
+[![NPM downloads](http://img.shields.io/npm/dm/soda-tanstack-form.svg?style=flat)](https://npmjs.com/package/soda-tanstack-form)
+
+## Install
+
+```bash
+$ pnpm install
+```
+
+```bash
+$ npm run dev
+$ npm run build
+```
+
+## Options
+
+TODO
+
+## LICENSE
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soda-heroui",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "description": "",
   "type": "module",
   "exports": {
@@ -37,8 +37,8 @@
   "dependencies": {
     "@internationalized/date": "^3.8.2",
     "@tanstack/react-form": "^1.19.0",
-    "deepsea-tools": "5.40.4",
-    "soda-hooks": "6.12.7",
+    "deepsea-tools": "5.40.5",
+    "soda-hooks": "6.13.1",
     "soda-tanstack-form": "0.2.5",
     "soda-type": "6.3.1"
   },

package/src/components/AutoRefresh.tsx

@@ -1,36 +1,36 @@
-import { FC, ReactNode } from "react"
-import { Button, PressEvent, addToast } from "@heroui/react"
-import { useAutoRefresh } from "soda-hooks"
-import { FirstParameter } from "soda-type"
-
-export interface AutoRefreshProps extends FirstParameter<typeof addToast> {
-    onRefresh?: () => void
-    children?: ReactNode
-}
-
-export const AutoRefresh: FC<AutoRefreshProps> = ({ children, onRefresh, ...rest }) => {
-    if (process.env.NODE_ENV === "development") return children
-
-    function onPress(e: PressEvent) {
-        const closeButton = e.target.parentElement?.querySelector(`[aria-label="关闭"]`) as HTMLButtonElement
-        closeButton?.click()
-        onRefresh?.()
-    }
-
-    useAutoRefresh(() =>
-        addToast({
-            title: "检测到页面更新",
-            description: "为了最佳的体验，请刷新页面",
-            color: "warning",
-            timeout: Infinity,
-            endContent: (
-                <Button color="warning" size="sm" variant="flat" onPress={onPress}>
-                    刷新
-                </Button>
-            ),
-            ...rest,
-        }),
-    )
-
-    return children
-}
+import { FC, ReactNode } from "react"
+import { Button, PressEvent, addToast } from "@heroui/react"
+import { useAutoRefresh } from "soda-hooks"
+import { FirstParameter } from "soda-type"
+
+export interface AutoRefreshProps extends FirstParameter<typeof addToast> {
+    onRefresh?: () => void
+    children?: ReactNode
+}
+
+export const AutoRefresh: FC<AutoRefreshProps> = ({ children, onRefresh, ...rest }) => {
+    if (process.env.NODE_ENV === "development") return children
+
+    function onPress(e: PressEvent) {
+        const closeButton = e.target.parentElement?.querySelector(`[aria-label="关闭"]`) as HTMLButtonElement
+        closeButton?.click()
+        onRefresh?.()
+    }
+
+    useAutoRefresh(() =>
+        addToast({
+            title: "检测到页面更新",
+            description: "为了最佳的体验，请刷新页面",
+            color: "warning",
+            timeout: Infinity,
+            endContent: (
+                <Button color="warning" size="sm" variant="flat" onPress={onPress}>
+                    刷新
+                </Button>
+            ),
+            ...rest,
+        }),
+    )
+
+    return children
+}

package/src/components/ErrorMessage.tsx

@@ -1,34 +1,34 @@
-"use client"
-
-import { ComponentProps, FC } from "react"
-import { isNonNullable } from "deepsea-tools"
-
-export interface ErrorMessageItem {
-    message: string
-}
-
-export interface ErrorMessageProps extends Omit<ComponentProps<"div">, "children"> {
-    data: (ErrorMessageItem | undefined)[]
-}
-
-function getErrorMessage(error: ErrorMessageItem | string | undefined): string[] {
-    if (!isNonNullable(error)) return []
-    if (typeof error === "string") return [error]
-    if ("errors" in error && Array.isArray(error.errors)) return error.errors.map(e => e.message).filter((item, index, array) => array.indexOf(item) === index)
-    return [error.message]
-}
-
-export const ErrorMessage: FC<ErrorMessageProps> = props => {
-    const { data, ...rest } = props
-    const errors = data.flatMap(getErrorMessage).filter((item, index, array) => array.indexOf(item) === index)
-
-    return (
-        errors.length > 0 && (
-            <div {...rest}>
-                {errors.map((item, index) => (
-                    <div key={index}>{item}</div>
-                ))}
-            </div>
-        )
-    )
-}
+"use client"
+
+import { ComponentProps, FC } from "react"
+import { isNonNullable } from "deepsea-tools"
+
+export interface ErrorMessageItem {
+    message: string
+}
+
+export interface ErrorMessageProps extends Omit<ComponentProps<"div">, "children"> {
+    data: (ErrorMessageItem | undefined)[]
+}
+
+function getErrorMessage(error: ErrorMessageItem | string | undefined): string[] {
+    if (!isNonNullable(error)) return []
+    if (typeof error === "string") return [error]
+    if ("errors" in error && Array.isArray(error.errors)) return error.errors.map(e => e.message).filter((item, index, array) => array.indexOf(item) === index)
+    return [error.message]
+}
+
+export const ErrorMessage: FC<ErrorMessageProps> = props => {
+    const { data, ...rest } = props
+    const errors = data.flatMap(getErrorMessage).filter((item, index, array) => array.indexOf(item) === index)
+
+    return (
+        errors.length > 0 && (
+            <div {...rest}>
+                {errors.map((item, index) => (
+                    <div key={index}>{item}</div>
+                ))}
+            </div>
+        )
+    )
+}

package/src/components/FormAutocomplete.tsx

@@ -1,27 +1,27 @@
-"use client"
-
-import { Key, ReactNode } from "react"
-import { Autocomplete, AutocompleteProps } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-
-import { getFieldProps } from "../utils/getFieldProps"
-
-export interface FormAutocompleteProps<FieldValue extends string | null | undefined = string | null | undefined, RenderItem extends object = object>
-    extends FieldComponentProps<typeof Autocomplete<RenderItem>, FieldValue> {
-    component?: <T extends object>(props: AutocompleteProps<T>) => ReactNode
-}
-
-export function FormAutocomplete<FieldValue extends string | null | undefined = string | null | undefined, RenderItem extends object = object>({
-    field,
-    component: Autocomplete2 = Autocomplete,
-    ...rest
-}: FormAutocompleteProps<FieldValue, RenderItem>): ReactNode {
-    return (
-        <Autocomplete2<RenderItem>
-            selectedKey={field.state.value ?? ""}
-            onSelectionChange={field.handleChange as (value: Key | null) => void}
-            {...getFieldProps(field)}
-            {...rest}
-        />
-    )
-}
+"use client"
+
+import { Key, ReactNode } from "react"
+import { Autocomplete, AutocompleteProps } from "@heroui/react"
+import { FieldComponentProps } from "soda-tanstack-form"
+
+import { getFieldProps } from "../utils/getFieldProps"
+
+export interface FormAutocompleteProps<FieldValue extends string | null | undefined = string | null | undefined, RenderItem extends object = object>
+    extends FieldComponentProps<typeof Autocomplete<RenderItem>, FieldValue> {
+    component?: <T extends object>(props: AutocompleteProps<T>) => ReactNode
+}
+
+export function FormAutocomplete<FieldValue extends string | null | undefined = string | null | undefined, RenderItem extends object = object>({
+    field,
+    component: Autocomplete2 = Autocomplete,
+    ...rest
+}: FormAutocompleteProps<FieldValue, RenderItem>): ReactNode {
+    return (
+        <Autocomplete2<RenderItem>
+            selectedKey={field.state.value ?? ""}
+            onSelectionChange={field.handleChange as (value: Key | null) => void}
+            {...getFieldProps(field)}
+            {...rest}
+        />
+    )
+}

package/src/components/FormCalendar.tsx

@@ -1,41 +1,41 @@
-"use client"
-
-import { ReactNode, useContext } from "react"
-import { Calendar, CalendarProps, DateValue } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-import { StrictOmit } from "soda-type"
-
-import { EmptyValue, FormContext } from "@/components/FormProvider"
-
-import { getFieldProps } from "@/utils/getFieldProps"
-import { DefaultTime } from "@/utils/getTimeValue"
-import { DateMode } from "@/utils/parseTime"
-import { TimeValueMode, TimeValueModeMap, getFieldValue, getOnChange } from "@/utils/time"
-
-export interface FormCalendarProps<
-    ValueMode extends TimeValueMode = "date",
-    FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined,
-> extends StrictOmit<FieldComponentProps<typeof Calendar, FieldValue>, never> {
-    valueMode?: ValueMode
-    emptyValue?: EmptyValue
-    dateMode?: DateMode
-    defaultTime?: DefaultTime | (() => DefaultTime)
-    component?: <T extends DateValue>(props: CalendarProps<T>) => ReactNode
-}
-
-export function FormCalendar<
-    ValueMode extends TimeValueMode = "date",
-    FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined,
->({ field, valueMode, emptyValue, dateMode, defaultTime, component: Calendar2 = Calendar, ...rest }: FormCalendarProps<ValueMode, FieldValue>): ReactNode {
-    const context = useContext(FormContext)
-    emptyValue ??= context.emptyValue
-
-    return (
-        <Calendar2
-            focusedValue={getFieldValue(field, dateMode)}
-            onFocusChange={getOnChange({ field, valueMode, emptyValue, defaultTime })}
-            {...getFieldProps(field)}
-            {...rest}
-        />
-    )
-}
+"use client"
+
+import { ReactNode, useContext } from "react"
+import { Calendar, CalendarProps, DateValue } from "@heroui/react"
+import { FieldComponentProps } from "soda-tanstack-form"
+import { StrictOmit } from "soda-type"
+
+import { EmptyValue, FormContext } from "@/components/FormProvider"
+
+import { getFieldProps } from "@/utils/getFieldProps"
+import { DefaultTime } from "@/utils/getTimeValue"
+import { DateMode } from "@/utils/parseTime"
+import { TimeValueMode, TimeValueModeMap, getFieldValue, getOnChange } from "@/utils/time"
+
+export interface FormCalendarProps<
+    ValueMode extends TimeValueMode = "date",
+    FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined,
+> extends StrictOmit<FieldComponentProps<typeof Calendar, FieldValue>, never> {
+    valueMode?: ValueMode
+    emptyValue?: EmptyValue
+    dateMode?: DateMode
+    defaultTime?: DefaultTime | (() => DefaultTime)
+    component?: <T extends DateValue>(props: CalendarProps<T>) => ReactNode
+}
+
+export function FormCalendar<
+    ValueMode extends TimeValueMode = "date",
+    FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined,
+>({ field, valueMode, emptyValue, dateMode, defaultTime, component: Calendar2 = Calendar, ...rest }: FormCalendarProps<ValueMode, FieldValue>): ReactNode {
+    const context = useContext(FormContext)
+    emptyValue ??= context.emptyValue
+
+    return (
+        <Calendar2
+            focusedValue={getFieldValue(field, dateMode)}
+            onFocusChange={getOnChange({ field, valueMode, emptyValue, defaultTime })}
+            {...getFieldProps(field)}
+            {...rest}
+        />
+    )
+}

package/src/components/FormCheckbox.tsx

@@ -1,34 +1,34 @@
-"use client"
-
-import { ComponentPropsWithoutRef, ReactNode } from "react"
-import { As, Checkbox, CheckboxProps, MergeWithAs } from "@heroui/react"
-import { Field } from "soda-tanstack-form"
-
-import { getFieldProps } from "../utils/getFieldProps"
-
-export type FormCheckboxProps<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input"> = MergeWithAs<
-    ComponentPropsWithoutRef<"input">,
-    ComponentPropsWithoutRef<AsComponent>,
-    CheckboxProps,
-    AsComponent
-> & {
-    field: Field<FieldValue>
-    component?: <AsComponent extends As = "input">(
-        props: MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, CheckboxProps, AsComponent>,
-    ) => ReactNode
-}
-
-export function FormCheckbox<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input">({
-    field,
-    component: Checkbox2 = Checkbox,
-    ...rest
-}: FormCheckboxProps<FieldValue, AsComponent>): ReactNode {
-    return (
-        <Checkbox2<AsComponent>
-            isSelected={field.state.value ?? false}
-            onValueChange={field.handleChange as (value: boolean) => void}
-            {...getFieldProps(field, true)}
-            {...rest}
-        />
-    )
-}
+"use client"
+
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, Checkbox, CheckboxProps, MergeWithAs } from "@heroui/react"
+import { Field } from "soda-tanstack-form"
+
+import { getFieldProps } from "../utils/getFieldProps"
+
+export type FormCheckboxProps<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input"> = MergeWithAs<
+    ComponentPropsWithoutRef<"input">,
+    ComponentPropsWithoutRef<AsComponent>,
+    CheckboxProps,
+    AsComponent
+> & {
+    field: Field<FieldValue>
+    component?: <AsComponent extends As = "input">(
+        props: MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, CheckboxProps, AsComponent>,
+    ) => ReactNode
+}
+
+export function FormCheckbox<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input">({
+    field,
+    component: Checkbox2 = Checkbox,
+    ...rest
+}: FormCheckboxProps<FieldValue, AsComponent>): ReactNode {
+    return (
+        <Checkbox2<AsComponent>
+            isSelected={field.state.value ?? false}
+            onValueChange={field.handleChange as (value: boolean) => void}
+            {...getFieldProps(field, true)}
+            {...rest}
+        />
+    )
+}

package/src/components/FormCheckboxGroup.tsx

@@ -1,34 +1,34 @@
-"use client"
-
-import { ComponentPropsWithoutRef, ReactNode } from "react"
-import { As, CheckboxGroup, CheckboxGroupProps, MergeWithAs } from "@heroui/react"
-import { Field } from "soda-tanstack-form"
-
-import { getFieldProps } from "../utils/getFieldProps"
-
-export type FormCheckboxGroupProps<FieldValue extends string[] | null | undefined = string[] | null | undefined, AsComponent extends As = "div"> = MergeWithAs<
-    ComponentPropsWithoutRef<"div">,
-    ComponentPropsWithoutRef<AsComponent>,
-    CheckboxGroupProps,
-    AsComponent
-> & {
-    field: Field<FieldValue>
-    component?: <AsComponent extends As = "div">(
-        props: MergeWithAs<ComponentPropsWithoutRef<"div">, ComponentPropsWithoutRef<AsComponent>, CheckboxGroupProps, AsComponent>,
-    ) => ReactNode
-}
-
-export function FormCheckboxGroup<FieldValue extends string[] | null | undefined = string[] | null | undefined, AsComponent extends As = "div">({
-    field,
-    component: CheckboxGroup2 = CheckboxGroup,
-    ...rest
-}: FormCheckboxGroupProps<FieldValue, AsComponent>): ReactNode {
-    return (
-        <CheckboxGroup2<AsComponent>
-            value={field.state.value ?? []}
-            onValueChange={field.handleChange as (value: string[]) => void}
-            {...getFieldProps(field)}
-            {...rest}
-        />
-    )
-}
+"use client"
+
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, CheckboxGroup, CheckboxGroupProps, MergeWithAs } from "@heroui/react"
+import { Field } from "soda-tanstack-form"
+
+import { getFieldProps } from "../utils/getFieldProps"
+
+export type FormCheckboxGroupProps<FieldValue extends string[] | null | undefined = string[] | null | undefined, AsComponent extends As = "div"> = MergeWithAs<
+    ComponentPropsWithoutRef<"div">,
+    ComponentPropsWithoutRef<AsComponent>,
+    CheckboxGroupProps,
+    AsComponent
+> & {
+    field: Field<FieldValue>
+    component?: <AsComponent extends As = "div">(
+        props: MergeWithAs<ComponentPropsWithoutRef<"div">, ComponentPropsWithoutRef<AsComponent>, CheckboxGroupProps, AsComponent>,
+    ) => ReactNode
+}
+
+export function FormCheckboxGroup<FieldValue extends string[] | null | undefined = string[] | null | undefined, AsComponent extends As = "div">({
+    field,
+    component: CheckboxGroup2 = CheckboxGroup,
+    ...rest
+}: FormCheckboxGroupProps<FieldValue, AsComponent>): ReactNode {
+    return (
+        <CheckboxGroup2<AsComponent>
+            value={field.state.value ?? []}
+            onValueChange={field.handleChange as (value: string[]) => void}
+            {...getFieldProps(field)}
+            {...rest}
+        />
+    )
+}

package/src/components/FormDateInput.tsx

@@ -1,41 +1,41 @@
-"use client"
-
-import { ReactNode, useContext } from "react"
-import { DateInput, DateInputProps, DateValue } from "@heroui/react"
-import { FieldComponentProps } from "soda-tanstack-form"
-import { StrictOmit } from "soda-type"
-
-import { EmptyValue, FormContext } from "@/components/FormProvider"
-
-import { getFieldProps } from "@/utils/getFieldProps"
-import { DefaultTime } from "@/utils/getTimeValue"
-import { DateMode } from "@/utils/parseTime"
-import { TimeValueMode, TimeValueModeMap, getFieldValue, getOnChange } from "@/utils/time"
-
-export interface FormDateInputProps<
-    ValueMode extends TimeValueMode = "date",
-    FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined,
-> extends StrictOmit<FieldComponentProps<typeof DateInput, FieldValue>, never> {
-    valueMode?: ValueMode
-    emptyValue?: EmptyValue
-    dateMode?: DateMode
-    defaultTime?: DefaultTime | (() => DefaultTime)
-    component?: <T extends DateValue>(props: DateInputProps<T>) => ReactNode
-}
-
-export function FormDateInput<
-    ValueMode extends TimeValueMode = "date",
-    FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined,
->({ field, valueMode, emptyValue, dateMode, defaultTime, component: DateInput2 = DateInput, ...rest }: FormDateInputProps<ValueMode, FieldValue>): ReactNode {
-    const context = useContext(FormContext)
-    emptyValue ??= context.emptyValue
-
-    return (
-        <DateInput2
-            value={getFieldValue(field, dateMode)}
-            onChange={getOnChange({ field, valueMode, emptyValue, defaultTime })}
-            {...getFieldProps(field)}
-            {...rest}
-        />
-    )
-}
+"use client"
+
+import { ReactNode, useContext } from "react"
+import { DateInput, DateInputProps, DateValue } from "@heroui/react"
+import { FieldComponentProps } from "soda-tanstack-form"
+import { StrictOmit } from "soda-type"
+
+import { EmptyValue, FormContext } from "@/components/FormProvider"
+
+import { getFieldProps } from "@/utils/getFieldProps"
+import { DefaultTime } from "@/utils/getTimeValue"
+import { DateMode } from "@/utils/parseTime"
+import { TimeValueMode, TimeValueModeMap, getFieldValue, getOnChange } from "@/utils/time"
+
+export interface FormDateInputProps<
+    ValueMode extends TimeValueMode = "date",
+    FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined,
+> extends StrictOmit<FieldComponentProps<typeof DateInput, FieldValue>, never> {
+    valueMode?: ValueMode
+    emptyValue?: EmptyValue
+    dateMode?: DateMode
+    defaultTime?: DefaultTime | (() => DefaultTime)
+    component?: <T extends DateValue>(props: DateInputProps<T>) => ReactNode
+}
+
+export function FormDateInput<
+    ValueMode extends TimeValueMode = "date",
+    FieldValue extends TimeValueModeMap<ValueMode> | null | undefined = TimeValueModeMap<ValueMode> | null | undefined,
+>({ field, valueMode, emptyValue, dateMode, defaultTime, component: DateInput2 = DateInput, ...rest }: FormDateInputProps<ValueMode, FieldValue>): ReactNode {
+    const context = useContext(FormContext)
+    emptyValue ??= context.emptyValue
+
+    return (
+        <DateInput2
+            value={getFieldValue(field, dateMode)}
+            onChange={getOnChange({ field, valueMode, emptyValue, defaultTime })}
+            {...getFieldProps(field)}
+            {...rest}
+        />
+    )
+}