@manafishrov/ui 1.3.3 → 1.3.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/components/form/Form.js +1 -1
- package/dist/components/form/Form.js.map +1 -1
- package/dist/components/form/RadioGroupField.js +21 -13
- package/dist/components/form/RadioGroupField.js.map +1 -1
- package/package.json +1 -1
- package/src/components/form/Form.tsx +1 -1
- package/src/components/form/RadioGroupField.tsx +14 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import { createFormHook } from '@tanstack/solid-form';\nimport { splitProps, type Component, type ComponentProps } from 'solid-js';\nimport { cn } from 'tailwind-variants';\n\nimport { AutoSubmit } from './AutoSubmit';\nimport { CheckboxField } from './CheckboxField';\nimport { ComboboxField } from './ComboboxField';\nimport { fieldContext, formContext, useFormContext } from './context';\nimport { DatePickerField } from './DatePickerField';\nimport { NumberInputField } from './NumberInputField';\nimport { PasswordInputField } from './PasswordInputField';\nimport { PinInputField } from './PinInputField';\nimport { RadioGroupField } from './RadioGroupField';\nimport { SelectField } from './SelectField';\nimport { SliderField } from './SliderField';\nimport { SubmitButton } from './SubmitButton';\nimport { SwitchField } from './SwitchField';\nimport { TagsInputField } from './TagsInputField';\nimport { TextareaField } from './TextareaField';\nimport { TextInputField } from './TextInputField';\n\nexport type FormProps = Omit<ComponentProps<'form'>, 'onSubmit'>;\n\nexport const Form: Component<FormProps> = (props) => {\n const form = useFormContext();\n const [local, formProps] = splitProps(props, ['children', 'class']);\n\n return (\n <form\n class={cn('space-y-
|
|
1
|
+
{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import { createFormHook } from '@tanstack/solid-form';\nimport { splitProps, type Component, type ComponentProps } from 'solid-js';\nimport { cn } from 'tailwind-variants';\n\nimport { AutoSubmit } from './AutoSubmit';\nimport { CheckboxField } from './CheckboxField';\nimport { ComboboxField } from './ComboboxField';\nimport { fieldContext, formContext, useFormContext } from './context';\nimport { DatePickerField } from './DatePickerField';\nimport { NumberInputField } from './NumberInputField';\nimport { PasswordInputField } from './PasswordInputField';\nimport { PinInputField } from './PinInputField';\nimport { RadioGroupField } from './RadioGroupField';\nimport { SelectField } from './SelectField';\nimport { SliderField } from './SliderField';\nimport { SubmitButton } from './SubmitButton';\nimport { SwitchField } from './SwitchField';\nimport { TagsInputField } from './TagsInputField';\nimport { TextareaField } from './TextareaField';\nimport { TextInputField } from './TextInputField';\n\nexport type FormProps = Omit<ComponentProps<'form'>, 'onSubmit'>;\n\nexport const Form: Component<FormProps> = (props) => {\n const form = useFormContext();\n const [local, formProps] = splitProps(props, ['children', 'class']);\n\n return (\n <form\n class={cn('space-y-8 relative', local.class)}\n onSubmit={(submitEvent) => {\n submitEvent.preventDefault();\n submitEvent.stopPropagation();\n form.handleSubmit().catch((error: unknown) => {\n throw error;\n });\n }}\n {...formProps}\n >\n {local.children}\n </form>\n );\n};\n\nexport const { useAppForm, withForm, withFieldGroup } = createFormHook({\n formContext,\n fieldContext,\n fieldComponents: {\n CheckboxField,\n ComboboxField,\n DatePickerField,\n NumberInputField,\n PasswordInputField,\n PinInputField,\n RadioGroupField,\n SelectField,\n SliderField,\n SwitchField,\n TagsInputField,\n TextInputField,\n TextareaField,\n },\n formComponents: {\n AutoSubmit,\n Form,\n SubmitButton,\n },\n});\n"],"names":["Form","props","form","useFormContext","local","formProps","splitProps","_el$","_tmpl$","addEventListener","submitEvent","preventDefault","stopPropagation","handleSubmit","catch","error","_$spread","_$mergeProps","cn","class","_$insert","children","useAppForm","withForm","withFieldGroup","createFormHook","formContext","fieldContext","fieldComponents","CheckboxField","ComboboxField","DatePickerField","NumberInputField","PasswordInputField","PinInputField","RadioGroupField","SelectField","SliderField","SwitchField","TagsInputField","TextInputField","TextareaField","formComponents","AutoSubmit","SubmitButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBO,MAAMA,IAA8BC,CAAAA,MAAU;AACnD,QAAMC,IAAOC,EAAAA,GACP,CAACC,GAAOC,CAAS,IAAIC,EAAWL,GAAO,CAAC,YAAY,OAAO,CAAC;AAElE,UAAA,MAAA;AAAA,QAAAM,IAAAC,EAAAA;AAAAD,WAAAA,EAAAE,iBAAA,UAGeC,CAAAA,MAAgB;AACzBA,MAAAA,EAAYC,eAAAA,GACZD,EAAYE,gBAAAA,GACZV,EAAKW,aAAAA,EAAeC,MAAM,CAACC,MAAmB;AAC5C,cAAMA;AAAAA,MACR,CAAC;AAAA,IACH,CAAC,GAAAC,EAAAT,GAAAU,EAAA;AAAA,MAAA,IAAA,QAAA;AAAA,eAPMC,EAAG,sBAAsBd,EAAMe,KAAK;AAAA,MAAC;AAAA,IAAA,GAQxCd,CAAS,GAAA,IAAA,EAAA,GAAAe,EAAAb,GAAA,MAEZH,EAAMiB,QAAQ,GAAAd;AAAAA,EAAA,GAAA;AAGrB,GAEa;AAAA,EAAEe,YAAAA;AAAAA,EAAYC,UAAAA;AAAAA,EAAUC,gBAAAA;AAAe,IAAIC,EAAe;AAAA,EACrEC,aAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAiB;AAAA,IACfC,eAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,oBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,eAAAA;AAAAA,EAAAA;AAAAA,EAEFC,gBAAgB;AAAA,IACdC,YAAAA;AAAAA,IACA3C,MAAAA;AAAAA,IACA4C,cAAAA;AAAAA,EAAAA;AAEJ,CAAC;"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { createComponent as t, mergeProps as i } from "solid-js/web";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
const
|
|
7
|
-
const r =
|
|
8
|
-
return t(
|
|
1
|
+
import { createComponent as t, mergeProps as i, memo as a } from "solid-js/web";
|
|
2
|
+
import { splitProps as o } from "solid-js";
|
|
3
|
+
import { Field as u, FieldContent as s, FieldError as g, FieldDescription as m } from "../Field.js";
|
|
4
|
+
import { RadioGroup as p, RadioGroupLabel as c } from "../RadioGroup.js";
|
|
5
|
+
import { useFieldContext as h } from "./context.js";
|
|
6
|
+
const y = (l) => {
|
|
7
|
+
const r = h(), [e, n] = o(l, ["label", "description", "required", "disabled", "readOnly", "children"]);
|
|
8
|
+
return t(u, {
|
|
9
9
|
get invalid() {
|
|
10
10
|
return r().state.meta.errors.length > 0;
|
|
11
11
|
},
|
|
@@ -19,9 +19,9 @@ const q = (n) => {
|
|
|
19
19
|
return e.readOnly ?? !1;
|
|
20
20
|
},
|
|
21
21
|
get children() {
|
|
22
|
-
return t(
|
|
22
|
+
return t(s, {
|
|
23
23
|
get children() {
|
|
24
|
-
return [t(
|
|
24
|
+
return [t(p, i({
|
|
25
25
|
get value() {
|
|
26
26
|
return r().state.value;
|
|
27
27
|
},
|
|
@@ -43,11 +43,19 @@ const q = (n) => {
|
|
|
43
43
|
get required() {
|
|
44
44
|
return e.required ?? !1;
|
|
45
45
|
}
|
|
46
|
-
},
|
|
46
|
+
}, n, {
|
|
47
|
+
get children() {
|
|
48
|
+
return [t(c, {
|
|
49
|
+
get children() {
|
|
50
|
+
return e.label;
|
|
51
|
+
}
|
|
52
|
+
}), a(() => e.children)];
|
|
53
|
+
}
|
|
54
|
+
})), t(g, {
|
|
47
55
|
get errors() {
|
|
48
56
|
return r().state.meta.errors;
|
|
49
57
|
}
|
|
50
|
-
}), t(
|
|
58
|
+
}), t(m, {
|
|
51
59
|
get children() {
|
|
52
60
|
return e.description;
|
|
53
61
|
}
|
|
@@ -58,6 +66,6 @@ const q = (n) => {
|
|
|
58
66
|
});
|
|
59
67
|
};
|
|
60
68
|
export {
|
|
61
|
-
|
|
69
|
+
y as RadioGroupField
|
|
62
70
|
};
|
|
63
71
|
//# sourceMappingURL=RadioGroupField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroupField.js","sources":["../../../src/components/form/RadioGroupField.tsx"],"sourcesContent":["import type
|
|
1
|
+
{"version":3,"file":"RadioGroupField.js","sources":["../../../src/components/form/RadioGroupField.tsx"],"sourcesContent":["import { type Component, type ComponentProps, splitProps } from 'solid-js';\n\nimport { Field, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport { RadioGroup, RadioGroupLabel } from '@/components/RadioGroup';\n\nimport { useFieldContext } from './context';\n\nexport type RadioGroupFieldProps = ComponentProps<typeof RadioGroup> & {\n label?: string;\n description?: string;\n};\n\nexport const RadioGroupField: Component<RadioGroupFieldProps> = (props) => {\n const field = useFieldContext<string>();\n const [local, others] = splitProps(props, [\n 'label',\n 'description',\n 'required',\n 'disabled',\n 'readOnly',\n 'children',\n ]);\n\n return (\n <Field\n invalid={field().state.meta.errors.length > 0}\n required={local.required ?? false}\n disabled={local.disabled ?? false}\n readOnly={local.readOnly ?? false}\n >\n <FieldContent>\n <RadioGroup\n value={field().state.value}\n onValueChange={(details) => {\n field().handleChange(details.value ?? '');\n }}\n onBlur={() => {\n field().handleBlur();\n }}\n invalid={field().state.meta.errors.length > 0}\n disabled={local.disabled ?? false}\n readOnly={local.readOnly ?? false}\n required={local.required ?? false}\n {...others}\n >\n <RadioGroupLabel>{local.label}</RadioGroupLabel>\n {local.children}\n </RadioGroup>\n <FieldError errors={field().state.meta.errors} />\n <FieldDescription>{local.description}</FieldDescription>\n </FieldContent>\n </Field>\n );\n};\n"],"names":["RadioGroupField","props","field","useFieldContext","local","others","splitProps","_$createComponent","Field","invalid","state","meta","errors","length","required","disabled","readOnly","children","FieldContent","RadioGroup","_$mergeProps","value","onValueChange","details","handleChange","onBlur","handleBlur","RadioGroupLabel","label","_$memo","FieldError","FieldDescription","description"],"mappings":";;;;;AAYO,MAAMA,IAAoDC,CAAAA,MAAU;AACzE,QAAMC,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CACxC,SACA,eACA,YACA,YACA,YACA,UAAU,CACX;AAED,SAAAM,EACGC,GAAK;AAAA,IAAA,IACJC,UAAO;AAAA,aAAEP,EAAAA,EAAQQ,MAAMC,KAAKC,OAAOC,SAAS;AAAA,IAAC;AAAA,IAAA,IAC7CC,WAAQ;AAAA,aAAEV,EAAMU,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEX,EAAMW,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEZ,EAAMY,YAAY;AAAA,IAAK;AAAA,IAAA,IAAAC,WAAA;AAAA,aAAAV,EAEhCW,GAAY;AAAA,QAAA,IAAAD,WAAA;AAAA,iBAAA,CAAAV,EACVY,GAAUC,EAAA;AAAA,YAAA,IACTC,QAAK;AAAA,qBAAEnB,EAAAA,EAAQQ,MAAMW;AAAAA,YAAK;AAAA,YAC1BC,eAAgBC,CAAAA,MAAY;AAC1BrB,cAAAA,EAAAA,EAAQsB,aAAaD,EAAQF,SAAS,EAAE;AAAA,YAC1C;AAAA,YACAI,QAAQA,MAAM;AACZvB,cAAAA,EAAAA,EAAQwB,WAAAA;AAAAA,YACV;AAAA,YAAC,IACDjB,UAAO;AAAA,qBAAEP,EAAAA,EAAQQ,MAAMC,KAAKC,OAAOC,SAAS;AAAA,YAAC;AAAA,YAAA,IAC7CE,WAAQ;AAAA,qBAAEX,EAAMW,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAEZ,EAAMY,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCF,WAAQ;AAAA,qBAAEV,EAAMU,YAAY;AAAA,YAAK;AAAA,UAAA,GAC7BT,GAAM;AAAA,YAAA,IAAAY,WAAA;AAAA,qBAAA,CAAAV,EAEToB,GAAe;AAAA,gBAAA,IAAAV,WAAA;AAAA,yBAAEb,EAAMwB;AAAAA,gBAAK;AAAA,cAAA,CAAA,GAAAC,EAAA,MAC5BzB,EAAMa,QAAQ,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,CAAA,GAAAV,EAEhBuB,GAAU;AAAA,YAAA,IAAClB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5CwB,GAAgB;AAAA,YAAA,IAAAd,WAAA;AAAA,qBAAEb,EAAM4B;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}
|
package/package.json
CHANGED
|
@@ -27,7 +27,7 @@ export const Form: Component<FormProps> = (props) => {
|
|
|
27
27
|
|
|
28
28
|
return (
|
|
29
29
|
<form
|
|
30
|
-
class={cn('space-y-
|
|
30
|
+
class={cn('space-y-8 relative', local.class)}
|
|
31
31
|
onSubmit={(submitEvent) => {
|
|
32
32
|
submitEvent.preventDefault();
|
|
33
33
|
submitEvent.stopPropagation();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type Component, type ComponentProps, splitProps } from 'solid-js';
|
|
2
2
|
|
|
3
3
|
import { Field, FieldContent, FieldError, FieldDescription } from '@/components/Field';
|
|
4
|
-
import { RadioGroup } from '@/components/RadioGroup';
|
|
4
|
+
import { RadioGroup, RadioGroupLabel } from '@/components/RadioGroup';
|
|
5
5
|
|
|
6
6
|
import { useFieldContext } from './context';
|
|
7
7
|
|
|
@@ -12,7 +12,14 @@ export type RadioGroupFieldProps = ComponentProps<typeof RadioGroup> & {
|
|
|
12
12
|
|
|
13
13
|
export const RadioGroupField: Component<RadioGroupFieldProps> = (props) => {
|
|
14
14
|
const field = useFieldContext<string>();
|
|
15
|
-
const [local, others] = splitProps(props, [
|
|
15
|
+
const [local, others] = splitProps(props, [
|
|
16
|
+
'label',
|
|
17
|
+
'description',
|
|
18
|
+
'required',
|
|
19
|
+
'disabled',
|
|
20
|
+
'readOnly',
|
|
21
|
+
'children',
|
|
22
|
+
]);
|
|
16
23
|
|
|
17
24
|
return (
|
|
18
25
|
<Field
|
|
@@ -35,7 +42,10 @@ export const RadioGroupField: Component<RadioGroupFieldProps> = (props) => {
|
|
|
35
42
|
readOnly={local.readOnly ?? false}
|
|
36
43
|
required={local.required ?? false}
|
|
37
44
|
{...others}
|
|
38
|
-
|
|
45
|
+
>
|
|
46
|
+
<RadioGroupLabel>{local.label}</RadioGroupLabel>
|
|
47
|
+
{local.children}
|
|
48
|
+
</RadioGroup>
|
|
39
49
|
<FieldError errors={field().state.meta.errors} />
|
|
40
50
|
<FieldDescription>{local.description}</FieldDescription>
|
|
41
51
|
</FieldContent>
|