@manafishrov/ui 1.3.1 → 1.3.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/components/form/ComboboxField.d.ts +4 -2
- package/dist/components/form/ComboboxField.js +33 -32
- package/dist/components/form/ComboboxField.js.map +1 -1
- package/dist/components/form/DatePickerField.d.ts +5 -2
- package/dist/components/form/DatePickerField.js +25 -24
- package/dist/components/form/DatePickerField.js.map +1 -1
- package/dist/components/form/NumberInputField.d.ts +4 -2
- package/dist/components/form/NumberInputField.js +102 -73
- package/dist/components/form/NumberInputField.js.map +1 -1
- package/dist/components/form/SubmitButton.js +12 -9
- package/dist/components/form/SubmitButton.js.map +1 -1
- package/dist/components/form/TagsInputField.d.ts +4 -2
- package/dist/components/form/TagsInputField.js +32 -31
- package/dist/components/form/TagsInputField.js.map +1 -1
- package/package.json +1 -1
- package/src/components/form/ComboboxField.tsx +53 -8
- package/src/components/form/DatePickerField.tsx +54 -7
- package/src/components/form/NumberInputField.tsx +147 -39
- package/src/components/form/SubmitButton.tsx +2 -1
- package/src/components/form/TagsInputField.tsx +30 -7
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ComboboxRootProps } from '@ark-ui/solid';
|
|
2
2
|
import { Component, ComponentProps } from 'solid-js';
|
|
3
|
-
import { ComboboxInput } from '../Combobox';
|
|
4
|
-
|
|
3
|
+
import { Combobox, ComboboxInput } from '../Combobox';
|
|
4
|
+
declare const COMBOBOX_ROOT_PROPS: readonly ["placeholder", "inputBehavior", "openOnChange", "openOnClick", "openOnKeyPress", "closeOnSelect", "allowCustomValue", "multiple", "selectionBehavior", "autoFocus", "loopFocus", "positioning", "alwaysSubmitOnEnter", "composite", "defaultHighlightedValue", "defaultInputValue", "defaultOpen", "defaultValue", "disableLayer", "highlightedValue", "ids", "immediate", "inputValue", "lazyMount", "navigate", "onExitComplete", "onFocusOutside", "onHighlightChange", "onInputValueChange", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onSelect", "open", "present", "scrollToIndexFn", "skipAnimationOnMount", "translations", "unmountOnExit"];
|
|
5
|
+
export type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> & Pick<ComponentProps<typeof Combobox<string>>, (typeof COMBOBOX_ROOT_PROPS)[number]> & {
|
|
5
6
|
collection: ComboboxRootProps<string>['collection'];
|
|
6
7
|
label?: string;
|
|
7
8
|
description?: string;
|
|
@@ -11,3 +12,4 @@ export type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> & {
|
|
|
11
12
|
class?: string;
|
|
12
13
|
};
|
|
13
14
|
export declare const ComboboxField: Component<ComboboxFieldProps>;
|
|
15
|
+
export {};
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import { createComponent as e, mergeProps as
|
|
2
|
-
import { Combobox as
|
|
3
|
-
import { Field as
|
|
4
|
-
import { useFieldContext as
|
|
5
|
-
import { splitProps as
|
|
6
|
-
var
|
|
7
|
-
const
|
|
8
|
-
const [t, r] =
|
|
9
|
-
return [e(
|
|
1
|
+
import { createComponent as e, mergeProps as a, insert as s, memo as u, template as c } from "solid-js/web";
|
|
2
|
+
import { Combobox as h, ComboboxControl as p, ComboboxInput as m, ComboboxClearTrigger as C, ComboboxTrigger as b, ComboboxPositioner as O, ComboboxContent as f, ComboboxList as x } from "../Combobox.js";
|
|
3
|
+
import { Field as T, FieldLabel as v, FieldContent as w, FieldError as F, FieldDescription as P } from "../Field.js";
|
|
4
|
+
import { useFieldContext as y } from "./context.js";
|
|
5
|
+
import { splitProps as i } from "solid-js";
|
|
6
|
+
var B = /* @__PURE__ */ c('<div class="gap-1 flex items-center">');
|
|
7
|
+
const V = ["placeholder", "inputBehavior", "openOnChange", "openOnClick", "openOnKeyPress", "closeOnSelect", "allowCustomValue", "multiple", "selectionBehavior", "autoFocus", "loopFocus", "positioning", "alwaysSubmitOnEnter", "composite", "defaultHighlightedValue", "defaultInputValue", "defaultOpen", "defaultValue", "disableLayer", "highlightedValue", "ids", "immediate", "inputValue", "lazyMount", "navigate", "onExitComplete", "onFocusOutside", "onHighlightChange", "onInputValueChange", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onSelect", "open", "present", "scrollToIndexFn", "skipAnimationOnMount", "translations", "unmountOnExit"], _ = (l) => {
|
|
8
|
+
const [t, r] = i(l, ["showTrigger", "showClearTrigger", "children"]);
|
|
9
|
+
return [e(p, {
|
|
10
10
|
get children() {
|
|
11
|
-
return [e(
|
|
12
|
-
var o =
|
|
13
|
-
return
|
|
14
|
-
var n =
|
|
15
|
-
return () => n() && e(
|
|
16
|
-
})(), null),
|
|
17
|
-
var n =
|
|
11
|
+
return [e(m, r), (() => {
|
|
12
|
+
var o = B();
|
|
13
|
+
return s(o, (() => {
|
|
14
|
+
var n = u(() => t.showClearTrigger === !0);
|
|
15
|
+
return () => n() && e(C, {});
|
|
16
|
+
})(), null), s(o, (() => {
|
|
17
|
+
var n = u(() => t.showTrigger === !0);
|
|
18
18
|
return () => n() && e(b, {});
|
|
19
19
|
})(), null), o;
|
|
20
20
|
})()];
|
|
21
21
|
}
|
|
22
|
-
}), e(
|
|
22
|
+
}), e(O, {
|
|
23
23
|
get children() {
|
|
24
|
-
return e(
|
|
24
|
+
return e(f, {
|
|
25
25
|
get children() {
|
|
26
26
|
return e(x, {
|
|
27
27
|
get children() {
|
|
@@ -32,9 +32,9 @@ const y = (l) => {
|
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
})];
|
|
35
|
-
},
|
|
36
|
-
const t =
|
|
37
|
-
return e(
|
|
35
|
+
}, I = ["label", "description", "required", "disabled", "readOnly", "collection", "showTrigger", "showClearTrigger", "children"], q = (l) => {
|
|
36
|
+
const t = y(), [r, o] = i(l, I), [n, g] = i(o, V);
|
|
37
|
+
return e(T, {
|
|
38
38
|
get invalid() {
|
|
39
39
|
return t().state.meta.errors.length > 0;
|
|
40
40
|
},
|
|
@@ -48,21 +48,21 @@ const y = (l) => {
|
|
|
48
48
|
return r.required ?? !1;
|
|
49
49
|
},
|
|
50
50
|
get children() {
|
|
51
|
-
return [e(
|
|
51
|
+
return [e(v, {
|
|
52
52
|
get children() {
|
|
53
53
|
return r.label;
|
|
54
54
|
}
|
|
55
|
-
}), e(
|
|
55
|
+
}), e(w, {
|
|
56
56
|
get children() {
|
|
57
|
-
return [e(
|
|
57
|
+
return [e(h, a({
|
|
58
58
|
get collection() {
|
|
59
59
|
return r.collection;
|
|
60
60
|
},
|
|
61
61
|
get value() {
|
|
62
62
|
return t().state.value;
|
|
63
63
|
},
|
|
64
|
-
onValueChange: (
|
|
65
|
-
t().handleChange(
|
|
64
|
+
onValueChange: (d) => {
|
|
65
|
+
t().handleChange(d.value);
|
|
66
66
|
},
|
|
67
67
|
onBlur: () => {
|
|
68
68
|
t().handleBlur();
|
|
@@ -75,26 +75,27 @@ const y = (l) => {
|
|
|
75
75
|
},
|
|
76
76
|
get readOnly() {
|
|
77
77
|
return r.readOnly ?? !1;
|
|
78
|
-
}
|
|
78
|
+
}
|
|
79
|
+
}, n, {
|
|
79
80
|
get children() {
|
|
80
|
-
return e(
|
|
81
|
+
return e(_, a({
|
|
81
82
|
get showTrigger() {
|
|
82
83
|
return r.showTrigger;
|
|
83
84
|
},
|
|
84
85
|
get showClearTrigger() {
|
|
85
86
|
return r.showClearTrigger;
|
|
86
87
|
}
|
|
87
|
-
},
|
|
88
|
+
}, g, {
|
|
88
89
|
get children() {
|
|
89
90
|
return r.children;
|
|
90
91
|
}
|
|
91
92
|
}));
|
|
92
93
|
}
|
|
93
|
-
}), e(
|
|
94
|
+
})), e(F, {
|
|
94
95
|
get errors() {
|
|
95
96
|
return t().state.meta.errors;
|
|
96
97
|
}
|
|
97
|
-
}), e(
|
|
98
|
+
}), e(P, {
|
|
98
99
|
get children() {
|
|
99
100
|
return r.description;
|
|
100
101
|
}
|
|
@@ -105,6 +106,6 @@ const y = (l) => {
|
|
|
105
106
|
});
|
|
106
107
|
};
|
|
107
108
|
export {
|
|
108
|
-
|
|
109
|
+
q as ComboboxField
|
|
109
110
|
};
|
|
110
111
|
//# sourceMappingURL=ComboboxField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxField.js","sources":["../../../src/components/form/ComboboxField.tsx"],"sourcesContent":["import type { ComboboxRootProps } from '@ark-ui/solid';\nimport type { Component, ComponentProps } from 'solid-js';\n\nimport {\n Combobox,\n ComboboxContent,\n ComboboxInput,\n ComboboxList,\n ComboboxPositioner,\n ComboboxControl,\n ComboboxTrigger,\n ComboboxClearTrigger,\n} from '@/components/Combobox';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\n\nimport { useFieldContext } from './context';\n\nexport type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> & {\n
|
|
1
|
+
{"version":3,"file":"ComboboxField.js","sources":["../../../src/components/form/ComboboxField.tsx"],"sourcesContent":["import type { ComboboxRootProps } from '@ark-ui/solid';\nimport type { Component, ComponentProps } from 'solid-js';\n\nimport {\n Combobox,\n ComboboxContent,\n ComboboxInput,\n ComboboxList,\n ComboboxPositioner,\n ComboboxControl,\n ComboboxTrigger,\n ComboboxClearTrigger,\n} from '@/components/Combobox';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\n\nimport { useFieldContext } from './context';\n\nconst COMBOBOX_ROOT_PROPS = [\n 'placeholder',\n 'inputBehavior',\n 'openOnChange',\n 'openOnClick',\n 'openOnKeyPress',\n 'closeOnSelect',\n 'allowCustomValue',\n 'multiple',\n 'selectionBehavior',\n 'autoFocus',\n 'loopFocus',\n 'positioning',\n 'alwaysSubmitOnEnter',\n 'composite',\n 'defaultHighlightedValue',\n 'defaultInputValue',\n 'defaultOpen',\n 'defaultValue',\n 'disableLayer',\n 'highlightedValue',\n 'ids',\n 'immediate',\n 'inputValue',\n 'lazyMount',\n 'navigate',\n 'onExitComplete',\n 'onFocusOutside',\n 'onHighlightChange',\n 'onInputValueChange',\n 'onInteractOutside',\n 'onOpenChange',\n 'onPointerDownOutside',\n 'onSelect',\n 'open',\n 'present',\n 'scrollToIndexFn',\n 'skipAnimationOnMount',\n 'translations',\n 'unmountOnExit',\n] as const;\n\nexport type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> &\n Pick<ComponentProps<typeof Combobox<string>>, (typeof COMBOBOX_ROOT_PROPS)[number]> & {\n collection: ComboboxRootProps<string>['collection'];\n label?: string;\n description?: string;\n showTrigger?: boolean;\n showClearTrigger?: boolean;\n } & { class?: string };\n\nconst ComboboxInputGroup: Component<\n ComponentProps<typeof ComboboxInput> & {\n showTrigger?: boolean | undefined;\n showClearTrigger?: boolean | undefined;\n }\n> = (props) => {\n const [local, others] = splitProps(props, ['showTrigger', 'showClearTrigger', 'children']);\n\n return (\n <>\n <ComboboxControl>\n <ComboboxInput {...others} />\n <div class='gap-1 flex items-center'>\n {local.showClearTrigger === true && <ComboboxClearTrigger />}\n {local.showTrigger === true && <ComboboxTrigger />}\n </div>\n </ComboboxControl>\n <ComboboxPositioner>\n <ComboboxContent>\n <ComboboxList>{local.children}</ComboboxList>\n </ComboboxContent>\n </ComboboxPositioner>\n </>\n );\n};\n\nconst COMBOBOX_FIELD_PROPS = [\n 'label',\n 'description',\n 'required',\n 'disabled',\n 'readOnly',\n 'collection',\n 'showTrigger',\n 'showClearTrigger',\n 'children',\n] as const;\n\nexport const ComboboxField: Component<ComboboxFieldProps> = (props) => {\n const field = useFieldContext<string[]>();\n const [local, others] = splitProps(props, COMBOBOX_FIELD_PROPS);\n const [rootProps, inputProps] = splitProps(others, COMBOBOX_ROOT_PROPS);\n\n return (\n <Field\n invalid={field().state.meta.errors.length > 0}\n disabled={local.disabled ?? false}\n readOnly={local.readOnly ?? false}\n required={local.required ?? false}\n >\n <FieldLabel>{local.label}</FieldLabel>\n <FieldContent>\n <Combobox<string>\n collection={local.collection}\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 {...rootProps}\n >\n <ComboboxInputGroup\n showTrigger={local.showTrigger}\n showClearTrigger={local.showClearTrigger}\n {...inputProps}\n >\n {local.children}\n </ComboboxInputGroup>\n </Combobox>\n <FieldError errors={field().state.meta.errors} />\n <FieldDescription>{local.description}</FieldDescription>\n </FieldContent>\n </Field>\n );\n};\n"],"names":["COMBOBOX_ROOT_PROPS","ComboboxInputGroup","props","local","others","splitProps","_$createComponent","ComboboxControl","children","ComboboxInput","_el$","_tmpl$","_$insert","_c$","_$memo","showClearTrigger","ComboboxClearTrigger","_c$2","showTrigger","ComboboxTrigger","ComboboxPositioner","ComboboxContent","ComboboxList","COMBOBOX_FIELD_PROPS","ComboboxField","field","useFieldContext","rootProps","inputProps","Field","invalid","state","meta","errors","length","disabled","readOnly","required","FieldLabel","label","FieldContent","Combobox","_$mergeProps","collection","value","onValueChange","details","handleChange","onBlur","handleBlur","FieldError","FieldDescription","description"],"mappings":"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"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { DatePickerInputProps } from '@ark-ui/solid';
|
|
2
|
-
import { Component } from 'solid-js';
|
|
3
|
-
|
|
2
|
+
import { Component, ComponentProps } from 'solid-js';
|
|
3
|
+
import { DatePicker } from '../DatePicker';
|
|
4
|
+
declare const DATE_PICKER_ROOT_PROPS: readonly ["min", "max", "locale", "timeZone", "format", "parse", "selectionMode", "numOfMonths", "fixedWeeks", "startOfWeek", "showWeekNumbers", "outsideDaySelectable", "isDateUnavailable", "openOnClick", "positioning", "closeOnSelect", "defaultFocusedValue", "defaultOpen", "defaultValue", "defaultView", "focusedValue", "ids", "immediate", "inline", "lazyMount", "maxSelectedDates", "maxView", "minView", "name", "onExitComplete", "onFocusChange", "onOpenChange", "onValueChange", "onViewChange", "onVisibleRangeChange", "open", "present", "skipAnimationOnMount", "translations", "unmountOnExit", "view"];
|
|
5
|
+
export type DatePickerFieldProps = DatePickerInputProps & Pick<ComponentProps<typeof DatePicker>, (typeof DATE_PICKER_ROOT_PROPS)[number]> & {
|
|
4
6
|
label?: string;
|
|
5
7
|
description?: string;
|
|
6
8
|
showTrigger?: boolean;
|
|
7
9
|
};
|
|
8
10
|
export declare const DatePickerField: Component<DatePickerFieldProps>;
|
|
11
|
+
export {};
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import { createComponent as e, mergeProps as
|
|
2
|
-
import { DatePicker as
|
|
3
|
-
import { Field as
|
|
4
|
-
import { useFieldContext as
|
|
5
|
-
import { splitProps as
|
|
6
|
-
const
|
|
7
|
-
const [t, r] =
|
|
8
|
-
return [e(
|
|
1
|
+
import { createComponent as e, mergeProps as o, Show as u } from "solid-js/web";
|
|
2
|
+
import { DatePicker as g, DatePickerControl as c, DatePickerInput as h, DatePickerTrigger as p, DatePickerPositioner as m, DatePickerContent as f, DatePickerViews as P } from "../DatePicker.js";
|
|
3
|
+
import { Field as O, FieldLabel as C, FieldContent as D, FieldError as w, FieldDescription as k } from "../Field.js";
|
|
4
|
+
import { useFieldContext as b } from "./context.js";
|
|
5
|
+
import { splitProps as i } from "solid-js";
|
|
6
|
+
const V = ["min", "max", "locale", "timeZone", "format", "parse", "selectionMode", "numOfMonths", "fixedWeeks", "startOfWeek", "showWeekNumbers", "outsideDaySelectable", "isDateUnavailable", "openOnClick", "positioning", "closeOnSelect", "defaultFocusedValue", "defaultOpen", "defaultValue", "defaultView", "focusedValue", "ids", "immediate", "inline", "lazyMount", "maxSelectedDates", "maxView", "minView", "name", "onExitComplete", "onFocusChange", "onOpenChange", "onValueChange", "onViewChange", "onVisibleRangeChange", "open", "present", "skipAnimationOnMount", "translations", "unmountOnExit", "view"], F = (n) => {
|
|
7
|
+
const [t, r] = i(n, ["showTrigger"]);
|
|
8
|
+
return [e(c, {
|
|
9
9
|
get children() {
|
|
10
|
-
return [e(
|
|
10
|
+
return [e(h, r), e(u, {
|
|
11
11
|
get when() {
|
|
12
12
|
return t.showTrigger !== !1;
|
|
13
13
|
},
|
|
14
14
|
get children() {
|
|
15
|
-
return e(
|
|
15
|
+
return e(p, {});
|
|
16
16
|
}
|
|
17
17
|
})];
|
|
18
18
|
}
|
|
19
|
-
}), e(
|
|
19
|
+
}), e(m, {
|
|
20
20
|
get children() {
|
|
21
|
-
return e(
|
|
21
|
+
return e(f, {
|
|
22
22
|
get children() {
|
|
23
|
-
return e(
|
|
23
|
+
return e(P, {});
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
26
|
}
|
|
27
27
|
})];
|
|
28
|
-
},
|
|
29
|
-
const t =
|
|
30
|
-
return e(
|
|
28
|
+
}, T = ["label", "description", "required", "disabled", "readOnly", "placeholder", "showTrigger"], S = (n) => {
|
|
29
|
+
const t = b(), [r, l] = i(n, T), [a, s] = i(l, V);
|
|
30
|
+
return e(O, {
|
|
31
31
|
get invalid() {
|
|
32
32
|
return t().state.meta.errors.length > 0;
|
|
33
33
|
},
|
|
@@ -41,18 +41,18 @@ const C = (n) => {
|
|
|
41
41
|
return r.required ?? !1;
|
|
42
42
|
},
|
|
43
43
|
get children() {
|
|
44
|
-
return [e(
|
|
44
|
+
return [e(C, {
|
|
45
45
|
get children() {
|
|
46
46
|
return r.label;
|
|
47
47
|
}
|
|
48
48
|
}), e(D, {
|
|
49
49
|
get children() {
|
|
50
|
-
return [e(
|
|
50
|
+
return [e(g, o({
|
|
51
51
|
get value() {
|
|
52
52
|
return t().state.value;
|
|
53
53
|
},
|
|
54
|
-
onValueChange: (
|
|
55
|
-
t().handleChange(
|
|
54
|
+
onValueChange: (d) => {
|
|
55
|
+
t().handleChange(d.value);
|
|
56
56
|
},
|
|
57
57
|
onBlur: () => {
|
|
58
58
|
t().handleBlur();
|
|
@@ -65,9 +65,10 @@ const C = (n) => {
|
|
|
65
65
|
},
|
|
66
66
|
get readOnly() {
|
|
67
67
|
return r.readOnly ?? !1;
|
|
68
|
-
}
|
|
68
|
+
}
|
|
69
|
+
}, a, {
|
|
69
70
|
get children() {
|
|
70
|
-
return e(
|
|
71
|
+
return e(F, o(s, {
|
|
71
72
|
get placeholder() {
|
|
72
73
|
return r.placeholder;
|
|
73
74
|
}
|
|
@@ -75,7 +76,7 @@ const C = (n) => {
|
|
|
75
76
|
showTrigger: r.showTrigger
|
|
76
77
|
}));
|
|
77
78
|
}
|
|
78
|
-
}), e(
|
|
79
|
+
})), e(w, {
|
|
79
80
|
get errors() {
|
|
80
81
|
return t().state.meta.errors;
|
|
81
82
|
}
|
|
@@ -90,6 +91,6 @@ const C = (n) => {
|
|
|
90
91
|
});
|
|
91
92
|
};
|
|
92
93
|
export {
|
|
93
|
-
|
|
94
|
+
S as DatePickerField
|
|
94
95
|
};
|
|
95
96
|
//# sourceMappingURL=DatePickerField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerField.js","sources":["../../../src/components/form/DatePickerField.tsx"],"sourcesContent":["import type { DatePickerInputProps, DateValue } from '@ark-ui/solid';\nimport type { Component } from 'solid-js';\n\nimport {\n DatePicker,\n DatePickerContent,\n DatePickerControl,\n DatePickerInput,\n DatePickerPositioner,\n DatePickerTrigger,\n DatePickerViews,\n} from '@/components/DatePicker';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\n\nimport { useFieldContext } from './context';\n\nexport type DatePickerFieldProps = DatePickerInputProps & {\n
|
|
1
|
+
{"version":3,"file":"DatePickerField.js","sources":["../../../src/components/form/DatePickerField.tsx"],"sourcesContent":["import type { DatePickerInputProps, DateValue } from '@ark-ui/solid';\nimport type { Component, ComponentProps } from 'solid-js';\n\nimport {\n DatePicker,\n DatePickerContent,\n DatePickerControl,\n DatePickerInput,\n DatePickerPositioner,\n DatePickerTrigger,\n DatePickerViews,\n} from '@/components/DatePicker';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\n\nimport { useFieldContext } from './context';\n\nconst DATE_PICKER_ROOT_PROPS = [\n 'min',\n 'max',\n 'locale',\n 'timeZone',\n 'format',\n 'parse',\n 'selectionMode',\n 'numOfMonths',\n 'fixedWeeks',\n 'startOfWeek',\n 'showWeekNumbers',\n 'outsideDaySelectable',\n 'isDateUnavailable',\n 'openOnClick',\n 'positioning',\n 'closeOnSelect',\n 'defaultFocusedValue',\n 'defaultOpen',\n 'defaultValue',\n 'defaultView',\n 'focusedValue',\n 'ids',\n 'immediate',\n 'inline',\n 'lazyMount',\n 'maxSelectedDates',\n 'maxView',\n 'minView',\n 'name',\n 'onExitComplete',\n 'onFocusChange',\n 'onOpenChange',\n 'onValueChange',\n 'onViewChange',\n 'onVisibleRangeChange',\n 'open',\n 'present',\n 'skipAnimationOnMount',\n 'translations',\n 'unmountOnExit',\n 'view',\n] as const;\n\nexport type DatePickerFieldProps = DatePickerInputProps &\n Pick<ComponentProps<typeof DatePicker>, (typeof DATE_PICKER_ROOT_PROPS)[number]> & {\n label?: string;\n description?: string;\n showTrigger?: boolean;\n };\n\nconst DatePickerInputGroup: Component<DatePickerInputProps & { showTrigger?: boolean }> = (\n props,\n) => {\n const [local, others] = splitProps(props, ['showTrigger']);\n\n return (\n <>\n <DatePickerControl>\n <DatePickerInput {...others} />\n <Show when={local.showTrigger !== false}>\n <DatePickerTrigger />\n </Show>\n </DatePickerControl>\n <DatePickerPositioner>\n <DatePickerContent>\n <DatePickerViews />\n </DatePickerContent>\n </DatePickerPositioner>\n </>\n );\n};\n\nconst DATE_PICKER_FIELD_PROPS = [\n 'label',\n 'description',\n 'required',\n 'disabled',\n 'readOnly',\n 'placeholder',\n 'showTrigger',\n] as const;\n\nexport const DatePickerField: Component<DatePickerFieldProps> = (props) => {\n const field = useFieldContext<DateValue[]>();\n const [local, others] = splitProps(props, DATE_PICKER_FIELD_PROPS);\n const [rootProps, inputProps] = splitProps(others, DATE_PICKER_ROOT_PROPS);\n\n return (\n <Field\n invalid={field().state.meta.errors.length > 0}\n disabled={local.disabled ?? false}\n readOnly={local.readOnly ?? false}\n required={local.required ?? false}\n >\n <FieldLabel>{local.label}</FieldLabel>\n <FieldContent>\n <DatePicker\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 {...rootProps}\n >\n <DatePickerInputGroup\n {...inputProps}\n placeholder={local.placeholder}\n {...(typeof local.showTrigger === 'boolean' && { showTrigger: local.showTrigger })}\n />\n </DatePicker>\n <FieldError errors={field().state.meta.errors} />\n <FieldDescription>{local.description}</FieldDescription>\n </FieldContent>\n </Field>\n );\n};\n"],"names":["DATE_PICKER_ROOT_PROPS","DatePickerInputGroup","props","local","others","splitProps","_$createComponent","DatePickerControl","children","DatePickerInput","_$Show","when","showTrigger","DatePickerTrigger","DatePickerPositioner","DatePickerContent","DatePickerViews","DATE_PICKER_FIELD_PROPS","DatePickerField","field","useFieldContext","rootProps","inputProps","Field","invalid","state","meta","errors","length","disabled","readOnly","required","FieldLabel","label","FieldContent","DatePicker","_$mergeProps","value","onValueChange","details","handleChange","onBlur","handleBlur","placeholder","FieldError","FieldDescription","description"],"mappings":"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"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { Component, ComponentProps } from 'solid-js';
|
|
2
|
-
import { NumberInputInput } from '../NumberInput';
|
|
3
|
-
|
|
2
|
+
import { NumberInput, NumberInputInput } from '../NumberInput';
|
|
3
|
+
declare const NUMBER_INPUT_ROOT_PROPS: readonly ["min", "max", "step", "allowMouseWheel", "allowOverflow", "clampValueOnBlur", "formatOptions", "inputMode", "locale", "pattern", "spinOnPress", "focusInputOnChange", "translations", "form", "name", "onValueInvalid"];
|
|
4
|
+
export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & Pick<ComponentProps<typeof NumberInput>, (typeof NUMBER_INPUT_ROOT_PROPS)[number]> & {
|
|
4
5
|
label?: string;
|
|
5
6
|
description?: string;
|
|
6
7
|
showTriggers?: boolean;
|
|
7
8
|
};
|
|
8
9
|
export declare const NumberInputField: Component<NumberInputFieldProps>;
|
|
10
|
+
export {};
|
|
@@ -1,81 +1,110 @@
|
|
|
1
|
-
import { createComponent as
|
|
2
|
-
import { Field as
|
|
3
|
-
import { NumberInput as
|
|
4
|
-
import { useFieldContext as
|
|
5
|
-
import { splitProps as
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
return
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { createComponent as r, mergeProps as s, Show as d } from "solid-js/web";
|
|
2
|
+
import { Field as c, FieldLabel as g, FieldContent as h, FieldError as b, FieldDescription as f } from "../Field.js";
|
|
3
|
+
import { NumberInput as V, NumberInputControl as C, NumberInputInput as N, NumberInputTriggers as I } from "../NumberInput.js";
|
|
4
|
+
import { useFieldContext as O } from "./context.js";
|
|
5
|
+
import { splitProps as m, createSignal as F, createEffect as v } from "solid-js";
|
|
6
|
+
const P = ["min", "max", "step", "allowMouseWheel", "allowOverflow", "clampValueOnBlur", "formatOptions", "inputMode", "locale", "pattern", "spinOnPress", "focusInputOnChange", "translations", "form", "name", "onValueInvalid"], u = (e) => typeof e != "number" || !Number.isFinite(e) ? "" : String(e), B = (e) => {
|
|
7
|
+
const [l, n] = F(u(e().state.value));
|
|
8
|
+
return v(() => {
|
|
9
|
+
n(u(e().state.value));
|
|
10
|
+
}), {
|
|
11
|
+
inputValue: l,
|
|
12
|
+
onValueChange: (t) => {
|
|
13
|
+
n(t.value);
|
|
11
14
|
},
|
|
12
|
-
|
|
13
|
-
|
|
15
|
+
onValueCommit: (t) => {
|
|
16
|
+
n(t.value), Number.isFinite(t.valueAsNumber) && e().handleChange(t.valueAsNumber);
|
|
14
17
|
},
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
get readOnly() {
|
|
19
|
-
return r.readOnly ?? !1;
|
|
20
|
-
},
|
|
21
|
-
get children() {
|
|
22
|
-
return [e(a, {
|
|
23
|
-
get children() {
|
|
24
|
-
return r.label;
|
|
25
|
-
}
|
|
26
|
-
}), e(o, {
|
|
27
|
-
get children() {
|
|
28
|
-
return [e(m, {
|
|
29
|
-
get value() {
|
|
30
|
-
return String(t().state.value);
|
|
31
|
-
},
|
|
32
|
-
onValueChange: (i) => {
|
|
33
|
-
t().handleChange(i.valueAsNumber);
|
|
34
|
-
},
|
|
35
|
-
onBlur: () => {
|
|
36
|
-
t().handleBlur();
|
|
37
|
-
},
|
|
38
|
-
get invalid() {
|
|
39
|
-
return t().state.meta.errors.length > 0;
|
|
40
|
-
},
|
|
41
|
-
get disabled() {
|
|
42
|
-
return r.disabled ?? !1;
|
|
43
|
-
},
|
|
44
|
-
get readOnly() {
|
|
45
|
-
return r.readOnly ?? !1;
|
|
46
|
-
},
|
|
47
|
-
get required() {
|
|
48
|
-
return r.required ?? !1;
|
|
49
|
-
},
|
|
50
|
-
get children() {
|
|
51
|
-
return e(h, {
|
|
52
|
-
get children() {
|
|
53
|
-
return [e(p, l), e(u, {
|
|
54
|
-
get when() {
|
|
55
|
-
return r.showTriggers !== !1;
|
|
56
|
-
},
|
|
57
|
-
get children() {
|
|
58
|
-
return e(c, {});
|
|
59
|
-
}
|
|
60
|
-
})];
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
}), e(s, {
|
|
65
|
-
get errors() {
|
|
66
|
-
return t().state.meta.errors;
|
|
67
|
-
}
|
|
68
|
-
}), e(g, {
|
|
69
|
-
get children() {
|
|
70
|
-
return r.description;
|
|
71
|
-
}
|
|
72
|
-
})];
|
|
73
|
-
}
|
|
74
|
-
})];
|
|
18
|
+
onBlur: () => {
|
|
19
|
+
n(u(e().state.value)), e().handleBlur();
|
|
75
20
|
}
|
|
21
|
+
};
|
|
22
|
+
}, p = (e) => r(c, {
|
|
23
|
+
get invalid() {
|
|
24
|
+
return e.field().state.meta.errors.length > 0;
|
|
25
|
+
},
|
|
26
|
+
get required() {
|
|
27
|
+
return e.local.required ?? !1;
|
|
28
|
+
},
|
|
29
|
+
get disabled() {
|
|
30
|
+
return e.local.disabled ?? !1;
|
|
31
|
+
},
|
|
32
|
+
get readOnly() {
|
|
33
|
+
return e.local.readOnly ?? !1;
|
|
34
|
+
},
|
|
35
|
+
get children() {
|
|
36
|
+
return [r(g, {
|
|
37
|
+
get children() {
|
|
38
|
+
return e.local.label;
|
|
39
|
+
}
|
|
40
|
+
}), r(h, {
|
|
41
|
+
get children() {
|
|
42
|
+
return [r(V, s({
|
|
43
|
+
get value() {
|
|
44
|
+
return e.inputValue();
|
|
45
|
+
},
|
|
46
|
+
get onValueChange() {
|
|
47
|
+
return e.onValueChange;
|
|
48
|
+
},
|
|
49
|
+
get onValueCommit() {
|
|
50
|
+
return e.onValueCommit;
|
|
51
|
+
},
|
|
52
|
+
get onBlur() {
|
|
53
|
+
return e.onBlur;
|
|
54
|
+
},
|
|
55
|
+
get invalid() {
|
|
56
|
+
return e.field().state.meta.errors.length > 0;
|
|
57
|
+
},
|
|
58
|
+
get disabled() {
|
|
59
|
+
return e.local.disabled ?? !1;
|
|
60
|
+
},
|
|
61
|
+
get readOnly() {
|
|
62
|
+
return e.local.readOnly ?? !1;
|
|
63
|
+
},
|
|
64
|
+
get required() {
|
|
65
|
+
return e.local.required ?? !1;
|
|
66
|
+
}
|
|
67
|
+
}, () => e.rootProps, {
|
|
68
|
+
get children() {
|
|
69
|
+
return r(C, {
|
|
70
|
+
get children() {
|
|
71
|
+
return [r(N, s(() => e.inputProps)), r(d, {
|
|
72
|
+
get when() {
|
|
73
|
+
return e.local.showTriggers !== !1;
|
|
74
|
+
},
|
|
75
|
+
get children() {
|
|
76
|
+
return r(I, {});
|
|
77
|
+
}
|
|
78
|
+
})];
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
})), r(b, {
|
|
83
|
+
get errors() {
|
|
84
|
+
return e.field().state.meta.errors;
|
|
85
|
+
}
|
|
86
|
+
}), r(f, {
|
|
87
|
+
get children() {
|
|
88
|
+
return e.local.description;
|
|
89
|
+
}
|
|
90
|
+
})];
|
|
91
|
+
}
|
|
92
|
+
})];
|
|
93
|
+
}
|
|
94
|
+
}), x = (e) => {
|
|
95
|
+
const l = O(), [n, a] = m(e, ["label", "description", "required", "disabled", "readOnly", "showTriggers"]), [o, i] = m(a, P), t = B(l);
|
|
96
|
+
return p({
|
|
97
|
+
field: l,
|
|
98
|
+
local: n,
|
|
99
|
+
rootProps: o,
|
|
100
|
+
inputProps: i,
|
|
101
|
+
inputValue: t.inputValue,
|
|
102
|
+
onValueChange: t.onValueChange,
|
|
103
|
+
onValueCommit: t.onValueCommit,
|
|
104
|
+
onBlur: t.onBlur
|
|
76
105
|
});
|
|
77
106
|
};
|
|
78
107
|
export {
|
|
79
|
-
|
|
108
|
+
x as NumberInputField
|
|
80
109
|
};
|
|
81
110
|
//# sourceMappingURL=NumberInputField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/form/NumberInputField.tsx"],"sourcesContent":["import type { Component, ComponentProps } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport {\n NumberInput,\n NumberInputControl,\n NumberInputInput,\n NumberInputTriggers,\n} from '@/components/NumberInput';\n\nimport { useFieldContext } from './context';\n\nexport type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & {\n
|
|
1
|
+
{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/form/NumberInputField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSX } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport {\n NumberInput,\n NumberInputControl,\n NumberInputInput,\n NumberInputTriggers,\n} from '@/components/NumberInput';\n\nimport { useFieldContext } from './context';\n\nconst NUMBER_INPUT_ROOT_PROPS = [\n 'min',\n 'max',\n 'step',\n 'allowMouseWheel',\n 'allowOverflow',\n 'clampValueOnBlur',\n 'formatOptions',\n 'inputMode',\n 'locale',\n 'pattern',\n 'spinOnPress',\n 'focusInputOnChange',\n 'translations',\n 'form',\n 'name',\n 'onValueInvalid',\n] as const;\n\nexport type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> &\n Pick<ComponentProps<typeof NumberInput>, (typeof NUMBER_INPUT_ROOT_PROPS)[number]> & {\n label?: string;\n description?: string;\n showTriggers?: boolean;\n };\n\nconst toNumberInputValue = (value: number | undefined): string => {\n if (typeof value !== 'number' || !Number.isFinite(value)) {\n return '';\n }\n\n return String(value);\n};\n\ntype NumberInputFieldLocalProps = Pick<\n NumberInputFieldProps,\n 'label' | 'description' | 'required' | 'disabled' | 'readOnly' | 'showTriggers'\n>;\n\ntype NumberInputFieldRootProps = Pick<\n NumberInputFieldProps,\n (typeof NUMBER_INPUT_ROOT_PROPS)[number]\n>;\n\ntype RenderNumberInputFieldProps = {\n field: ReturnType<typeof useFieldContext<number>>;\n local: NumberInputFieldLocalProps;\n rootProps: NumberInputFieldRootProps;\n inputProps: Omit<\n NumberInputFieldProps,\n keyof NumberInputFieldLocalProps | keyof NumberInputFieldRootProps\n >;\n inputValue: () => string;\n onValueChange: NonNullable<ComponentProps<typeof NumberInput>['onValueChange']>;\n onValueCommit: NonNullable<ComponentProps<typeof NumberInput>['onValueCommit']>;\n onBlur: () => void;\n};\n\ntype NumberInputFieldState = Pick<\n RenderNumberInputFieldProps,\n 'inputValue' | 'onValueChange' | 'onValueCommit' | 'onBlur'\n>;\n\nconst createNumberInputFieldState = (\n field: ReturnType<typeof useFieldContext<number>>,\n): NumberInputFieldState => {\n const [inputValue, setInputValue] = createSignal(toNumberInputValue(field().state.value));\n\n createEffect(() => {\n setInputValue(toNumberInputValue(field().state.value));\n });\n\n const onValueChange: NonNullable<ComponentProps<typeof NumberInput>['onValueChange']> = (\n details,\n ) => {\n setInputValue(details.value);\n };\n\n const onValueCommit: NonNullable<ComponentProps<typeof NumberInput>['onValueCommit']> = (\n details,\n ) => {\n setInputValue(details.value);\n\n if (!Number.isFinite(details.valueAsNumber)) {\n return;\n }\n\n field().handleChange(details.valueAsNumber);\n };\n\n const onBlur = (): void => {\n setInputValue(toNumberInputValue(field().state.value));\n field().handleBlur();\n };\n\n return {\n inputValue,\n onValueChange,\n onValueCommit,\n onBlur,\n };\n};\n\nconst renderNumberInputField = (props: RenderNumberInputFieldProps): JSX.Element => (\n <Field\n invalid={props.field().state.meta.errors.length > 0}\n required={props.local.required ?? false}\n disabled={props.local.disabled ?? false}\n readOnly={props.local.readOnly ?? false}\n >\n <FieldLabel>{props.local.label}</FieldLabel>\n <FieldContent>\n <NumberInput\n value={props.inputValue()}\n onValueChange={props.onValueChange}\n onValueCommit={props.onValueCommit}\n onBlur={props.onBlur}\n invalid={props.field().state.meta.errors.length > 0}\n disabled={props.local.disabled ?? false}\n readOnly={props.local.readOnly ?? false}\n required={props.local.required ?? false}\n {...props.rootProps}\n >\n <NumberInputControl>\n <NumberInputInput {...props.inputProps} />\n <Show when={props.local.showTriggers !== false}>\n <NumberInputTriggers />\n </Show>\n </NumberInputControl>\n </NumberInput>\n <FieldError errors={props.field().state.meta.errors} />\n <FieldDescription>{props.local.description}</FieldDescription>\n </FieldContent>\n </Field>\n);\n\nexport const NumberInputField: Component<NumberInputFieldProps> = (props) => {\n const field = useFieldContext<number>();\n const [local, others] = splitProps(props, [\n 'label',\n 'description',\n 'required',\n 'disabled',\n 'readOnly',\n 'showTriggers',\n ]);\n const [rootProps, inputProps] = splitProps(others, NUMBER_INPUT_ROOT_PROPS);\n const state = createNumberInputFieldState(field);\n\n return renderNumberInputField({\n field,\n local,\n rootProps,\n inputProps,\n inputValue: state.inputValue,\n onValueChange: state.onValueChange,\n onValueCommit: state.onValueCommit,\n onBlur: state.onBlur,\n });\n};\n"],"names":["NUMBER_INPUT_ROOT_PROPS","toNumberInputValue","value","Number","isFinite","String","createNumberInputFieldState","field","inputValue","setInputValue","createSignal","state","createEffect","onValueChange","details","onValueCommit","valueAsNumber","handleChange","onBlur","handleBlur","renderNumberInputField","props","_$createComponent","Field","invalid","meta","errors","length","required","local","disabled","readOnly","children","FieldLabel","label","FieldContent","NumberInput","_$mergeProps","rootProps","NumberInputControl","NumberInputInput","inputProps","_$Show","when","showTriggers","NumberInputTriggers","FieldError","FieldDescription","description","NumberInputField","useFieldContext","others","splitProps"],"mappings":"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"}
|
|
@@ -1,20 +1,23 @@
|
|
|
1
|
-
import { createComponent as
|
|
1
|
+
import { createComponent as s, mergeProps as n } from "solid-js/web";
|
|
2
2
|
import { Button as a } from "../Button.js";
|
|
3
|
-
import { useFormContext as
|
|
4
|
-
import { splitProps as
|
|
5
|
-
const p = (
|
|
6
|
-
const
|
|
7
|
-
return
|
|
3
|
+
import { useFormContext as l } from "./context.js";
|
|
4
|
+
import { splitProps as m } from "solid-js";
|
|
5
|
+
const p = (r) => {
|
|
6
|
+
const e = l(), [t, o] = m(r, ["children", "loading", "disabled", "class"]), i = () => e.state.isSubmitting || e.state.isValidating || (t.loading ?? !1);
|
|
7
|
+
return s(a, n({
|
|
8
8
|
type: "submit",
|
|
9
9
|
get loading() {
|
|
10
10
|
return i();
|
|
11
11
|
},
|
|
12
12
|
get disabled() {
|
|
13
|
-
return
|
|
13
|
+
return t.disabled ?? !e.state.canSubmit;
|
|
14
|
+
},
|
|
15
|
+
get class() {
|
|
16
|
+
return `min-w-24 ${t.class ?? ""}`;
|
|
14
17
|
}
|
|
15
|
-
},
|
|
18
|
+
}, o, {
|
|
16
19
|
get children() {
|
|
17
|
-
return
|
|
20
|
+
return t.children;
|
|
18
21
|
}
|
|
19
22
|
}));
|
|
20
23
|
};
|