@itera-web/react-ui-form 1.23.0

package/README.md

@@ -0,0 +1 @@
+### [使用文档](http://iterative.keyboardecho.com/)

package/es/Form.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { type ControllerProps, type FieldPath, type FieldValues, UseFormReturn } from 'react-hook-form';
+import * as LabelPrimitive from '@radix-ui/react-label';
+type FormLayout = 'horizontal' | 'vertical';
+interface FormProps {
+    children: React.ReactNode;
+    layout?: FormLayout;
+    labelLayout?: FormLayout;
+    form: UseFormReturn<any>;
+    className?: string;
+    style?: React.CSSProperties;
+    onSubmit?: (data: any) => void;
+}
+interface FormLayoutContextValue {
+    layout: FormLayout;
+    labelLayout: FormLayout;
+}
+export declare const useFormLayout: () => FormLayoutContextValue;
+declare const Form: ({ children, layout, labelLayout, form, className, style, onSubmit, }: FormProps) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface FormLabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+    width?: number | string;
+}
+declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/es/index.d.ts

@@ -0,0 +1 @@
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField } from './Form';

package/es/index.js

@@ -0,0 +1 @@
+import*as e from"react";import*as r from"react-hook-form";import*as t from"@itera-web/react-ui-label";import*as o from"@itera-web/utils-cn";import*as a from"@radix-ui/react-slot";var n={d:(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o:(e,r)=>Object.prototype.hasOwnProperty.call(e,r)},l={};n.d(l,{l0:()=>b,NI:()=>w,pf:()=>I,Wi:()=>y,xJ:()=>g,lX:()=>N,zG:()=>C,YV:()=>F});const m=(e=>{var r={};return n.d(r,e),r})({createContext:()=>e.createContext,createElement:()=>e.createElement,forwardRef:()=>e.forwardRef,useContext:()=>e.useContext,useId:()=>e.useId});const i=(e=>{var r={};return n.d(r,e),r})({Controller:()=>r.Controller,FormProvider:()=>r.FormProvider,useFormContext:()=>r.useFormContext});const s=(e=>{var r={};return n.d(r,e),r})({Label:()=>t.Label});const c=(e=>{var r={};return n.d(r,e),r})({cn:()=>o.cn});const f=(e=>{var r={};return n.d(r,e),r})({Slot:()=>a.Slot});var d=function(){return d=Object.assign||function(e){for(var r,t=1,o=arguments.length;t<o;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},d.apply(this,arguments)},u=function(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(e);a<o.length;a++)r.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(e,o[a])&&(t[o[a]]=e[o[a]])}return t},p=m.createContext({layout:"vertical",labelLayout:"horizontal"}),v=m.createContext({}),x=function(){return m.useContext(p)},b=function(e){var r=e.children,t=e.layout,o=void 0===t?"vertical":t,a=e.labelLayout,n=void 0===a?"horizontal":a,l=e.form,s=e.className,f=e.style,u=e.onSubmit;return m.createElement(p.Provider,{value:{layout:o,labelLayout:n}},m.createElement(i.FormProvider,d({},l),m.createElement("form",{className:(0,c.cn)("flex gap-[36px] w-full","horizontal"===o?"flex-wrap items-end":"flex-col",s),onSubmit:u&&l.handleSubmit(u),style:f},r)))},y=function(e){var r=u(e,[]);return m.createElement(v.Provider,{value:{name:r.name}},m.createElement(i.Controller,d({},r)))},F=function(){var e=m.useContext(v),r=m.useContext(h),t=(0,i.useFormContext)(),o=t.getFieldState,a=t.formState,n=o(e.name,a);if(!e)throw new Error("useFormField should be used within <FormField>");var l=r.id;return d({id:l,name:e.name,formItemId:"".concat(l,"-form-item"),formDescriptionId:"".concat(l,"-form-item-description"),formMessageId:"".concat(l,"-form-item-message")},n)},h=m.createContext({}),g=m.forwardRef(function(e,r){var t=e.className,o=u(e,["className"]),a=m.useId(),n=x().labelLayout;return m.createElement(h.Provider,{value:{id:a}},m.createElement("div",d({className:(0,c.cn)("text-font relative","horizontal"===n?"flex items-center":"flex flex-col",t),ref:r},o)))});g.displayName="FormItem";var N=m.forwardRef(function(e,r){var t=e.className,o=e.width,a=void 0===o?80:o,n=u(e,["className","width"]),l=F(),i=l.error,f=l.formItemId,p=x().labelLayout;return m.createElement(s.Label,d({className:(0,c.cn)("text-font",i&&"text-destructive","horizontal"===p?"text-right pr-[6px]":"text-left pb-2",t),htmlFor:f,ref:r,style:{width:"number"==typeof a?"".concat(a,"px"):a}},n))});N.displayName="FormLabel";var w=m.forwardRef(function(e,r){var t=u(e,[]),o=F(),a=o.error,n=o.formItemId,l=o.formDescriptionId,i=o.formMessageId;return m.createElement(f.Slot,d({"aria-describedby":a?"".concat(l," ").concat(i):"".concat(l),"aria-invalid":!!a,id:n,ref:r},t))});w.displayName="FormControl";var I=m.forwardRef(function(e,r){var t=e.className,o=u(e,["className"]),a=F().formDescriptionId;return m.createElement("p",d({className:(0,c.cn)("text-sm text-muted-foreground",t),id:a,ref:r},o))});I.displayName="FormDescription";var C=m.forwardRef(function(e,r){var t,o=e.className,a=e.children,n=u(e,["className","children"]),l=F(),i=l.error,s=l.formMessageId,f=i?String(null!==(t=null==i?void 0:i.message)&&void 0!==t?t:""):a;return f?m.createElement("p",d({className:(0,c.cn)("absolute right-0 bottom-[-24px] h-2 text-sm font-medium text-amber-500",o),id:s,ref:r},n),f):null});C.displayName="FormMessage";var E=l.l0,O=l.NI,P=l.pf,S=l.Wi,L=l.xJ,j=l.lX,z=l.zG,R=l.YV;export{E as Form,O as FormControl,P as FormDescription,S as FormField,L as FormItem,j as FormLabel,z as FormMessage,R as useFormField};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@itera-web/react-ui-form",
+  "description": "表单",
+  "version": "1.23.0",
+  "main": "es/index.js",
+  "types": "es/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "itera-cli package",
+    "up": "npm publish"
+  },
+  "dependencies": {
+    "@itera-web/react-ui-label": "^1.20.0",
+    "@itera-web/utils-cn": "^1.20.0",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-slot": "^1.2.0",
+    "react-hook-form": "^7.55.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@itera-web/cli": "^1.1.45"
+  },
+  "gitHead": "691b2592db8668e5d52c9712bb906484b92cb79b"
+}