formeact 0.0.3 → 0.0.5

package/dist/components/builder/footer.js

@@ -36,7 +36,7 @@ export function Footer({ style, data, icon = _jsx(CheckCircle, {}), button = "Su
             toast.error(err.message);
         }
     };
-    return (_jsxs(RowBox, { style: styles.container, children: [_jsx(Button, { style: cn(styles.submit, style), size: "sm", icon: icon, action: submitForm, disabled: !isValid, children: button }), clear && cancel && (_jsx(Button, { style: styles.cancel, size: "sm", variant: "secondary", icon: _jsx(XCircle, {}), action: clear, children: "Cancel" }))] }));
+    return (_jsxs(RowBox, { style: styles.container, children: [_jsx(Button, { style: cn(styles.submit, style), size: "sm", icon: icon, action: submitForm, disabled: !isValid, children: button }), clear && cancel && (_jsx(Button, { style: styles.cancel, size: "sm", variant: "surface", icon: _jsx(XCircle, {}), action: clear, children: "Cancel" }))] }));
 }
 const styles = {
     container: "items-center gap-2 mt-2 w-full",

package/dist/components/fields/index.d.ts

@@ -0,0 +1,10 @@
+import { FormFieldProps } from "../../core/types";
+type Props<T> = {
+    direction?: "vertical" | "horizontal";
+    style?: string;
+    fields: FormFieldProps[][];
+    data: T;
+    update: (id: keyof T, x: string) => void;
+};
+export declare const FormFields: <T extends Record<string, string>>({ direction, style, fields, data, update }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/fields/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ColumnBox, RowBox, Input, ImageUploader } from "@bouko/react";
+import { cn } from "@bouko/style";
+export const FormFields = ({ direction = "vertical", style, fields, data, update }) => {
+    if (direction === "vertical")
+        return (_jsx(ColumnBox, { style: cn("gap-5", style), children: fields.map((row, i) => (_jsx(RowBox, { style: "w-full gap-5 items-center", children: row.map(({ element, id, label, style }) => {
+                    if (element === "input")
+                        return (_jsx(Input, { style: style, label: label, value: data[id], update: x => update(id, x) }, id));
+                    if (element === "image")
+                        return (_jsx(ImageUploader, { style: style, value: data[id], update: x => update(id, x), controls: true }, id));
+                }) }, i))) }));
+    else
+        return (_jsx(RowBox, { style: cn("gap-5 items-center overflow-hidden", style), children: fields.map((col, i) => (_jsx(ColumnBox, { style: cn("gap-5 overflow-hidden", i === fields.length - 1 && "grow"), children: col.map(({ element, id, label, style }) => {
+                    if (element === "input")
+                        return (_jsx(Input, { style: cn("w-full", style), label: label, value: data[id], update: x => update(id, x) }, id));
+                    if (element === "image")
+                        return (_jsx(ImageUploader, { style: style, value: data[id], update: x => update(id, x), controls: true }, id));
+                }) }, i))) }));
+};

package/dist/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./builder";
+export * from "./fields";
 export { default as Input } from "./elements/input";

package/dist/components/index.js

@@ -1,2 +1,3 @@
 export * from "./builder";
+export * from "./fields";
 export { default as Input } from "./elements/input";

package/dist/core/types.d.ts

@@ -6,6 +6,12 @@ export type FormSection<T = string> = {
     setField: (x: string, value: T) => void;
     clear: () => void;
 };
+export type FormFieldProps = {
+    id: string;
+    element: "input" | "image";
+    style?: string;
+    label?: string;
+};
 export type FormBuilderField<T = unknown> = (Omit<Field<string>, "value" | "update"> & {
     id: string;
     element: string;

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "formeact",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -22,7 +22,7 @@
 
   "dependencies": {
     "@bouko/notify": "^0.1.8",
-    "@bouko/react": "^2.6.6",
+    "@bouko/react": "^3.1.2",
     "@bouko/style": "^0.1.7",
     "@bouko/ts": "^0.2.0",
     "use-deep-compare": "^1.3.0"