@plasmicpkgs/antd5 0.0.53 → 0.0.55

package/skinny/registerForm.esm.js

@@ -3,7 +3,7 @@ import { Form } from 'antd';
 import equal from 'fast-deep-equal';
 import React, { isValidElement, cloneElement } from 'react';
 import classNames from 'classnames';
-import { u as usePrevious, r as registerComponentHelper, o as omit } from './utils-94b1c934.esm.js';
+import { u as usePrevious, r as registerComponentHelper } from './utils-d0e80a56.esm.js';
 import '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
 
@@ -141,8 +141,9 @@ const FormItem = Form.Item;
 const FormList = Form.List;
 const PathContext = React.createContext({ relativePath: [], fullPath: [] });
 const InternalFormInstanceContext = React.createContext(void 0);
+const FormLayoutContext = React.createContext(void 0);
 const Internal = (props) => {
-  var _b, _c;
+  var _b, _c, _d;
   const [form] = Form.useForm();
   const values = form.getFieldsValue(true);
   const lastValue = React.useRef(values);
@@ -158,15 +159,26 @@ const Internal = (props) => {
   React.useEffect(() => {
     fireOnValuesChange();
   }, []);
+  const formLayout = React.useMemo(
+    () => {
+      var _a2;
+      return {
+        layout: props.layout,
+        labelSpan: (_a2 = props.labelCol) == null ? void 0 : _a2.span
+      };
+    },
+    [props.layout, (_b = props.labelCol) == null ? void 0 : _b.span]
+  );
   return /* @__PURE__ */ React.createElement(
     InternalFormInstanceContext.Provider,
     {
       value: {
+        layout: formLayout,
         fireOnValuesChange,
         forceRemount: () => setRemountKey((k) => k + 1)
       }
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React.createElement(
       Form,
       __spreadProps(__spreadValues({}, rest), {
         key: props.initialValues ? JSON.stringify(props.initialValues) : void 0,
@@ -176,16 +188,16 @@ const Internal = (props) => {
           extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(args[1]);
         },
         form,
-        labelCol: ((_b = props.labelCol) == null ? void 0 : _b.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
-        wrapperCol: ((_c = props.wrapperCol) == null ? void 0 : _c.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
+        labelCol: ((_c = props.labelCol) == null ? void 0 : _c.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
+        wrapperCol: ((_d = props.wrapperCol) == null ? void 0 : _d.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
       }),
       /* @__PURE__ */ React.createElement("style", null, `
-        .ant-form-item-explain + div, .ant-form-item-margin-offset {
-          display: none;
-        }
-        `),
+          .ant-form-item-explain + div, .ant-form-item-margin-offset {
+            display: none;
+          }
+          `),
       childrenNode
-    )
+    ))
   );
 };
 function FormWrapper(props) {
@@ -239,40 +251,41 @@ const COMMON_ACTIONS = [
   //   },
   // },
 ];
-function registerForm(loader) {
-  const colProp = (displayName, defaultValue) => ({
-    type: "object",
-    displayName,
-    advanced: true,
-    fields: {
-      span: {
-        type: "number",
-        displayName: "Grid columns",
-        description: "The number of grid columns to span (24 columns available)",
-        min: 1,
-        max: 24
-      },
-      offset: {
-        type: "number",
-        displayName: "Offset columns",
-        description: "Number of grid columns to skip from the left",
-        min: 0,
-        max: 23
-      },
-      horizontalOnly: {
-        type: "boolean",
-        displayName: "Horizontal only",
-        description: "Only apply to horizontal layout"
-      }
+const colProp = (displayName, defaultValue, description) => ({
+  type: "object",
+  displayName,
+  advanced: true,
+  fields: {
+    span: {
+      type: "number",
+      displayName: "Width",
+      description: "The number of grid columns to span in width (out of 24 columns total)",
+      min: 1,
+      max: 24
     },
-    defaultValue
-  });
+    offset: {
+      type: "number",
+      displayName: "Offset",
+      description: "Number of grid columns to skip from the left (out of 24 columns total)",
+      min: 0,
+      max: 23
+    },
+    horizontalOnly: {
+      type: "boolean",
+      displayName: "Horizontal only",
+      description: "Only apply to horizontal layout"
+    }
+  },
+  description,
+  defaultValue
+});
+function registerForm(loader) {
   registerComponentHelper(loader, FormWrapper, {
     name: "plasmic-antd5-form",
     displayName: "Form",
     defaultStyles: {
-      display: "plasmic-content-layout",
-      gridRowGap: "10px"
+      layout: "vbox",
+      alignItems: "flex-start"
     },
     props: {
       children: {
@@ -310,13 +323,21 @@ function registerForm(loader) {
           },
           {
             type: "component",
-            name: "plasmic-antd5-button",
+            name: "plasmic-antd5-form-item",
             props: {
+              noLabel: true,
               children: {
-                type: "text",
-                value: "Submit"
-              },
-              submitsForm: true
+                type: "component",
+                name: "plasmic-antd5-button",
+                props: {
+                  children: {
+                    type: "text",
+                    value: "Submit"
+                  },
+                  type: "primary",
+                  submitsForm: true
+                }
+              }
             }
           }
         ]
@@ -333,16 +354,25 @@ function registerForm(loader) {
         type: "choice",
         options: ["left", "right"],
         defaultValueHint: "right",
-        advanced: true
+        advanced: true,
+        hidden: (ps) => ps.layout !== "horizontal"
       },
-      labelCol: colProp("Label layout", {
-        span: 8,
-        horizontalOnly: true
-      }),
-      wrapperCol: colProp("Field layout", {
-        span: 16,
-        horizontalOnly: true
-      }),
+      labelCol: colProp(
+        "Label layout",
+        {
+          span: 8,
+          horizontalOnly: true
+        },
+        "Set the width and offset of the labels"
+      ),
+      wrapperCol: colProp(
+        "Control layout",
+        {
+          span: 16,
+          horizontalOnly: true
+        },
+        "Set the width and offset of the form controls"
+      ),
       colon: {
         type: "boolean",
         description: `Show a colon after labels by default (only for horizontal layout)`,
@@ -430,6 +460,7 @@ function registerForm(loader) {
 }
 function plasmicRulesToAntdRules(plasmicRules, label) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const effectiveLabel = label || "This field";
   const rules = [];
   for (const plasmicRule of plasmicRules) {
     switch (plasmicRule.ruleType) {
@@ -437,37 +468,37 @@ function plasmicRulesToAntdRules(plasmicRules, label) {
         rules.push({
           type: "enum",
           enum: (_b = (_a = plasmicRule.options) == null ? void 0 : _a.map((opt) => opt.value)) != null ? _b : [],
-          message: (_c = plasmicRule.message) != null ? _c : `Please specify a valid value`
+          message: (_c = plasmicRule.message) != null ? _c : `${effectiveLabel} must be a valid value`
         });
         break;
       case "required":
         rules.push({
           required: true,
-          message: (_d = plasmicRule.message) != null ? _d : `Please specify ${label || "this field"}`
+          message: (_d = plasmicRule.message) != null ? _d : `${effectiveLabel} is required`
         });
         break;
       case "regex":
         rules.push({
           pattern: new RegExp((_e = plasmicRule.pattern) != null ? _e : ""),
-          message: (_f = plasmicRule.message) != null ? _f : `Please enter a valid value`
+          message: (_f = plasmicRule.message) != null ? _f : `${effectiveLabel} must be a valid value`
         });
         break;
       case "whitespace":
         rules.push({
           whitespace: true,
-          message: (_g = plasmicRule.message) != null ? _g : `Please specify ${label || "this field"}`
+          message: (_g = plasmicRule.message) != null ? _g : `${effectiveLabel} is required`
         });
         break;
       case "min":
         rules.push({
           [plasmicRule.ruleType]: plasmicRule.length,
-          message: (_h = plasmicRule.message) != null ? _h : `Must be at least ${plasmicRule.length} characters`
+          message: (_h = plasmicRule.message) != null ? _h : `${effectiveLabel} must be at least ${plasmicRule.length} characters`
         });
         break;
       case "max":
         rules.push({
           [plasmicRule.ruleType]: plasmicRule.length,
-          message: (_i = plasmicRule.message) != null ? _i : `Must be at most ${plasmicRule.length} characters`
+          message: (_i = plasmicRule.message) != null ? _i : `${effectiveLabel} must be at most ${plasmicRule.length} characters`
         });
         break;
       case "advanced":
@@ -494,14 +525,34 @@ function useFormInstanceMaybe() {
   return Form.useFormInstance();
 }
 function FormItemWrapper(props) {
-  var _a, _b;
-  const relativeFormItemName = useFormItemRelativeName(props.name);
-  const fullFormItemName = useFormItemFullName(props.name);
-  const bestEffortLabel = !props.noLabel && reactNodeToString(props.label) || ensureArray(props.name).slice(-1)[0];
-  const rules = props.rules ? plasmicRulesToAntdRules(
-    props.rules,
+  var _b;
+  const _a = props, {
+    rules: plasmicRules,
+    description,
+    noLabel,
+    name,
+    hideValidationMessage,
+    customizeProps,
+    setControlContextData,
+    alignLabellessWithControls = true
+  } = _a, rest = __objRest(_a, [
+    "rules",
+    "description",
+    "noLabel",
+    "name",
+    "hideValidationMessage",
+    "customizeProps",
+    "setControlContextData",
+    "alignLabellessWithControls"
+  ]);
+  const relativeFormItemName = useFormItemRelativeName(name);
+  const fullFormItemName = useFormItemFullName(name);
+  const bestEffortLabel = !noLabel && reactNodeToString(props.label) || ensureArray(props.name).slice(-1)[0];
+  const rules = plasmicRules ? plasmicRulesToAntdRules(
+    plasmicRules,
     typeof bestEffortLabel === "number" ? "" + bestEffortLabel : bestEffortLabel
   ) : void 0;
+  const layoutContext = React.useContext(FormLayoutContext);
   const inCanvas = !!usePlasmicCanvasContext();
   if (inCanvas) {
     const form = useFormInstanceMaybe();
@@ -511,7 +562,7 @@ function FormItemWrapper(props) {
     });
     const internalFormCtx = React.useContext(InternalFormInstanceContext);
     const { fireOnValuesChange, forceRemount } = internalFormCtx != null ? internalFormCtx : {};
-    (_a = props.setControlContextData) == null ? void 0 : _a.call(props, {
+    (_b = props.setControlContextData) == null ? void 0 : _b.call(props, {
       internalFormCtx
     });
     React.useEffect(() => {
@@ -528,14 +579,15 @@ function FormItemWrapper(props) {
   }
   return /* @__PURE__ */ React.createElement(
     FormItem,
-    __spreadValues(__spreadProps(__spreadValues({}, omit(props, "rules")), {
-      label: props.noLabel ? void 0 : props.label,
+    __spreadProps(__spreadValues({}, rest), {
+      label: noLabel ? void 0 : props.label,
       name: relativeFormItemName,
-      rules
-    }), props.helpTextMode === "extra" ? { extra: props.help } : props.helpTextMode === "help" ? (
-      // Never show validation errors in this mode, even if user didn't specify help
-      { help: (_b = props.help) != null ? _b : "" }
-    ) : {}),
+      rules,
+      extra: description,
+      help: hideValidationMessage ? "" : props.help,
+      colon: noLabel ? false : void 0,
+      wrapperCol: (layoutContext == null ? void 0 : layoutContext.layout) === "horizontal" && noLabel && alignLabellessWithControls && layoutContext.labelSpan ? { offset: layoutContext.labelSpan } : void 0
+    }),
     props.customizeProps ? /* @__PURE__ */ React.createElement(FormItemForwarder, { formItemProps: props }) : props.children
   );
 }
@@ -565,13 +617,18 @@ function registerFormItem(loader) {
     name: "plasmic-antd5-form-item",
     displayName: "Form Item",
     parentComponentName: "plasmic-antd5-form",
+    defaultStyles: {
+      marginBottom: "24px",
+      width: "stretch"
+    },
     props: {
       label: {
         type: "slot",
         defaultValue: {
           type: "text",
           value: "Label"
-        }
+        },
+        hidden: (ps) => !!ps.noLabel
       },
       children: {
         type: "slot",
@@ -589,10 +646,26 @@ function registerFormItem(loader) {
       rules: {
         type: "formValidationRules"
       },
+      valuePropName: {
+        type: "string",
+        advanced: true,
+        defaultValueHint: "value",
+        description: "The prop name for specifying the value of the form control component"
+      },
       noLabel: {
         type: "boolean",
         advanced: true
       },
+      alignLabellessWithControls: {
+        type: "boolean",
+        displayName: "Align with controls?",
+        description: "Aligns the content with form controls in the grid",
+        hidden: (ps, ctx) => {
+          var _a;
+          return !ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
+        },
+        defaultValueHint: true
+      },
       colon: {
         type: "boolean",
         defaultValueHint: true,
@@ -602,7 +675,11 @@ function registerFormItem(loader) {
       labelAlign: {
         type: "choice",
         options: ["left", "right"],
-        advanced: true
+        advanced: true,
+        hidden: (ps, ctx) => {
+          var _a;
+          return !!ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
+        }
       },
       hidden: {
         type: "boolean",
@@ -626,34 +703,16 @@ function registerFormItem(loader) {
         displayName: "Dependencies",
         description: "Form items can depend on other form items. This forces it to reevaluate the validation rules when the other form item changes."
       },
-      helpTextMode: {
-        type: "choice",
-        displayName: "Help text",
-        options: [
-          {
-            value: "errors",
-            label: "Validation errors"
-          },
-          {
-            value: "extra",
-            label: "Custom help text and validation errors"
-          },
-          {
-            value: "help",
-            label: "Custom help text, no validation errors"
-          }
-        ],
-        defaultValueHint: "Show validation errors",
-        description: "What to show in the help text. Edit help text by editing the 'help' slot in the outline."
+      hideValidationMessage: {
+        type: "boolean",
+        displayName: "Hide validation message?",
+        description: "If true, will hide the validation error message",
+        defaultValueHint: false,
+        advanced: true
       },
-      help: {
+      description: {
         type: "slot",
-        hidden: (ps) => {
-          var _a;
-          return !["extra", "help"].includes((_a = ps.helpTextMode) != null ? _a : "");
-        },
         hidePlaceholder: true
-        // advanced: true,
       },
       customizeProps: {
         type: "function",
@@ -671,13 +730,85 @@ function registerFormItem(loader) {
       },
       noStyle: {
         type: "boolean",
-        displayName: "Field only",
-        description: "Don't render anything but the wrapped field component - so no label, help text, validation error, etc.",
+        displayName: "Field control only",
+        description: "Don't render anything but the field control - so no label, help text, validation error, etc.",
         advanced: true
       }
     },
     importPath: "@plasmicpkgs/antd5/skinny/registerForm",
-    importName: "FormItemWrapper"
+    importName: "FormItemWrapper",
+    templates: {
+      Text: {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-input"
+          }
+        }
+      },
+      "Long Text": {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-textarea"
+          }
+        }
+      },
+      "Select dropdown": {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-select"
+          }
+        }
+      },
+      Number: {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-input-number"
+          }
+        }
+      },
+      Checkbox: {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-checkbox"
+          },
+          valuePropName: "checked",
+          noLabel: true
+        }
+      },
+      Radios: {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-radio-group"
+          }
+        }
+      },
+      Password: {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-input-password"
+          }
+        }
+      },
+      "Submit button": {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-button",
+            props: {
+              type: "primary"
+            }
+          },
+          noLabel: true
+        }
+      }
+    }
   });
 }
 function FormGroup(props) {