@mobx-sentinel/react/dist/extension.mjs.map

A TypeScript library for non-intrusive model enhancement in MobX applications. Provides model change detection, validation, and form integration capabilities while maintaining the purity of domain models.

{"version":3,"sources":["../src/extension.ts"],"sourcesContent":["import { Form, FormBindingFuncExtension } from \"@mobx-sentinel/form\";\nimport { CheckBoxBinding } from \"./CheckBoxBinding\";\nimport { InputBinding } from \"./InputBinding\";\nimport { RadioButtonBinding } from \"./RadioButtonBinding\";\nimport { SelectBoxBinding } from \"./SelectBoxBinding\";\nimport { SubmitButtonBinding } from \"./SubmitButtonBinding\";\nimport { LabelBinding } from \"./LabelBinding\";\n\n/**\n * Standard binding extensions.\n *\n * `Form` will be extended with these methods.\n *\n * @remarks This interface exists only for the sole purpose of documentation.\n */\nexport interface StandardExtensions<T> {\n  /**\n   * Bind the input field to the form.\n   *\n   * `<input>` except the following types: button, submit, reset, hidden, image, file, checkbox, and radio.\n   * For checkbox and radio, use bindCheckBox and bindRadioButton respectively.\n   *\n   * @example\n   * ```tsx\n   * <input\n   *   {...form.bindInput(\"string\", {\n   *     getter: () => model.string,\n   *     setter: (v) => (model.string = v),\n   *   })}\n   * />\n   * ```\n   * ```tsx\n   * <input\n   *   {...form.bindInput(\"number\", {\n   *     valueAs: \"number\", // also supports \"date\"\n   *     getter: () => model.number,\n   *     setter: (v) => (model.number = v),\n   *   })}\n   * />\n   * ```\n   */\n  bindInput: FormBindingFuncExtension.ForField.RequiredConfig<T, typeof InputBinding>;\n\n  /**\n   * Bind the select box field to the form.\n   *\n   * @example\n   * ```tsx\n   * <select\n   *   {...form.bindSelectBox(\"single\", {\n   *     getter: () => model.code,\n   *     setter: (v) => (model.code = v),\n   *   })}\n   * >\n   *   ...\n   * </select>\n   * ```\n   */\n  bindSelectBox: FormBindingFuncExtension.ForField.RequiredConfig<T, typeof SelectBoxBinding>;\n\n  /**\n   * Bind the checkbox field to the form.\n   *\n   * @example\n   * ```tsx\n   * <input\n   *   {...form.bindCheckBox(\"boolean\", {\n   *     getter: () => model.boolean,\n   *     setter: (v) => (model.boolean = v),\n   *   })}\n   * />\n   * ```\n   */\n  bindCheckBox: FormBindingFuncExtension.ForField.RequiredConfig<T, typeof CheckBoxBinding>;\n\n  /**\n   * Bind the radio button field to the form.\n   *\n   * @example\n   * ```typescript\n   * const bind = form.bindRadioButton(\"enum\", {\n   *   getter: () => model.enum,\n   *   setter: (v) => (model.enum = v as SampleEnum),\n   * });\n   * ```\n   * ```tsx\n   * Object.values(SampleEnum).map((value) => (\n   *   <input key={value} {...bind(value)} />\n   * ))\n   * ```\n   */\n  bindRadioButton: FormBindingFuncExtension.ForField.RequiredConfig<T, typeof RadioButtonBinding>;\n\n  /**\n   * Bind the submit button to the form.\n   *\n   * @example\n   * ```tsx\n   * <button {...form.bindSubmitButton()}>Submit</button>\n   * ```\n   */\n  bindSubmitButton: FormBindingFuncExtension.ForForm.OptionalConfig<T, typeof SubmitButtonBinding>;\n\n  /**\n   * Bind the label to the form.\n   *\n   * @example\n   * ```tsx\n   * <label {...form.bindLabel([\"field1\"])}>Label</label>\n   * <label {...form.bindLabel([\"field1\", \"field2\"])}>Label</label>\n   * ```\n   */\n  bindLabel: FormBindingFuncExtension.ForMultiField.OptionalConfig<T, typeof LabelBinding>;\n}\n\ndeclare module \"@mobx-sentinel/form\" {\n  export interface Form<T> extends StandardExtensions<T> {\n    bindInput: StandardExtensions<T>[\"bindInput\"];\n    bindSelectBox: StandardExtensions<T>[\"bindSelectBox\"];\n    bindCheckBox: StandardExtensions<T>[\"bindCheckBox\"];\n    bindRadioButton: StandardExtensions<T>[\"bindRadioButton\"];\n    bindSubmitButton: StandardExtensions<T>[\"bindSubmitButton\"];\n    bindLabel: StandardExtensions<T>[\"bindLabel\"];\n  }\n}\n\nForm.prototype.bindInput = function (fieldName, config) {\n  return this.bind(fieldName, InputBinding, {\n    ...config,\n    cacheKey: `${config.valueAs}:${config.cacheKey}`,\n  });\n};\n\nForm.prototype.bindSelectBox = function (fieldName, config) {\n  return this.bind(fieldName, SelectBoxBinding, config);\n};\n\nForm.prototype.bindCheckBox = function (fieldName, config) {\n  return this.bind(fieldName, CheckBoxBinding, config);\n};\n\nForm.prototype.bindRadioButton = function (fieldName, config) {\n  return this.bind(fieldName, RadioButtonBinding, config);\n};\n\nForm.prototype.bindSubmitButton = function (config) {\n  return this.bind(SubmitButtonBinding, config ?? {});\n};\n\nForm.prototype.bindLabel = function (fields, config) {\n  return this.bind(fields, LabelBinding, config ?? {});\n};\n"],"mappings":"4EAAA,OAAS,QAAAA,MAAsC,sBA8H/CC,EAAK,UAAU,UAAY,SAAUC,EAAWC,EAAQ,CACtD,OAAO,KAAK,KAAKD,EAAWE,EAAc,CACxC,GAAGD,EACH,SAAU,GAAGA,EAAO,OAAO,IAAIA,EAAO,QAAQ,EAChD,CAAC,CACH,EAEAF,EAAK,UAAU,cAAgB,SAAUC,EAAWC,EAAQ,CAC1D,OAAO,KAAK,KAAKD,EAAWG,EAAkBF,CAAM,CACtD,EAEAF,EAAK,UAAU,aAAe,SAAUC,EAAWC,EAAQ,CACzD,OAAO,KAAK,KAAKD,EAAWI,EAAiBH,CAAM,CACrD,EAEAF,EAAK,UAAU,gBAAkB,SAAUC,EAAWC,EAAQ,CAC5D,OAAO,KAAK,KAAKD,EAAWK,EAAoBJ,CAAM,CACxD,EAEAF,EAAK,UAAU,iBAAmB,SAAUE,EAAQ,CAClD,OAAO,KAAK,KAAKK,EAAqBL,GAAU,CAAC,CAAC,CACpD,EAEAF,EAAK,UAAU,UAAY,SAAUQ,EAAQN,EAAQ,CACnD,OAAO,KAAK,KAAKM,EAAQC,EAAcP,GAAU,CAAC,CAAC,CACrD","names":["Form","Form","fieldName","config","InputBinding","SelectBoxBinding","CheckBoxBinding","RadioButtonBinding","SubmitButtonBinding","fields","LabelBinding"]}