@homebound/beam 2.117.2 → 2.117.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FieldState } from "@homebound/form-state
|
|
1
|
+
import { FieldState } from "@homebound/form-state";
|
|
2
2
|
import { Value } from "../inputs";
|
|
3
3
|
import { ChipSelectFieldProps } from "../inputs/ChipSelectField";
|
|
4
4
|
import { HasIdAndName, Optional } from "../types";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FieldState } from "@homebound/form-state
|
|
1
|
+
import { FieldState } from "@homebound/form-state";
|
|
2
2
|
import { MultiSelectFieldProps, Value } from "../inputs";
|
|
3
3
|
import { HasIdAndName, Optional } from "../types";
|
|
4
4
|
export declare type BoundMultiSelectFieldProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect" | "label"> & {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FieldState } from "@homebound/form-state
|
|
1
|
+
import { FieldState } from "@homebound/form-state";
|
|
2
2
|
import { SelectFieldProps, Value } from "../inputs";
|
|
3
3
|
import { HasIdAndName, Optional } from "../types";
|
|
4
4
|
export declare type BoundSelectFieldProps<T, V extends Value> = Omit<SelectFieldProps<T, V>, "value" | "onSelect" | "label"> & {
|
|
@@ -56,9 +56,9 @@ function FormStateApp() {
|
|
|
56
56
|
{ value: "a:4", label: "Iguana" },
|
|
57
57
|
{ value: "a:5", label: "Turtle" },
|
|
58
58
|
];
|
|
59
|
-
return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.wPx(700).$ }, { children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, Object.assign({ labelSuffix: { required: "*", optional: "(Opt)" } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }, void 0), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.StaticLinkField, { label: "Website", href: "https://google.com" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }, void 0), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows, observeRows: true }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.
|
|
59
|
+
return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.wPx(700).$ }, { children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, Object.assign({ labelSuffix: { required: "*", optional: "(Opt)" } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }, void 0), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.StaticLinkField, { label: "Website", href: "https://google.com" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }, void 0), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows, observeRows: true }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.revertChanges(), label: "Cancel" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
|
|
60
60
|
if (formState.canSave()) {
|
|
61
|
-
formState.
|
|
61
|
+
formState.commitChanges();
|
|
62
62
|
}
|
|
63
63
|
}, label: "Save" }, void 0)] }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Read Only", onClick: () => setReadOnly(!readOnly) }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.mt1.$ }, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Form Values:" }, void 0), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(formState.value, null, 2) }, void 0)] }), void 0)] }, void 0)] }), void 0)) }, void 0));
|
|
64
64
|
}
|
|
@@ -89,7 +89,7 @@ function MiscAuthorDetails({ formState, onBack }) {
|
|
|
89
89
|
var _a, _b;
|
|
90
90
|
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.mb1.$ }, { children: "Author Details" }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mb2.$ }, { children: (0, jsx_runtime_1.jsx)(BoundDateField_1.BoundDateField, { field: formState.birthday, helperText: "Required" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mb2.$ }, { children: (0, jsx_runtime_1.jsx)(BoundNumberField_1.BoundNumberField, { field: formState.heightInInches }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.bt.bGray300.py1.mt2.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { disabled: !formState.valid, onClick: () => {
|
|
91
91
|
if (formState.canSave()) {
|
|
92
|
-
formState.
|
|
92
|
+
formState.commitChanges();
|
|
93
93
|
setShowFormData(true);
|
|
94
94
|
}
|
|
95
95
|
}, label: "Save" }, void 0)] }), void 0), showFormData && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.mt5.$ }, { children: [(0, jsx_runtime_1.jsx)("h2", { children: "Form saved!" }, void 0), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "First Name" }, void 0), " ", formState.value.firstName] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Last Name" }, void 0), " ", formState.value.lastName] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Books" }, void 0), " ", (_a = formState.value.books) === null || _a === void 0 ? void 0 : _a.map((b) => b.title).join(", ")] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Birthday" }, void 0), " ", (_b = formState.value.birthday) === null || _b === void 0 ? void 0 : _b.toDateString()] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Height" }, void 0), " ", formState.value.heightInInches] }, void 0)] }, void 0)] }), void 0))] }, void 0));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@homebound/beam",
|
|
3
|
-
"version": "2.117.
|
|
3
|
+
"version": "2.117.3",
|
|
4
4
|
"author": "Homebound",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\""
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@homebound/form-state": "2.
|
|
36
|
+
"@homebound/form-state": "2.13.0",
|
|
37
37
|
"@internationalized/number": "^3.0.3",
|
|
38
38
|
"@react-aria/utils": "^3.9.0",
|
|
39
39
|
"@react-hook/resize-observer": "^1.2.2",
|