@s_mart/form 2.6.1 → 2.6.3
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 +14 -2
- package/dist/index.js +29 -22
- package/dist/index.mjs +21 -14
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { UseFormProps, UseFormReturn, ControllerProps, UseControllerProps } from 'react-hook-form';
|
|
2
2
|
import { TextFieldProps as TextFieldProps$1, SelectProps as SelectProps$1, SelectChangeEvent, AutocompleteProps, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SliderProps as SliderProps$1 } from '@mui/material';
|
|
3
|
-
import { DatePickerProps as DatePickerProps$1 } from '@mui/x-date-pickers';
|
|
3
|
+
import { DatePickerProps as DatePickerProps$1, TimePickerProps as TimePickerProps$1 } from '@mui/x-date-pickers';
|
|
4
4
|
|
|
5
5
|
interface IFormProps<T> extends UseFormProps {
|
|
6
6
|
onSubmit: (data: T) => void;
|
|
@@ -274,4 +274,16 @@ type DatePickerProps = Omit<UseControllerProps, 'control'> & Pick<TextFieldProps
|
|
|
274
274
|
|
|
275
275
|
declare const DatePicker: ({ rules, name, defaultValue, shouldUnregister, datePickerProps, label, required, placeholder, ...rest }: DatePickerProps) => JSX.Element;
|
|
276
276
|
|
|
277
|
-
|
|
277
|
+
type TimePickerProps = Omit<UseControllerProps, 'control'> & Pick<TextFieldProps$1, 'label' | 'error' | 'helperText' | 'size' | 'fullWidth' | 'variant' | 'autoFocus' | 'placeholder'> & {
|
|
278
|
+
timePickerProps?: Partial<TimePickerProps$1<any, any>>;
|
|
279
|
+
/**
|
|
280
|
+
* Se `true` irá adicionar um asterisco ao label do campo
|
|
281
|
+
*
|
|
282
|
+
* @default false
|
|
283
|
+
*/
|
|
284
|
+
required?: boolean;
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
declare const TimePicker: ({ rules, defaultValue, shouldUnregister, name, required, label, timePickerProps, placeholder, ...rest }: TimePickerProps) => JSX.Element;
|
|
288
|
+
|
|
289
|
+
export { Checkbox, CheckboxProps, Creatable, CreatableOption, CreatableProps, DatePicker, DatePickerProps, Form, RadioButton, RadioGroup, RadioGroupProps, RadioProps, Searchable, SearchableOption, SearchableProps, Select, SelectOption, SelectProps, Slider, SliderProps, Switch, SwitchProps, TextField, TimePicker };
|
package/dist/index.js
CHANGED
|
@@ -1,67 +1,74 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var te=Object.create;var j=Object.defineProperty,ie=Object.defineProperties,le=Object.getOwnPropertyDescriptor,ne=Object.getOwnPropertyDescriptors,de=Object.getOwnPropertyNames,J=Object.getOwnPropertySymbols,ae=Object.getPrototypeOf,pr=Object.prototype.hasOwnProperty,Pr=Object.prototype.propertyIsEnumerable;var Fr=(r,e,o)=>e in r?j(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,i=(r,e)=>{for(var o in e||(e={}))pr.call(e,o)&&Fr(r,o,e[o]);if(J)for(var o of J(e))Pr.call(e,o)&&Fr(r,o,e[o]);return r},f=(r,e)=>ie(r,ne(e));var u=(r,e)=>{var o={};for(var l in r)pr.call(r,l)&&e.indexOf(l)<0&&(o[l]=r[l]);if(r!=null&&J)for(var l of J(r))e.indexOf(l)<0&&Pr.call(r,l)&&(o[l]=r[l]);return o};var me=(r,e)=>{for(var o in e)j(r,o,{get:e[o],enumerable:!0})},br=(r,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of de(e))!pr.call(r,t)&&t!==o&&j(r,t,{get:()=>e[t],enumerable:!(l=le(e,t))||l.enumerable});return r};var Q=(r,e,o)=>(o=r!=null?te(ae(r)):{},br(e||!r||!r.__esModule?j(o,"default",{value:r,enumerable:!0}):o,r)),se=r=>br(j({},"__esModule",{value:!0}),r);var we={};me(we,{Checkbox:()=>qr,Creatable:()=>Ir,DatePicker:()=>Hr,Form:()=>gr,RadioButton:()=>Vr,RadioGroup:()=>vr,Searchable:()=>Gr,Select:()=>Dr,Slider:()=>zr,Switch:()=>Mr,TextField:()=>Ar,TimePicker:()=>oe});module.exports=se(we);var hr=require("react"),X=require("react-hook-form");var fr=require("react/jsx-runtime");function pe(l){var t=l,{children:r,onSubmit:e}=t,o=u(t,["children","onSubmit"]);let d=(0,X.useForm)(o);(0,hr.useEffect)(()=>{d.reset(o.defaultValues)},[o.defaultValues,d.reset]);let n=()=>typeof r=="function"?r(f(i({},d),{onSubmit:d.handleSubmit(e)})):r;return(0,fr.jsx)(X.FormProvider,f(i({},d),{children:(0,fr.jsx)("form",{onSubmit:d.handleSubmit(e),children:n()})}))}var gr=pe;var Tr=require("react"),Z=require("react-hook-form"),rr=require("phosphor-react"),U=require("@mui/material"),v=Q(require("@s_mart/masks"));var ur=require("@mui/material"),Cr=require("@s_mart/utils"),W=require("react/jsx-runtime"),b=({label:r,required:e,regular:o})=>(0,W.jsxs)("span",{style:{display:"flex",alignItems:"center",gap:(0,Cr.toRem)(2)},children:[(0,W.jsx)(ur.Typography,{variant:"caption",fontWeight:o?400:700,style:{display:"flex",alignItems:"center"},children:r}),e&&(0,W.jsx)(ur.Typography,{variant:"caption",fontWeight:900,color:"error",children:"*"})]});var Sr=require("react-hook-form"),wr=require("@s_mart/core"),Er=require("react/jsx-runtime"),S=({name:r})=>{var o,l,t;let e=(0,Sr.useFormContext)();return(l=(o=e==null?void 0:e.formState)==null?void 0:o.errors)!=null&&l[r]?(0,Er.jsx)(wr.Indicator,{severity:"error",children:(t=e.formState.errors[r])==null?void 0:t.message}):null};var T=require("react/jsx-runtime"),fe=p=>{var a=p,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,required:d,mask:n,variant:x="outlined",onInputChange:c}=a,y=u(a,["name","rules","defaultValue","shouldUnregister","label","required","mask","variant","onInputChange"]);let P=(0,Z.useFormContext)();if(!P)throw new Error("Para usar o <TextField /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let[w,m]=(0,Tr.useState)(!1),h=g=>{var F;return n?(F=v==null?void 0:v[n])==null?void 0:F.format(g):g},s=g=>{var F;return n?(F=v==null?void 0:v[n])==null?void 0:F.parse(g):g},V=g=>{if(!g||n!=="porcentagem")return;g==null||g.stopPropagation();let F=(g==null?void 0:g.target).value;if(F){let C=String(F);if(C.length>0){let B=C.indexOf("%");B>-1&&(g.currentTarget.selectionEnd=B)}}};return(0,T.jsx)(Z.Controller,{control:P.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:g,onChange:F}})=>(0,T.jsxs)(U.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,T.jsx)(b,{label:t,required:d}),(0,T.jsx)(U.TextField,f(i({size:"small",variant:x,autoComplete:"off",defaultValue:o,value:h(g||""),onChange:C=>{var B;c==null||c(C),F(s((B=C==null?void 0:C.target)==null?void 0:B.value))}},y),{type:y.type==="password"?w?"text":"password":y.type,InputProps:i({onKeyDown:V,endAdornment:y.type==="password"&&(0,T.jsx)(U.InputAdornment,{position:"end",onClick:()=>m(!w),style:{cursor:"pointer"},children:w?(0,T.jsx)(rr.Eye,{size:20}):(0,T.jsx)(rr.EyeSlash,{size:20})})},y.InputProps)})),(0,T.jsx)(S,{name:r})]})})},Ar=fe;var er=require("react-hook-form"),R=require("@mui/material");var A=require("react/jsx-runtime"),ue=p=>{var a=p,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n,placeholder:x,onInputChange:c}=a,y=u(a,["name","rules","defaultValue","shouldUnregister","label","required","options","placeholder","onInputChange"]);let P=(0,er.useFormContext)(),{palette:w}=(0,R.useTheme)();if(!P)throw new Error("Para usar o <Select /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,A.jsx)(er.Controller,{control:P.control,name:r,rules:e,defaultValue:o||"",shouldUnregister:l,render:({field:{value:m,onChange:h}})=>(0,A.jsxs)(R.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,A.jsx)(b,{label:t,required:d}),(0,A.jsxs)(R.Select,f(i({displayEmpty:Boolean(x),size:"small",variant:"outlined",autoComplete:"off",value:m||"",onChange:s=>{c==null||c(s),h(s.target.value)}},y),{children:[x&&(0,A.jsx)(R.MenuItem,{disabled:!0,value:"",children:(0,A.jsx)("p",{style:{color:w.grey[400]},children:x})}),n==null?void 0:n.map((s,V)=>(0,A.jsx)(R.MenuItem,{value:s.value,children:s.label},V))]})),(0,A.jsx)(S,{name:r})]})})},Dr=ue;var or=require("react-hook-form"),z=require("@mui/material");var L=require("react/jsx-runtime"),ce=y=>{var p=y,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n,textFieldProps:x}=p,c=u(p,["name","rules","defaultValue","shouldUnregister","label","required","options","textFieldProps"]);let a=(0,or.useFormContext)();if(!a)throw new Error("Para usar o <Searchable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,L.jsx)(or.Controller,{control:a.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{onChange:P,value:w}})=>(0,L.jsxs)(z.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,L.jsx)(b,{label:t,required:d}),(0,L.jsx)(z.Autocomplete,f(i({size:"small",onChange:(m,h)=>P(h),value:w||null,options:n,noOptionsText:"Nenhuma op\xE7\xE3o encontrada",isOptionEqualToValue:(m,h)=>typeof m=="string"&&typeof h=="string"?m===h:typeof m=="object"&&typeof h=="object"?m.value===h.value:!1},c),{renderInput:m=>(0,L.jsx)(z.TextField,i(i({},m),x))})),(0,L.jsx)(S,{name:r})]})})},Gr=ce;var tr=require("react-hook-form"),kr=require("phosphor-react"),k=require("@mui/material");var $=require("@s_mart/utils"),cr=Q(require("@emotion/styled")),xr=require("@emotion/react"),Rr=xr.css`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
|
-
`,
|
|
5
|
+
`,xe=r=>xr.css`
|
|
6
6
|
.MuiAutocomplete-endAdornment {
|
|
7
7
|
position: relative;
|
|
8
8
|
right: 0;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.creatable {
|
|
12
|
-
${
|
|
12
|
+
${Rr}
|
|
13
13
|
|
|
14
14
|
.divider {
|
|
15
15
|
width: 1px;
|
|
16
|
-
height: ${(0
|
|
17
|
-
background-color: ${
|
|
16
|
+
height: ${(0,$.toRem)(20)};
|
|
17
|
+
background-color: ${r.palette.grey[400]};
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.button {
|
|
21
21
|
display: flex;
|
|
22
22
|
justify-content: center;
|
|
23
23
|
align-items: center;
|
|
24
|
-
color: ${
|
|
24
|
+
color: ${r.palette.grey[600]};
|
|
25
25
|
border-radius: 50%;
|
|
26
26
|
|
|
27
|
-
margin: 0 ${(0
|
|
28
|
-
width: ${(0
|
|
29
|
-
height: ${(0
|
|
27
|
+
margin: 0 ${(0,$.toRem)(6)};
|
|
28
|
+
width: ${(0,$.toRem)(28)};
|
|
29
|
+
height: ${(0,$.toRem)(28)};
|
|
30
30
|
|
|
31
31
|
&:hover {
|
|
32
32
|
cursor: pointer;
|
|
33
|
-
background-color: ${
|
|
33
|
+
background-color: ${r.palette.grey[100]};
|
|
34
34
|
transition: background-color 0.2s ease-in-out;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
|
|
38
|
+
`,$r=cr.default.div`
|
|
39
39
|
display: flex;
|
|
40
40
|
|
|
41
41
|
div.endAdornments {
|
|
42
42
|
position: absolute;
|
|
43
43
|
right: 0;
|
|
44
44
|
|
|
45
|
-
${
|
|
45
|
+
${Rr}
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
${({hideAddButton:
|
|
49
|
-
`,
|
|
50
|
-
color: ${({theme:
|
|
48
|
+
${({hideAddButton:r,theme:e})=>!r&&xe(e)}
|
|
49
|
+
`,Lr=cr.default.div`
|
|
50
|
+
color: ${({theme:r})=>r.palette.text.primary};
|
|
51
51
|
|
|
52
|
-
padding: ${(0
|
|
53
|
-
margin: ${(0
|
|
52
|
+
padding: ${(0,$.toRem)(6)} ${(0,$.toRem)(16)};
|
|
53
|
+
margin: ${(0,$.toRem)(-6)} ${(0,$.toRem)(-16)};
|
|
54
54
|
|
|
55
55
|
&:hover {
|
|
56
56
|
cursor: pointer;
|
|
57
57
|
transition: background-color 0.2s ease-in-out;
|
|
58
|
-
background-color: ${({theme:
|
|
58
|
+
background-color: ${({theme:r})=>r.palette.grey[100]};
|
|
59
59
|
}
|
|
60
|
-
`;var
|
|
60
|
+
`;var E=require("react/jsx-runtime"),ye=P=>{var w=P,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n,onCreateOption:x,textFieldProps:c,hideAddButton:y,onInputChange:p}=w,a=u(w,["name","rules","defaultValue","shouldUnregister","label","required","options","onCreateOption","textFieldProps","hideAddButton","onInputChange"]);let m=(0,tr.useFormContext)();if(!m)throw new Error("Para usar o <Creatable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let h=s=>{x?x(s):console.error("onCreateOption n\xE3o foi definido")};return(0,E.jsx)(tr.Controller,{control:m.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:s,onChange:V}})=>{let g=(s==null?void 0:s.label)||(s==null?void 0:s.value)||s;return(0,E.jsxs)(k.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,E.jsx)(b,{label:t,required:d}),(0,E.jsx)($r,{hideAddButton:y,children:(0,E.jsx)(k.Autocomplete,f(i({size:"small",fullWidth:!0,onChange:(F,C)=>(p==null||p(C),V(C)),options:n,value:s||null,noOptionsText:(0,E.jsx)(Lr,{onClick:()=>h(s),children:(0,E.jsxs)(k.Typography,{children:["Adicionar ",g&&`"${g}"`]})}),isOptionEqualToValue:(F,C)=>C?typeof F=="string"&&typeof C=="string"?F===C:typeof F=="object"&&typeof C=="object"?F.value===C.value:typeof F=="object"&&typeof C=="string":!1},a),{renderInput:F=>{let C=y?F.InputProps:f(i({},F.InputProps),{endAdornment:(0,E.jsxs)("div",{className:"endAdornments",children:[F.InputProps.endAdornment,(0,E.jsxs)("div",{className:"creatable",children:[(0,E.jsx)("div",{className:"divider"}),(0,E.jsx)("div",{className:"button",onClick:()=>h(s),children:(0,E.jsx)(kr.Plus,{size:18,weight:"bold"})})]})]})});return(0,E.jsx)(k.TextField,i(f(i({},F),{onChange:V,InputProps:C}),c))}}))}),(0,E.jsx)(S,{name:r})]})}})},Ir=ye;var ir=require("react-hook-form"),N=require("@mui/material");var I=require("react/jsx-runtime"),Fe=c=>{var y=c,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,labelPlacement:d,required:n}=y,x=u(y,["name","rules","defaultValue","shouldUnregister","label","labelPlacement","required"]);let p=(0,ir.useFormContext)();if(!p)throw new Error("Para usar o <Checkbox /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,I.jsx)(ir.Controller,{control:p.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:a,onChange:P}})=>(0,I.jsxs)(N.Grid,{display:"flex",flexDirection:"column",children:[(0,I.jsx)(N.FormControlLabel,{control:(0,I.jsx)(N.Checkbox,i({value:a!=null?a:"",defaultValue:a,onChange:P},x)),label:(0,I.jsx)(b,{label:t,required:n,regular:!0}),labelPlacement:d||"end"}),(0,I.jsx)(S,{name:r})]})})},qr=Fe;var lr=require("react-hook-form"),O=require("@mui/material");var q=require("react/jsx-runtime"),Pe=x=>{var c=x,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,labelPlacement:d}=c,n=u(c,["name","rules","defaultValue","shouldUnregister","label","labelPlacement"]);let y=(0,lr.useFormContext)();if(!y)throw new Error("Para usar o <Switch /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,q.jsx)(lr.Controller,{control:y.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:p,onChange:a}})=>(0,q.jsxs)(O.Grid,{display:"flex",flexDirection:"column",children:[(0,q.jsx)(O.FormControlLabel,{control:(0,q.jsx)(O.Switch,i({value:p!=null?p:"",defaultValue:p,onChange:a},n)),label:(0,q.jsx)(b,{label:t}),labelPlacement:d||"end"}),(0,q.jsx)(S,{name:r})]})})},Mr=Pe;var _=require("@mui/material");var Y=require("react/jsx-runtime"),be=l=>{var t=l,{label:r,labelPlacement:e}=t,o=u(t,["label","labelPlacement"]);return(0,Y.jsx)(_.Grid,{display:"flex",flexDirection:"column",children:(0,Y.jsx)(_.FormControlLabel,{control:(0,Y.jsx)(_.Radio,i({},o)),label:(0,Y.jsx)(b,{label:r}),labelPlacement:e||"end"})})},Vr=be;var nr=require("react-hook-form"),dr=require("@mui/material");var M=require("react/jsx-runtime"),he=y=>{var p=y,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,required:d,children:n,orientation:x="row"}=p,c=u(p,["name","rules","defaultValue","shouldUnregister","label","required","children","orientation"]);let a=(0,nr.useFormContext)();if(!a)throw new Error("Para usar o <RadioGroup /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,M.jsx)(nr.Controller,{control:a.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:P,onChange:w}})=>(0,M.jsxs)(dr.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,M.jsx)(b,{label:t,required:d}),(0,M.jsx)(dr.RadioGroup,f(i({value:P||"",onChange:w,name:r},c),{style:{display:"flex",flexDirection:x},children:n})),(0,M.jsx)(S,{name:r})]})})},vr=he;var ar=require("react-hook-form"),Ur=require("@mui/material");var yr=require("react/jsx-runtime"),ge=d=>{var n=d,{name:r,rules:e,defaultValue:o,shouldUnregister:l}=n,t=u(n,["name","rules","defaultValue","shouldUnregister"]);let x=(0,ar.useFormContext)();if(!x)throw new Error("Para usar o <Slider /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,yr.jsx)(ar.Controller,{control:x.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:c,onChange:y}})=>(0,yr.jsx)(Ur.Slider,i({value:c||(t==null?void 0:t.min)||0,onChange:y,valueLabelDisplay:"auto"},t))})},zr=ge;var mr=require("react-hook-form"),_r=require("@s_mart/core"),Br=require("@mui/material"),jr=require("@mui/x-date-pickers/DatePicker"),Wr=require("@mui/x-date-pickers/AdapterDayjs"),Yr=require("@mui/x-date-pickers/LocalizationProvider");var H=require("@s_mart/utils"),Nr=Q(require("@emotion/styled")),Or=Nr.default.div`
|
|
61
61
|
> div > button {
|
|
62
|
-
padding: ${(0,
|
|
63
|
-
border-radius: 0 ${(0,
|
|
62
|
+
padding: ${(0,H.toRem)(6)} ${(0,H.toRem)(8)};
|
|
63
|
+
border-radius: 0 ${(0,H.toRem)(4)} ${(0,H.toRem)(4)} 0;
|
|
64
64
|
|
|
65
65
|
margin: 0px -13px 0px 0px;
|
|
66
66
|
}
|
|
67
|
-
`;var D=require("react/jsx-runtime"),
|
|
67
|
+
`;var D=require("react/jsx-runtime"),Ce=y=>{var p=y,{rules:r,name:e,defaultValue:o,shouldUnregister:l,datePickerProps:t,label:d,required:n,placeholder:x}=p,c=u(p,["rules","name","defaultValue","shouldUnregister","datePickerProps","label","required","placeholder"]);let a=(0,mr.useFormContext)();if(!a)throw new Error("Para usar o <DataPicker /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,D.jsx)(Yr.LocalizationProvider,{dateAdapter:Wr.AdapterDayjs,children:(0,D.jsx)(mr.Controller,{control:a.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:P,onChange:w}})=>(0,D.jsxs)(_r.Grid,{display:"flex",flexDirection:"column",children:[d&&(0,D.jsx)(b,{label:d,required:n}),(0,D.jsx)(jr.DatePicker,f(i({},t),{value:P!=null?P:null,inputFormat:(t==null?void 0:t.inputFormat)||"DD/MM/YYYY",onChange:w,renderInput:m=>{var h,s;return(0,D.jsx)(Br.TextField,f(i(i({size:"small",variant:"outlined"},m),c),{inputProps:f(i({},m.inputProps),{placeholder:x||((h=m.inputProps)==null?void 0:h.placeholder)}),InputProps:f(i({},m.InputProps),{endAdornment:(0,D.jsx)(Or,{children:(s=m.InputProps)==null?void 0:s.endAdornment})})}))}})),(0,D.jsx)(S,{name:e})]})})})},Hr=Ce;var Qr=require("@s_mart/core"),Xr=require("@mui/x-date-pickers/TimePicker"),Zr=require("@mui/material"),sr=require("react-hook-form"),re=require("@mui/x-date-pickers/AdapterDayjs"),ee=require("@mui/x-date-pickers/LocalizationProvider");var K=require("@s_mart/utils"),Kr=Q(require("@emotion/styled")),Jr=Kr.default.div`
|
|
68
|
+
> div > button {
|
|
69
|
+
padding: ${(0,K.toRem)(6)} ${(0,K.toRem)(8)};
|
|
70
|
+
border-radius: 0 ${(0,K.toRem)(4)} ${(0,K.toRem)(4)} 0;
|
|
71
|
+
|
|
72
|
+
margin: 0px -13px 0px 0px;
|
|
73
|
+
}
|
|
74
|
+
`;var G=require("react/jsx-runtime"),Se=y=>{var p=y,{rules:r,defaultValue:e,shouldUnregister:o,name:l,required:t,label:d,timePickerProps:n,placeholder:x}=p,c=u(p,["rules","defaultValue","shouldUnregister","name","required","label","timePickerProps","placeholder"]);let a=(0,sr.useFormContext)();if(!a)throw new Error("Para usar o <TimePicker /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,G.jsx)(ee.LocalizationProvider,{dateAdapter:re.AdapterDayjs,children:(0,G.jsx)(sr.Controller,{control:a.control,name:l,rules:r,defaultValue:e,shouldUnregister:o,render:({field:{value:P,onChange:w}})=>(0,G.jsxs)(Qr.Grid,{display:"flex",flexDirection:"column",children:[d&&(0,G.jsx)(b,{label:d,required:t}),(0,G.jsx)(Xr.TimePicker,f(i({value:P!=null?P:null,onChange:w},n),{renderInput:m=>{var h,s;return(0,G.jsx)(Zr.TextField,f(i(i({size:"small",variant:"outlined"},m),c),{inputProps:f(i({},m.inputProps),{placeholder:x||((h=m.inputProps)==null?void 0:h.placeholder)}),InputProps:f(i({},m.InputProps),{endAdornment:(0,G.jsx)(Jr,{children:(s=m.InputProps)==null?void 0:s.endAdornment})})}))}})),(0,G.jsx)(S,{name:l})]})})})},oe=Se;0&&(module.exports={Checkbox,Creatable,DatePicker,Form,RadioButton,RadioGroup,Searchable,Select,Slider,Switch,TextField,TimePicker});
|
package/dist/index.mjs
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
var
|
|
1
|
+
var lr=Object.defineProperty,nr=Object.defineProperties;var dr=Object.getOwnPropertyDescriptors;var V=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var _=(r,e,o)=>e in r?lr(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,i=(r,e)=>{for(var o in e||(e={}))B.call(e,o)&&_(r,o,e[o]);if(V)for(var o of V(e))j.call(e,o)&&_(r,o,e[o]);return r},f=(r,e)=>nr(r,dr(e));var u=(r,e)=>{var o={};for(var l in r)B.call(r,l)&&e.indexOf(l)<0&&(o[l]=r[l]);if(r!=null&&V)for(var l of V(r))e.indexOf(l)<0&&j.call(r,l)&&(o[l]=r[l]);return o};import{useEffect as ar}from"react";import{FormProvider as mr,useForm as sr}from"react-hook-form";import{jsx as W}from"react/jsx-runtime";function pr(l){var t=l,{children:r,onSubmit:e}=t,o=u(t,["children","onSubmit"]);let d=sr(o);ar(()=>{d.reset(o.defaultValues)},[o.defaultValues,d.reset]);let n=()=>typeof r=="function"?r(f(i({},d),{onSubmit:d.handleSubmit(e)})):r;return W(mr,f(i({},d),{children:W("form",{onSubmit:d.handleSubmit(e),children:n()})}))}var fr=pr;import{useState as Pr}from"react";import{Controller as br,useFormContext as hr}from"react-hook-form";import{Eye as gr,EyeSlash as Cr}from"phosphor-react";import{Grid as Sr,InputAdornment as wr,TextField as Er}from"@mui/material";import*as $ from"@s_mart/masks";import{Typography as Y}from"@mui/material";import{toRem as ur}from"@s_mart/utils";import{jsx as H,jsxs as cr}from"react/jsx-runtime";var b=({label:r,required:e,regular:o})=>cr("span",{style:{display:"flex",alignItems:"center",gap:ur(2)},children:[H(Y,{variant:"caption",fontWeight:o?400:700,style:{display:"flex",alignItems:"center"},children:r}),e&&H(Y,{variant:"caption",fontWeight:900,color:"error",children:"*"})]});import{useFormContext as xr}from"react-hook-form";import{Indicator as yr}from"@s_mart/core";import{jsx as Fr}from"react/jsx-runtime";var S=({name:r})=>{var o,l,t;let e=xr();return(l=(o=e==null?void 0:e.formState)==null?void 0:o.errors)!=null&&l[r]?Fr(yr,{severity:"error",children:(t=e.formState.errors[r])==null?void 0:t.message}):null};import{jsx as A,jsxs as Dr}from"react/jsx-runtime";var Tr=p=>{var a=p,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,required:d,mask:n,variant:x="outlined",onInputChange:c}=a,y=u(a,["name","rules","defaultValue","shouldUnregister","label","required","mask","variant","onInputChange"]);let P=hr();if(!P)throw new Error("Para usar o <TextField /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let[w,m]=Pr(!1),h=g=>{var F;return n?(F=$==null?void 0:$[n])==null?void 0:F.format(g):g},s=g=>{var F;return n?(F=$==null?void 0:$[n])==null?void 0:F.parse(g):g},R=g=>{if(!g||n!=="porcentagem")return;g==null||g.stopPropagation();let F=(g==null?void 0:g.target).value;if(F){let C=String(F);if(C.length>0){let k=C.indexOf("%");k>-1&&(g.currentTarget.selectionEnd=k)}}};return A(br,{control:P.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:g,onChange:F}})=>Dr(Sr,{display:"flex",flexDirection:"column",children:[t&&A(b,{label:t,required:d}),A(Er,f(i({size:"small",variant:x,autoComplete:"off",defaultValue:o,value:h(g||""),onChange:C=>{var k;c==null||c(C),F(s((k=C==null?void 0:C.target)==null?void 0:k.value))}},y),{type:y.type==="password"?w?"text":"password":y.type,InputProps:i({onKeyDown:R,endAdornment:y.type==="password"&&A(wr,{position:"end",onClick:()=>m(!w),style:{cursor:"pointer"},children:w?A(gr,{size:20}):A(Cr,{size:20})})},y.InputProps)})),A(S,{name:r})]})})},Ar=Tr;import{Controller as Gr,useFormContext as Rr}from"react-hook-form";import{Grid as $r,Select as Lr,MenuItem as K,useTheme as kr}from"@mui/material";import{jsx as L,jsxs as J}from"react/jsx-runtime";var Ir=p=>{var a=p,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n,placeholder:x,onInputChange:c}=a,y=u(a,["name","rules","defaultValue","shouldUnregister","label","required","options","placeholder","onInputChange"]);let P=Rr(),{palette:w}=kr();if(!P)throw new Error("Para usar o <Select /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return L(Gr,{control:P.control,name:r,rules:e,defaultValue:o||"",shouldUnregister:l,render:({field:{value:m,onChange:h}})=>J($r,{display:"flex",flexDirection:"column",children:[t&&L(b,{label:t,required:d}),J(Lr,f(i({displayEmpty:Boolean(x),size:"small",variant:"outlined",autoComplete:"off",value:m||"",onChange:s=>{c==null||c(s),h(s.target.value)}},y),{children:[x&&L(K,{disabled:!0,value:"",children:L("p",{style:{color:w.grey[400]},children:x})}),n==null?void 0:n.map((s,R)=>L(K,{value:s.value,children:s.label},R))]})),L(S,{name:r})]})})},qr=Ir;import{Controller as Mr,useFormContext as Vr}from"react-hook-form";import{Grid as vr,Autocomplete as Ur,TextField as zr}from"@mui/material";import{jsx as I,jsxs as _r}from"react/jsx-runtime";var Nr=y=>{var p=y,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n,textFieldProps:x}=p,c=u(p,["name","rules","defaultValue","shouldUnregister","label","required","options","textFieldProps"]);let a=Vr();if(!a)throw new Error("Para usar o <Searchable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return I(Mr,{control:a.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{onChange:P,value:w}})=>_r(vr,{display:"flex",flexDirection:"column",children:[t&&I(b,{label:t,required:d}),I(Ur,f(i({size:"small",onChange:(m,h)=>P(h),value:w||null,options:n,noOptionsText:"Nenhuma op\xE7\xE3o encontrada",isOptionEqualToValue:(m,h)=>typeof m=="string"&&typeof h=="string"?m===h:typeof m=="object"&&typeof h=="object"?m.value===h.value:!1},c),{renderInput:m=>I(zr,i(i({},m),x))})),I(S,{name:r})]})})},Or=Nr;import{Controller as jr,useFormContext as Wr}from"react-hook-form";import{Plus as Yr}from"phosphor-react";import{Grid as Hr,Autocomplete as Kr,TextField as Jr,Typography as Qr}from"@mui/material";import{toRem as T}from"@s_mart/utils";import Q from"@emotion/styled";import{css as X}from"@emotion/react";var Z=X`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
|
-
`,
|
|
5
|
+
`,Br=r=>X`
|
|
6
6
|
.MuiAutocomplete-endAdornment {
|
|
7
7
|
position: relative;
|
|
8
8
|
right: 0;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.creatable {
|
|
12
|
-
${
|
|
12
|
+
${Z}
|
|
13
13
|
|
|
14
14
|
.divider {
|
|
15
15
|
width: 1px;
|
|
16
16
|
height: ${T(20)};
|
|
17
|
-
background-color: ${
|
|
17
|
+
background-color: ${r.palette.grey[400]};
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.button {
|
|
21
21
|
display: flex;
|
|
22
22
|
justify-content: center;
|
|
23
23
|
align-items: center;
|
|
24
|
-
color: ${
|
|
24
|
+
color: ${r.palette.grey[600]};
|
|
25
25
|
border-radius: 50%;
|
|
26
26
|
|
|
27
27
|
margin: 0 ${T(6)};
|
|
@@ -30,24 +30,24 @@ var te=Object.defineProperty,ie=Object.defineProperties;var le=Object.getOwnProp
|
|
|
30
30
|
|
|
31
31
|
&:hover {
|
|
32
32
|
cursor: pointer;
|
|
33
|
-
background-color: ${
|
|
33
|
+
background-color: ${r.palette.grey[100]};
|
|
34
34
|
transition: background-color 0.2s ease-in-out;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
`,
|
|
38
|
+
`,rr=Q.div`
|
|
39
39
|
display: flex;
|
|
40
40
|
|
|
41
41
|
div.endAdornments {
|
|
42
42
|
position: absolute;
|
|
43
43
|
right: 0;
|
|
44
44
|
|
|
45
|
-
${
|
|
45
|
+
${Z}
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
${({hideAddButton:
|
|
49
|
-
`,
|
|
50
|
-
color: ${({theme:
|
|
48
|
+
${({hideAddButton:r,theme:e})=>!r&&Br(e)}
|
|
49
|
+
`,er=Q.div`
|
|
50
|
+
color: ${({theme:r})=>r.palette.text.primary};
|
|
51
51
|
|
|
52
52
|
padding: ${T(6)} ${T(16)};
|
|
53
53
|
margin: ${T(-6)} ${T(-16)};
|
|
@@ -55,13 +55,20 @@ var te=Object.defineProperty,ie=Object.defineProperties;var le=Object.getOwnProp
|
|
|
55
55
|
&:hover {
|
|
56
56
|
cursor: pointer;
|
|
57
57
|
transition: background-color 0.2s ease-in-out;
|
|
58
|
-
background-color: ${({theme:
|
|
58
|
+
background-color: ${({theme:r})=>r.palette.grey[100]};
|
|
59
59
|
}
|
|
60
|
-
`;import{jsx as E,jsxs as
|
|
60
|
+
`;import{jsx as E,jsxs as v}from"react/jsx-runtime";var Xr=P=>{var w=P,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,required:d,options:n,onCreateOption:x,textFieldProps:c,hideAddButton:y,onInputChange:p}=w,a=u(w,["name","rules","defaultValue","shouldUnregister","label","required","options","onCreateOption","textFieldProps","hideAddButton","onInputChange"]);let m=Wr();if(!m)throw new Error("Para usar o <Creatable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let h=s=>{x?x(s):console.error("onCreateOption n\xE3o foi definido")};return E(jr,{control:m.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:s,onChange:R}})=>{let g=(s==null?void 0:s.label)||(s==null?void 0:s.value)||s;return v(Hr,{display:"flex",flexDirection:"column",children:[t&&E(b,{label:t,required:d}),E(rr,{hideAddButton:y,children:E(Kr,f(i({size:"small",fullWidth:!0,onChange:(F,C)=>(p==null||p(C),R(C)),options:n,value:s||null,noOptionsText:E(er,{onClick:()=>h(s),children:v(Qr,{children:["Adicionar ",g&&`"${g}"`]})}),isOptionEqualToValue:(F,C)=>C?typeof F=="string"&&typeof C=="string"?F===C:typeof F=="object"&&typeof C=="object"?F.value===C.value:typeof F=="object"&&typeof C=="string":!1},a),{renderInput:F=>{let C=y?F.InputProps:f(i({},F.InputProps),{endAdornment:v("div",{className:"endAdornments",children:[F.InputProps.endAdornment,v("div",{className:"creatable",children:[E("div",{className:"divider"}),E("div",{className:"button",onClick:()=>h(s),children:E(Yr,{size:18,weight:"bold"})})]})]})});return E(Jr,i(f(i({},F),{onChange:R,InputProps:C}),c))}}))}),E(S,{name:r})]})}})},Zr=Xr;import{Controller as re,useFormContext as ee}from"react-hook-form";import{Grid as oe,Checkbox as te,FormControlLabel as ie}from"@mui/material";import{jsx as q,jsxs as de}from"react/jsx-runtime";var le=c=>{var y=c,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,labelPlacement:d,required:n}=y,x=u(y,["name","rules","defaultValue","shouldUnregister","label","labelPlacement","required"]);let p=ee();if(!p)throw new Error("Para usar o <Checkbox /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return q(re,{control:p.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:a,onChange:P}})=>de(oe,{display:"flex",flexDirection:"column",children:[q(ie,{control:q(te,i({value:a!=null?a:"",defaultValue:a,onChange:P},x)),label:q(b,{label:t,required:n,regular:!0}),labelPlacement:d||"end"}),q(S,{name:r})]})})},ne=le;import{Controller as ae,useFormContext as me}from"react-hook-form";import{Grid as se,Switch as pe,FormControlLabel as fe}from"@mui/material";import{jsx as M,jsxs as xe}from"react/jsx-runtime";var ue=x=>{var c=x,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,labelPlacement:d}=c,n=u(c,["name","rules","defaultValue","shouldUnregister","label","labelPlacement"]);let y=me();if(!y)throw new Error("Para usar o <Switch /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return M(ae,{control:y.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:p,onChange:a}})=>xe(se,{display:"flex",flexDirection:"column",children:[M(fe,{control:M(pe,i({value:p!=null?p:"",defaultValue:p,onChange:a},n)),label:M(b,{label:t}),labelPlacement:d||"end"}),M(S,{name:r})]})})},ce=ue;import{Grid as ye,Radio as Fe,FormControlLabel as Pe}from"@mui/material";import{jsx as U}from"react/jsx-runtime";var be=l=>{var t=l,{label:r,labelPlacement:e}=t,o=u(t,["label","labelPlacement"]);return U(ye,{display:"flex",flexDirection:"column",children:U(Pe,{control:U(Fe,i({},o)),label:U(b,{label:r}),labelPlacement:e||"end"})})},he=be;import{Controller as ge,useFormContext as Ce}from"react-hook-form";import{Grid as Se,RadioGroup as we}from"@mui/material";import{jsx as z,jsxs as Ae}from"react/jsx-runtime";var Ee=y=>{var p=y,{name:r,rules:e,defaultValue:o,shouldUnregister:l,label:t,required:d,children:n,orientation:x="row"}=p,c=u(p,["name","rules","defaultValue","shouldUnregister","label","required","children","orientation"]);let a=Ce();if(!a)throw new Error("Para usar o <RadioGroup /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return z(ge,{control:a.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:P,onChange:w}})=>Ae(Se,{display:"flex",flexDirection:"column",children:[t&&z(b,{label:t,required:d}),z(we,f(i({value:P||"",onChange:w,name:r},c),{style:{display:"flex",flexDirection:x},children:n})),z(S,{name:r})]})})},Te=Ee;import{Controller as De,useFormContext as Ge}from"react-hook-form";import{Slider as Re}from"@mui/material";import{jsx as or}from"react/jsx-runtime";var $e=d=>{var n=d,{name:r,rules:e,defaultValue:o,shouldUnregister:l}=n,t=u(n,["name","rules","defaultValue","shouldUnregister"]);let x=Ge();if(!x)throw new Error("Para usar o <Slider /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return or(De,{control:x.control,name:r,rules:e,defaultValue:o,shouldUnregister:l,render:({field:{value:c,onChange:y}})=>or(Re,i({value:c||(t==null?void 0:t.min)||0,onChange:y,valueLabelDisplay:"auto"},t))})},Le=$e;import{Controller as Ie,useFormContext as qe}from"react-hook-form";import{Grid as Me}from"@s_mart/core";import{TextField as Ve}from"@mui/material";import{DatePicker as ve}from"@mui/x-date-pickers/DatePicker";import{AdapterDayjs as Ue}from"@mui/x-date-pickers/AdapterDayjs";import{LocalizationProvider as ze}from"@mui/x-date-pickers/LocalizationProvider";import{toRem as N}from"@s_mart/utils";import ke from"@emotion/styled";var tr=ke.div`
|
|
61
61
|
> div > button {
|
|
62
62
|
padding: ${N(6)} ${N(8)};
|
|
63
63
|
border-radius: 0 ${N(4)} ${N(4)} 0;
|
|
64
64
|
|
|
65
65
|
margin: 0px -13px 0px 0px;
|
|
66
66
|
}
|
|
67
|
-
`;import{
|
|
67
|
+
`;import{jsx as D,jsxs as _e}from"react/jsx-runtime";var Ne=y=>{var p=y,{rules:r,name:e,defaultValue:o,shouldUnregister:l,datePickerProps:t,label:d,required:n,placeholder:x}=p,c=u(p,["rules","name","defaultValue","shouldUnregister","datePickerProps","label","required","placeholder"]);let a=qe();if(!a)throw new Error("Para usar o <DataPicker /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return D(ze,{dateAdapter:Ue,children:D(Ie,{control:a.control,name:e,rules:r,defaultValue:o,shouldUnregister:l,render:({field:{value:P,onChange:w}})=>_e(Me,{display:"flex",flexDirection:"column",children:[d&&D(b,{label:d,required:n}),D(ve,f(i({},t),{value:P!=null?P:null,inputFormat:(t==null?void 0:t.inputFormat)||"DD/MM/YYYY",onChange:w,renderInput:m=>{var h,s;return D(Ve,f(i(i({size:"small",variant:"outlined"},m),c),{inputProps:f(i({},m.inputProps),{placeholder:x||((h=m.inputProps)==null?void 0:h.placeholder)}),InputProps:f(i({},m.InputProps),{endAdornment:D(tr,{children:(s=m.InputProps)==null?void 0:s.endAdornment})})}))}})),D(S,{name:e})]})})})},Oe=Ne;import{Grid as je}from"@s_mart/core";import{TimePicker as We}from"@mui/x-date-pickers/TimePicker";import{TextField as Ye}from"@mui/material";import{Controller as He,useFormContext as Ke}from"react-hook-form";import{AdapterDayjs as Je}from"@mui/x-date-pickers/AdapterDayjs";import{LocalizationProvider as Qe}from"@mui/x-date-pickers/LocalizationProvider";import{toRem as O}from"@s_mart/utils";import Be from"@emotion/styled";var ir=Be.div`
|
|
68
|
+
> div > button {
|
|
69
|
+
padding: ${O(6)} ${O(8)};
|
|
70
|
+
border-radius: 0 ${O(4)} ${O(4)} 0;
|
|
71
|
+
|
|
72
|
+
margin: 0px -13px 0px 0px;
|
|
73
|
+
}
|
|
74
|
+
`;import{jsx as G,jsxs as ro}from"react/jsx-runtime";var Xe=y=>{var p=y,{rules:r,defaultValue:e,shouldUnregister:o,name:l,required:t,label:d,timePickerProps:n,placeholder:x}=p,c=u(p,["rules","defaultValue","shouldUnregister","name","required","label","timePickerProps","placeholder"]);let a=Ke();if(!a)throw new Error("Para usar o <TimePicker /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return G(Qe,{dateAdapter:Je,children:G(He,{control:a.control,name:l,rules:r,defaultValue:e,shouldUnregister:o,render:({field:{value:P,onChange:w}})=>ro(je,{display:"flex",flexDirection:"column",children:[d&&G(b,{label:d,required:t}),G(We,f(i({value:P!=null?P:null,onChange:w},n),{renderInput:m=>{var h,s;return G(Ye,f(i(i({size:"small",variant:"outlined"},m),c),{inputProps:f(i({},m.inputProps),{placeholder:x||((h=m.inputProps)==null?void 0:h.placeholder)}),InputProps:f(i({},m.InputProps),{endAdornment:G(ir,{children:(s=m.InputProps)==null?void 0:s.endAdornment})})}))}})),G(S,{name:l})]})})})},Ze=Xe;export{ne as Checkbox,Zr as Creatable,Oe as DatePicker,fr as Form,he as RadioButton,Te as RadioGroup,Or as Searchable,qr as Select,Le as Slider,ce as Switch,Ar as TextField,Ze as TimePicker};
|