@s_mart/form 2.2.2 → 2.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +21 -21
- package/dist/index.js +14 -14
- package/dist/index.mjs +14 -14
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -7,31 +7,31 @@ interface IFormProps<T> extends PropsWithChildren, UseFormProps {
|
|
|
7
7
|
}
|
|
8
8
|
declare function Form({ children, onSubmit, ...rest }: IFormProps<any>): JSX.Element;
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
type ControllerTextField = Omit<ControllerProps, 'render' | 'control'>;
|
|
11
|
+
type Masks = 'cpf' | 'cnpj' | 'cpfCnpj' | 'cep' | 'telefone' | 'decimal' | 'porcentagem' | 'numero' | 'placa' | 'valor';
|
|
12
|
+
type TextFieldProps = TextFieldProps$1 & ControllerTextField & {
|
|
13
13
|
mask?: Masks;
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
declare const TextField: ({ name, rules, defaultValue, shouldUnregister, label, required, mask, variant, ...rest }: TextFieldProps) => JSX.Element;
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
type ControllerSelect = Omit<ControllerProps, 'render' | 'control'>;
|
|
19
|
+
type SelectOption = {
|
|
20
20
|
label: string;
|
|
21
21
|
value: string | number | readonly string[] | undefined;
|
|
22
22
|
};
|
|
23
|
-
|
|
23
|
+
type SelectProps = SelectProps$1 & ControllerSelect & {
|
|
24
24
|
options: SelectOption[];
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
declare const Select: ({ name, rules, defaultValue, shouldUnregister, label, required, options, ...rest }: SelectProps) => JSX.Element;
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
type ControllerSearchable = Omit<ControllerProps, 'render' | 'control'>;
|
|
30
|
+
type SearchableOption = {
|
|
31
31
|
label: string;
|
|
32
32
|
value: string | number | readonly string[] | undefined;
|
|
33
33
|
} | string;
|
|
34
|
-
|
|
34
|
+
type SearchableProps = Omit<AutocompleteProps<SearchableOption, true, true, true>, 'renderInput'> & ControllerSearchable & {
|
|
35
35
|
/**
|
|
36
36
|
* Opções do autocomplete
|
|
37
37
|
* @default []
|
|
@@ -58,12 +58,12 @@ declare type SearchableProps = Omit<AutocompleteProps<SearchableOption, true, tr
|
|
|
58
58
|
|
|
59
59
|
declare const Searchable: ({ name, rules, defaultValue, shouldUnregister, label, required, options, textFieldProps, ...rest }: SearchableProps) => JSX.Element;
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
type ControllerCreatable = Omit<ControllerProps, 'render' | 'control'>;
|
|
62
|
+
type CreatableOption = {
|
|
63
63
|
label: string;
|
|
64
64
|
value?: string | number | readonly string[] | undefined;
|
|
65
65
|
} | string;
|
|
66
|
-
|
|
66
|
+
type CreatableProps = Omit<AutocompleteProps<CreatableOption, true, true, true>, 'renderInput'> & ControllerCreatable & {
|
|
67
67
|
/**
|
|
68
68
|
* Opções do autocomplete
|
|
69
69
|
* @default []
|
|
@@ -116,8 +116,8 @@ declare type CreatableProps = Omit<AutocompleteProps<CreatableOption, true, true
|
|
|
116
116
|
|
|
117
117
|
declare const Creatable: ({ name, rules, defaultValue, shouldUnregister, label, required, options, onCreateOption, textFieldProps, hideAddButton, ...rest }: CreatableProps) => JSX.Element;
|
|
118
118
|
|
|
119
|
-
|
|
120
|
-
|
|
119
|
+
type ControllerCheckbox = Omit<ControllerProps, 'render' | 'control'>;
|
|
120
|
+
type CheckboxProps = CheckboxProps$1 & ControllerCheckbox & {
|
|
121
121
|
/**
|
|
122
122
|
* O nome do checkbox que será renderizado na tela
|
|
123
123
|
* @default ''
|
|
@@ -138,8 +138,8 @@ declare type CheckboxProps = CheckboxProps$1 & ControllerCheckbox & {
|
|
|
138
138
|
|
|
139
139
|
declare const Checkbox: ({ name, rules, defaultValue, shouldUnregister, label, labelPlacement, required, ...rest }: CheckboxProps) => JSX.Element;
|
|
140
140
|
|
|
141
|
-
|
|
142
|
-
|
|
141
|
+
type ControllerSwitch = Omit<ControllerProps, 'render' | 'control'>;
|
|
142
|
+
type SwitchProps = SwitchProps$1 & ControllerSwitch & {
|
|
143
143
|
/**
|
|
144
144
|
* O nome do switch que será renderizado na tela
|
|
145
145
|
* @default ''
|
|
@@ -160,7 +160,7 @@ declare type SwitchProps = SwitchProps$1 & ControllerSwitch & {
|
|
|
160
160
|
|
|
161
161
|
declare const Switch: ({ name, rules, defaultValue, shouldUnregister, label, labelPlacement, ...rest }: SwitchProps) => JSX.Element;
|
|
162
162
|
|
|
163
|
-
|
|
163
|
+
type RadioProps = RadioProps$1 & {
|
|
164
164
|
/**
|
|
165
165
|
* O nome do checkbox que será renderizado na tela
|
|
166
166
|
* @default ''
|
|
@@ -181,8 +181,8 @@ declare type RadioProps = RadioProps$1 & {
|
|
|
181
181
|
|
|
182
182
|
declare const RadioButton: ({ label, labelPlacement, ...rest }: RadioProps) => JSX.Element;
|
|
183
183
|
|
|
184
|
-
|
|
185
|
-
|
|
184
|
+
type ControllerRadioGroup = Omit<ControllerProps, 'render' | 'control'>;
|
|
185
|
+
type RadioGroupProps = RadioGroupProps$1 & ControllerRadioGroup & {
|
|
186
186
|
/**
|
|
187
187
|
* O nome do checkbox que será renderizado na tela
|
|
188
188
|
* @default ''
|
|
@@ -219,8 +219,8 @@ declare type RadioGroupProps = RadioGroupProps$1 & ControllerRadioGroup & {
|
|
|
219
219
|
|
|
220
220
|
declare const RadioGroup: ({ name, rules, defaultValue, shouldUnregister, label, required, children, orientation, ...rest }: RadioGroupProps) => JSX.Element;
|
|
221
221
|
|
|
222
|
-
|
|
223
|
-
|
|
222
|
+
type ControllerSlider = Omit<ControllerProps, 'render' | 'control'>;
|
|
223
|
+
type SliderProps = SliderProps$1 & ControllerSlider & {
|
|
224
224
|
/**
|
|
225
225
|
* O nome do switch que será renderizado na tela
|
|
226
226
|
* @default ''
|
package/dist/index.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var qe=Object.create;var U=Object.defineProperty,Me=Object.defineProperties,ke=Object.getOwnPropertyDescriptor,Ve=Object.getOwnPropertyDescriptors,ve=Object.getOwnPropertyNames,W=Object.getOwnPropertySymbols,Ue=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty,de=Object.prototype.propertyIsEnumerable;var se=(e,r,o)=>r in e?U(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,i=(e,r)=>{for(var o in r||(r={}))re.call(r,o)&&se(e,o,r[o]);if(W)for(var o of W(r))de.call(r,o)&&se(e,o,r[o]);return e},b=(e,r)=>Me(e,Ve(r));var s=(e,r)=>{var o={};for(var l in e)re.call(e,l)&&r.indexOf(l)<0&&(o[l]=e[l]);if(e!=null&&W)for(var l of W(e))r.indexOf(l)<0&&de.call(e,l)&&(o[l]=e[l]);return o};var Ne=(e,r)=>{for(var o in r)U(e,o,{get:r[o],enumerable:!0})},me=(e,r,o,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of ve(r))!re.call(e,t)&&t!==o&&U(e,t,{get:()=>r[t],enumerable:!(l=ke(r,t))||l.enumerable});return e};var pe=(e,r,o)=>(o=e!=null?qe(Ue(e)):{},me(r||!e||!e.__esModule?U(o,"default",{value:e,enumerable:!0}):o,e)),ze=e=>me(U({},"__esModule",{value:!0}),e);var je={};Ne(je,{Checkbox:()=>Te,Creatable:()=>Ie,Form:()=>fe,RadioButton:()=>De,RadioGroup:()=>Le,Searchable:()=>Pe,Select:()=>Ce,Slider:()=>$e,Switch:()=>Ae,TextField:()=>ge});module.exports=ze(je);var ue=require("react"),_=require("react-hook-form");var oe=require("react/jsx-runtime");function Oe(l){var t=l,{children:e,onSubmit:r}=t,o=s(t,["children","onSubmit"]);let d=(0,_.useForm)(o);return(0,ue.useEffect)(()=>{d.reset(o.defaultValues)},[o.defaultValues,d.reset]),(0,oe.jsx)(_.FormProvider,b(i({},d),{children:(0,oe.jsx)("form",{onSubmit:d.handleSubmit(r),children:e})}))}var fe=Oe;var ye=require("react"),B=require("react-hook-form"),H=require("phosphor-react"),$=require("@mui/material"),be=pe(require("@s_mart/masks"));var te=require("@mui/material"),ce=require("@s_mart/utils"),N=require("react/jsx-runtime"),x=({label:e,required:r,regular:o})=>(0,N.jsxs)("span",{style:{display:"flex",alignItems:"center",gap:(0,ce.toRem)(2)},children:[(0,N.jsx)(te.Typography,{variant:"caption",fontWeight:o?400:700,style:{display:"flex",alignItems:"center"},children:e}),r&&(0,N.jsx)(te.Typography,{variant:"caption",fontWeight:900,color:"error",children:"*"})]});var xe=require("react-hook-form"),he=require("@s_mart/core"),Fe=require("react/jsx-runtime"),y=({name:e})=>{var o,l,t;let r=(0,xe.useFormContext)();return(l=(o=r==null?void 0:r.formState)==null?void 0:o.errors)!=null&&l[e]?(0,Fe.jsx)(he.Indicator,{severity:"error",children:(t=r.formState.errors[e])==null?void 0:t.message}):null};var S=require("react/jsx-runtime"),We=c=>{var a=c,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,required:d,mask:n,variant:f="outlined"}=a,p=s(a,["name","rules","defaultValue","shouldUnregister","label","required","mask","variant"]);let u=(0,B.useFormContext)();if(!u)throw new Error("Para usar o <TextField /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let[F,C]=(0,ye.useState)(!1),E=m=>n?be[n].format(m):m,g=m=>n?be[n].parse(m):m,O=m=>{if(!m||n!=="porcentagem")return;m==null||m.stopPropagation();let P=(m==null?void 0:m.target).value;if(P){let G=String(P);if(G.length>0){let ae=G.indexOf("%");ae>-1&&(m.currentTarget.selectionEnd=ae)}}};return(0,S.jsx)(B.Controller,{control:u.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:m,onChange:P}})=>(0,S.jsxs)($.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,S.jsx)(x,{label:t,required:d}),(0,S.jsx)($.TextField,b(i({size:"small",variant:f,autoComplete:"off",defaultValue:o,value:E(m||""),onChange:G=>P(g(G.target.value))},p),{type:p.type==="password"?F?"text":"password":p.type,InputProps:i({onKeyDown:O,endAdornment:p.type==="password"&&(0,S.jsx)($.InputAdornment,{position:"end",onClick:()=>C(!F),style:{cursor:"pointer"},children:F?(0,S.jsx)(H.Eye,{size:20}):(0,S.jsx)(H.EyeSlash,{size:20})})},p.InputProps)})),(0,S.jsx)(y,{name:e})]})})},ge=We;var K=require("react-hook-form"),q=require("@mui/material");var I=require("react/jsx-runtime"),_e=p=>{var c=p,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n}=c,f=s(c,["name","rules","defaultValue","shouldUnregister","label","required","options"]);let a=(0,K.useFormContext)();if(!a)throw new Error("Para usar o <Select /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,I.jsx)(K.Controller,{control:a.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:u,onChange:F}})=>(0,I.jsxs)(q.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,I.jsx)(x,{label:t,required:d}),(0,I.jsx)(q.Select,b(i({size:"small",variant:"outlined",autoComplete:"off",value:u||"",onChange:F},f),{children:n==null?void 0:n.map((C,E)=>(0,I.jsx)(q.MenuItem,{value:C.value,children:C.label},E))})),(0,I.jsx)(y,{name:e})]})})},Ce=_e;var J=require("react-hook-form"),M=require("@mui/material");var T=require("react/jsx-runtime"),Be=c=>{var a=c,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n,textFieldProps:f}=a,p=s(a,["name","rules","defaultValue","shouldUnregister","label","required","options","textFieldProps"]);let u=(0,J.useFormContext)();if(!u)throw new Error("Para usar o <Searchable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,T.jsx)(J.Controller,{control:u.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{onChange:F}})=>(0,T.jsxs)(M.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,T.jsx)(x,{label:t,required:d}),(0,T.jsx)(M.Autocomplete,b(i({size:"small",onChange:(C,E)=>F(E),options:n,noOptionsText:"Nenhuma op\xE7\xE3o encontrada"},p),{renderInput:C=>(0,T.jsx)(M.TextField,i(i({},C),f))})),(0,T.jsx)(y,{name:e})]})})},Pe=Be;var Q=require("react-hook-form"),Ge=require("phosphor-react"),A=require("@mui/material");var w=require("@s_mart/utils"),le=pe(require("@emotion/styled")),ie=require("@emotion/react"),Se=ie.css`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
|
-
`,
|
|
5
|
+
`,He=e=>ie.css`
|
|
6
6
|
.MuiAutocomplete-endAdornment {
|
|
7
7
|
position: relative;
|
|
8
8
|
right: 0;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.creatable {
|
|
12
|
-
${
|
|
12
|
+
${Se}
|
|
13
13
|
|
|
14
14
|
.divider {
|
|
15
15
|
width: 1px;
|
|
16
|
-
height: ${(0,
|
|
16
|
+
height: ${(0,w.toRem)(20)};
|
|
17
17
|
background-color: ${e.palette.grey[400]};
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
color: ${e.palette.grey[600]};
|
|
25
25
|
border-radius: 50%;
|
|
26
26
|
|
|
27
|
-
margin: 0 ${(0,
|
|
28
|
-
width: ${(0,
|
|
29
|
-
height: ${(0,
|
|
27
|
+
margin: 0 ${(0,w.toRem)(6)};
|
|
28
|
+
width: ${(0,w.toRem)(28)};
|
|
29
|
+
height: ${(0,w.toRem)(28)};
|
|
30
30
|
|
|
31
31
|
&:hover {
|
|
32
32
|
cursor: pointer;
|
|
@@ -35,26 +35,26 @@
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
`,
|
|
38
|
+
`,we=le.default.div`
|
|
39
39
|
display: flex;
|
|
40
40
|
|
|
41
41
|
div.endAdornments {
|
|
42
42
|
position: absolute;
|
|
43
43
|
right: 0;
|
|
44
44
|
|
|
45
|
-
${
|
|
45
|
+
${Se}
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
${({hideAddButton:e,theme:r})=>!e&&
|
|
49
|
-
`,
|
|
48
|
+
${({hideAddButton:e,theme:r})=>!e&&He(r)}
|
|
49
|
+
`,Ee=le.default.div`
|
|
50
50
|
color: ${({theme:e})=>e.palette.text.primary};
|
|
51
51
|
|
|
52
|
-
padding: ${(0,
|
|
53
|
-
margin: ${(0,
|
|
52
|
+
padding: ${(0,w.toRem)(6)} ${(0,w.toRem)(16)};
|
|
53
|
+
margin: ${(0,w.toRem)(-6)} ${(0,w.toRem)(-16)};
|
|
54
54
|
|
|
55
55
|
&:hover {
|
|
56
56
|
cursor: pointer;
|
|
57
57
|
transition: background-color 0.2s ease-in-out;
|
|
58
58
|
background-color: ${({theme:e})=>e.palette.grey[100]};
|
|
59
59
|
}
|
|
60
|
-
`;var
|
|
60
|
+
`;var h=require("react/jsx-runtime"),Ke=u=>{var F=u,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n,onCreateOption:f,textFieldProps:p,hideAddButton:c}=F,a=s(F,["name","rules","defaultValue","shouldUnregister","label","required","options","onCreateOption","textFieldProps","hideAddButton"]);let C=(0,Q.useFormContext)();if(!C)throw new Error("Para usar o <Creatable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let E=g=>{f?f(g):console.error("onCreateOption n\xE3o foi definido")};return(0,h.jsx)(Q.Controller,{control:C.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:g,onChange:O}})=>{let m=(g==null?void 0:g.label)||(g==null?void 0:g.value)||g;return(0,h.jsxs)(A.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,h.jsx)(x,{label:t,required:d}),(0,h.jsx)(we,{hideAddButton:c,children:(0,h.jsx)(A.Autocomplete,b(i({size:"small",fullWidth:!0,onChange:(P,G)=>O(G),options:n,noOptionsText:(0,h.jsx)(Ee,{onClick:()=>E(g),children:(0,h.jsxs)(A.Typography,{children:["Adicionar ",m&&`"${m}"`]})})},a),{renderInput:P=>{let G=c?P.InputProps:b(i({},P.InputProps),{endAdornment:(0,h.jsxs)("div",{className:"endAdornments",children:[P.InputProps.endAdornment,(0,h.jsxs)("div",{className:"creatable",children:[(0,h.jsx)("div",{className:"divider"}),(0,h.jsx)("div",{className:"button",onClick:()=>E(g),children:(0,h.jsx)(Ge.Plus,{size:18,weight:"bold"})})]})]})});return(0,h.jsx)(A.TextField,i(b(i({},P),{onChange:O,InputProps:G}),p))}}))}),(0,h.jsx)(y,{name:e})]})}})},Ie=Ke;var X=require("react-hook-form"),k=require("@mui/material");var D=require("react/jsx-runtime"),Je=p=>{var c=p,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,labelPlacement:d,required:n}=c,f=s(c,["name","rules","defaultValue","shouldUnregister","label","labelPlacement","required"]);let a=(0,X.useFormContext)();if(!a)throw new Error("Para usar o <Checkbox /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,D.jsx)(X.Controller,{control:a.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:u,onChange:F}})=>(0,D.jsxs)(k.Grid,{display:"flex",flexDirection:"column",children:[(0,D.jsx)(k.FormControlLabel,{control:(0,D.jsx)(k.Checkbox,i({value:u!=null?u:"",defaultValue:u,onChange:F},f)),label:(0,D.jsx)(x,{label:t,required:n,regular:!0}),labelPlacement:d||"end"}),(0,D.jsx)(y,{name:e})]})})},Te=Je;var Y=require("react-hook-form"),V=require("@mui/material");var L=require("react/jsx-runtime"),Qe=f=>{var p=f,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,labelPlacement:d}=p,n=s(p,["name","rules","defaultValue","shouldUnregister","label","labelPlacement"]);let c=(0,Y.useFormContext)();if(!c)throw new Error("Para usar o <Switch /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,L.jsx)(Y.Controller,{control:c.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:a,onChange:u}})=>(0,L.jsxs)(V.Grid,{display:"flex",flexDirection:"column",children:[(0,L.jsx)(V.FormControlLabel,{control:(0,L.jsx)(V.Switch,i({value:a!=null?a:"",defaultValue:a,onChange:u},n)),label:(0,L.jsx)(x,{label:t}),labelPlacement:d||"end"}),(0,L.jsx)(y,{name:e})]})})},Ae=Qe;var v=require("@mui/material");var z=require("react/jsx-runtime"),Xe=l=>{var t=l,{label:e,labelPlacement:r}=t,o=s(t,["label","labelPlacement"]);return(0,z.jsx)(v.Grid,{display:"flex",flexDirection:"column",children:(0,z.jsx)(v.FormControlLabel,{control:(0,z.jsx)(v.Radio,i({},o)),label:(0,z.jsx)(x,{label:e}),labelPlacement:r||"end"})})},De=Xe;var Z=require("react-hook-form"),j=require("@mui/material");var R=require("react/jsx-runtime"),Ye=c=>{var a=c,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,required:d,children:n,orientation:f="row"}=a,p=s(a,["name","rules","defaultValue","shouldUnregister","label","required","children","orientation"]);let u=(0,Z.useFormContext)();if(!u)throw new Error("Para usar o <RadioGroup /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,R.jsx)(Z.Controller,{control:u.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:F,onChange:C}})=>(0,R.jsxs)(j.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,R.jsx)(x,{label:t,required:d}),(0,R.jsx)(j.RadioGroup,b(i({value:F||"",onChange:C,name:e},p),{style:{display:"flex",flexDirection:f},children:n})),(0,R.jsx)(y,{name:e})]})})},Le=Ye;var ee=require("react-hook-form"),Re=require("@mui/material");var ne=require("react/jsx-runtime"),Ze=d=>{var n=d,{name:e,rules:r,defaultValue:o,shouldUnregister:l}=n,t=s(n,["name","rules","defaultValue","shouldUnregister"]);let f=(0,ee.useFormContext)();if(!f)throw new Error("Para usar o <Slider /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,ne.jsx)(ee.Controller,{control:f.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:p,onChange:c}})=>(0,ne.jsx)(Re.Slider,i({value:p||(t==null?void 0:t.min)||0,onChange:c,valueLabelDisplay:"auto"},t))})},$e=Ze;0&&(module.exports={Checkbox,Creatable,Form,RadioButton,RadioGroup,Searchable,Select,Slider,Switch,TextField});
|
package/dist/index.mjs
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import{FormProvider as
|
|
1
|
+
var X=Object.defineProperty,Y=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var R=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var V=(e,r,o)=>r in e?X(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,i=(e,r)=>{for(var o in r||(r={}))v.call(r,o)&&V(e,o,r[o]);if(R)for(var o of R(r))U.call(r,o)&&V(e,o,r[o]);return e},F=(e,r)=>Y(e,Z(r));var s=(e,r)=>{var o={};for(var l in e)v.call(e,l)&&r.indexOf(l)<0&&(o[l]=e[l]);if(e!=null&&R)for(var l of R(e))r.indexOf(l)<0&&U.call(e,l)&&(o[l]=e[l]);return o};import{useEffect as j}from"react";import{FormProvider as ee,useForm as re}from"react-hook-form";import{jsx as N}from"react/jsx-runtime";function oe(l){var t=l,{children:e,onSubmit:r}=t,o=s(t,["children","onSubmit"]);let d=re(o);return j(()=>{d.reset(o.defaultValues)},[o.defaultValues,d.reset]),N(ee,F(i({},d),{children:N("form",{onSubmit:d.handleSubmit(r),children:e})}))}var te=oe;import{useState as de}from"react";import{Controller as me,useFormContext as pe}from"react-hook-form";import{Eye as ue,EyeSlash as fe}from"phosphor-react";import{Grid as ce,InputAdornment as xe,TextField as he}from"@mui/material";import*as W from"@s_mart/masks";import{Typography as z}from"@mui/material";import{toRem as le}from"@s_mart/utils";import{jsx as O,jsxs as ie}from"react/jsx-runtime";var x=({label:e,required:r,regular:o})=>ie("span",{style:{display:"flex",alignItems:"center",gap:le(2)},children:[O(z,{variant:"caption",fontWeight:o?400:700,style:{display:"flex",alignItems:"center"},children:e}),r&&O(z,{variant:"caption",fontWeight:900,color:"error",children:"*"})]});import{useFormContext as ne}from"react-hook-form";import{Indicator as ae}from"@s_mart/core";import{jsx as se}from"react/jsx-runtime";var b=({name:e})=>{var o,l,t;let r=ne();return(l=(o=r==null?void 0:r.formState)==null?void 0:o.errors)!=null&&l[e]?se(ae,{severity:"error",children:(t=r.formState.errors[e])==null?void 0:t.message}):null};import{jsx as G,jsxs as ye}from"react/jsx-runtime";var Fe=c=>{var a=c,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,required:d,mask:n,variant:f="outlined"}=a,p=s(a,["name","rules","defaultValue","shouldUnregister","label","required","mask","variant"]);let u=pe();if(!u)throw new Error("Para usar o <TextField /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let[h,g]=de(!1),S=m=>n?W[n].format(m):m,y=m=>n?W[n].parse(m):m,L=m=>{if(!m||n!=="porcentagem")return;m==null||m.stopPropagation();let C=(m==null?void 0:m.target).value;if(C){let w=String(C);if(w.length>0){let k=w.indexOf("%");k>-1&&(m.currentTarget.selectionEnd=k)}}};return G(me,{control:u.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:m,onChange:C}})=>ye(ce,{display:"flex",flexDirection:"column",children:[t&&G(x,{label:t,required:d}),G(he,F(i({size:"small",variant:f,autoComplete:"off",defaultValue:o,value:S(m||""),onChange:w=>C(y(w.target.value))},p),{type:p.type==="password"?h?"text":"password":p.type,InputProps:i({onKeyDown:L,endAdornment:p.type==="password"&&G(xe,{position:"end",onClick:()=>g(!h),style:{cursor:"pointer"},children:h?G(ue,{size:20}):G(fe,{size:20})})},p.InputProps)})),G(b,{name:e})]})})},be=Fe;import{Controller as ge,useFormContext as Ce}from"react-hook-form";import{Grid as Pe,Select as Se,MenuItem as we}from"@mui/material";import{jsx as I,jsxs as Ie}from"react/jsx-runtime";var Ee=p=>{var c=p,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n}=c,f=s(c,["name","rules","defaultValue","shouldUnregister","label","required","options"]);let a=Ce();if(!a)throw new Error("Para usar o <Select /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return I(ge,{control:a.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:u,onChange:h}})=>Ie(Pe,{display:"flex",flexDirection:"column",children:[t&&I(x,{label:t,required:d}),I(Se,F(i({size:"small",variant:"outlined",autoComplete:"off",value:u||"",onChange:h},f),{children:n==null?void 0:n.map((g,S)=>I(we,{value:g.value,children:g.label},S))})),I(b,{name:e})]})})},Ge=Ee;import{Controller as Te,useFormContext as Ae}from"react-hook-form";import{Grid as De,Autocomplete as Le,TextField as Re}from"@mui/material";import{jsx as T,jsxs as Me}from"react/jsx-runtime";var $e=c=>{var a=c,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n,textFieldProps:f}=a,p=s(a,["name","rules","defaultValue","shouldUnregister","label","required","options","textFieldProps"]);let u=Ae();if(!u)throw new Error("Para usar o <Searchable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return T(Te,{control:u.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{onChange:h}})=>Me(De,{display:"flex",flexDirection:"column",children:[t&&T(x,{label:t,required:d}),T(Le,F(i({size:"small",onChange:(g,S)=>h(S),options:n,noOptionsText:"Nenhuma op\xE7\xE3o encontrada"},p),{renderInput:g=>T(Re,i(i({},g),f))})),T(b,{name:e})]})})},qe=$e;import{Controller as Ve,useFormContext as ve}from"react-hook-form";import{Plus as Ue}from"phosphor-react";import{Grid as Ne,Autocomplete as ze,TextField as Oe,Typography as We}from"@mui/material";import{toRem as E}from"@s_mart/utils";import _ from"@emotion/styled";import{css as B}from"@emotion/react";var H=B`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
|
-
`,
|
|
5
|
+
`,ke=e=>B`
|
|
6
6
|
.MuiAutocomplete-endAdornment {
|
|
7
7
|
position: relative;
|
|
8
8
|
right: 0;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.creatable {
|
|
12
|
-
${
|
|
12
|
+
${H}
|
|
13
13
|
|
|
14
14
|
.divider {
|
|
15
15
|
width: 1px;
|
|
16
|
-
height: ${
|
|
16
|
+
height: ${E(20)};
|
|
17
17
|
background-color: ${e.palette.grey[400]};
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -24,9 +24,9 @@ import{FormProvider as z,useForm as O}from"react-hook-form";import{jsx as D}from
|
|
|
24
24
|
color: ${e.palette.grey[600]};
|
|
25
25
|
border-radius: 50%;
|
|
26
26
|
|
|
27
|
-
margin: 0 ${
|
|
28
|
-
width: ${
|
|
29
|
-
height: ${
|
|
27
|
+
margin: 0 ${E(6)};
|
|
28
|
+
width: ${E(28)};
|
|
29
|
+
height: ${E(28)};
|
|
30
30
|
|
|
31
31
|
&:hover {
|
|
32
32
|
cursor: pointer;
|
|
@@ -35,26 +35,26 @@ import{FormProvider as z,useForm as O}from"react-hook-form";import{jsx as D}from
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
`,
|
|
38
|
+
`,K=_.div`
|
|
39
39
|
display: flex;
|
|
40
40
|
|
|
41
41
|
div.endAdornments {
|
|
42
42
|
position: absolute;
|
|
43
43
|
right: 0;
|
|
44
44
|
|
|
45
|
-
${
|
|
45
|
+
${H}
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
${({hideAddButton:e,theme:r})=>!e&&
|
|
49
|
-
`,
|
|
48
|
+
${({hideAddButton:e,theme:r})=>!e&&ke(r)}
|
|
49
|
+
`,J=_.div`
|
|
50
50
|
color: ${({theme:e})=>e.palette.text.primary};
|
|
51
51
|
|
|
52
|
-
padding: ${
|
|
53
|
-
margin: ${
|
|
52
|
+
padding: ${E(6)} ${E(16)};
|
|
53
|
+
margin: ${E(-6)} ${E(-16)};
|
|
54
54
|
|
|
55
55
|
&:hover {
|
|
56
56
|
cursor: pointer;
|
|
57
57
|
transition: background-color 0.2s ease-in-out;
|
|
58
58
|
background-color: ${({theme:e})=>e.palette.grey[100]};
|
|
59
59
|
}
|
|
60
|
-
`;import{jsx as
|
|
60
|
+
`;import{jsx as P,jsxs as $}from"react/jsx-runtime";var _e=u=>{var h=u,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n,onCreateOption:f,textFieldProps:p,hideAddButton:c}=h,a=s(h,["name","rules","defaultValue","shouldUnregister","label","required","options","onCreateOption","textFieldProps","hideAddButton"]);let g=ve();if(!g)throw new Error("Para usar o <Creatable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let S=y=>{f?f(y):console.error("onCreateOption n\xE3o foi definido")};return P(Ve,{control:g.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:y,onChange:L}})=>{let m=(y==null?void 0:y.label)||(y==null?void 0:y.value)||y;return $(Ne,{display:"flex",flexDirection:"column",children:[t&&P(x,{label:t,required:d}),P(K,{hideAddButton:c,children:P(ze,F(i({size:"small",fullWidth:!0,onChange:(C,w)=>L(w),options:n,noOptionsText:P(J,{onClick:()=>S(y),children:$(We,{children:["Adicionar ",m&&`"${m}"`]})})},a),{renderInput:C=>{let w=c?C.InputProps:F(i({},C.InputProps),{endAdornment:$("div",{className:"endAdornments",children:[C.InputProps.endAdornment,$("div",{className:"creatable",children:[P("div",{className:"divider"}),P("div",{className:"button",onClick:()=>S(y),children:P(Ue,{size:18,weight:"bold"})})]})]})});return P(Oe,i(F(i({},C),{onChange:L,InputProps:w}),p))}}))}),P(b,{name:e})]})}})},Be=_e;import{Controller as He,useFormContext as Ke}from"react-hook-form";import{Grid as Je,Checkbox as Qe,FormControlLabel as Xe}from"@mui/material";import{jsx as A,jsxs as je}from"react/jsx-runtime";var Ye=p=>{var c=p,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,labelPlacement:d,required:n}=c,f=s(c,["name","rules","defaultValue","shouldUnregister","label","labelPlacement","required"]);let a=Ke();if(!a)throw new Error("Para usar o <Checkbox /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return A(He,{control:a.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:u,onChange:h}})=>je(Je,{display:"flex",flexDirection:"column",children:[A(Xe,{control:A(Qe,i({value:u!=null?u:"",defaultValue:u,onChange:h},f)),label:A(x,{label:t,required:n,regular:!0}),labelPlacement:d||"end"}),A(b,{name:e})]})})},Ze=Ye;import{Controller as er,useFormContext as rr}from"react-hook-form";import{Grid as or,Switch as tr,FormControlLabel as lr}from"@mui/material";import{jsx as D,jsxs as ar}from"react/jsx-runtime";var ir=f=>{var p=f,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,labelPlacement:d}=p,n=s(p,["name","rules","defaultValue","shouldUnregister","label","labelPlacement"]);let c=rr();if(!c)throw new Error("Para usar o <Switch /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return D(er,{control:c.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:a,onChange:u}})=>ar(or,{display:"flex",flexDirection:"column",children:[D(lr,{control:D(tr,i({value:a!=null?a:"",defaultValue:a,onChange:u},n)),label:D(x,{label:t}),labelPlacement:d||"end"}),D(b,{name:e})]})})},nr=ir;import{Grid as sr,Radio as dr,FormControlLabel as mr}from"@mui/material";import{jsx as q}from"react/jsx-runtime";var pr=l=>{var t=l,{label:e,labelPlacement:r}=t,o=s(t,["label","labelPlacement"]);return q(sr,{display:"flex",flexDirection:"column",children:q(mr,{control:q(dr,i({},o)),label:q(x,{label:e}),labelPlacement:r||"end"})})},ur=pr;import{Controller as fr,useFormContext as cr}from"react-hook-form";import{Grid as xr,RadioGroup as hr}from"@mui/material";import{jsx as M,jsxs as yr}from"react/jsx-runtime";var Fr=c=>{var a=c,{name:e,rules:r,defaultValue:o,shouldUnregister:l,label:t,required:d,children:n,orientation:f="row"}=a,p=s(a,["name","rules","defaultValue","shouldUnregister","label","required","children","orientation"]);let u=cr();if(!u)throw new Error("Para usar o <RadioGroup /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return M(fr,{control:u.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:h,onChange:g}})=>yr(xr,{display:"flex",flexDirection:"column",children:[t&&M(x,{label:t,required:d}),M(hr,F(i({value:h||"",onChange:g,name:e},p),{style:{display:"flex",flexDirection:f},children:n})),M(b,{name:e})]})})},br=Fr;import{Controller as gr,useFormContext as Cr}from"react-hook-form";import{Slider as Pr}from"@mui/material";import{jsx as Q}from"react/jsx-runtime";var Sr=d=>{var n=d,{name:e,rules:r,defaultValue:o,shouldUnregister:l}=n,t=s(n,["name","rules","defaultValue","shouldUnregister"]);let f=Cr();if(!f)throw new Error("Para usar o <Slider /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return Q(gr,{control:f.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:p,onChange:c}})=>Q(Pr,i({value:p||(t==null?void 0:t.min)||0,onChange:c,valueLabelDisplay:"auto"},t))})},wr=Sr;export{Ze as Checkbox,Be as Creatable,te as Form,ur as RadioButton,br as RadioGroup,qe as Searchable,Ge as Select,wr as Slider,nr as Switch,be as TextField};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@s_mart/form",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.4",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"react-dom": ">=18.0.0",
|
|
30
30
|
"typescript": ">=4.5.3",
|
|
31
31
|
"react-hook-form": ">=7.36.1",
|
|
32
|
-
"@mui/material": ">=5.
|
|
32
|
+
"@mui/material": ">=5.11.2",
|
|
33
33
|
"@types/react": ">=18.0.18",
|
|
34
34
|
"@types/react-dom": ">=18.0.6",
|
|
35
35
|
"@emotion/react": ">=11.10.4",
|