@dappworks/kit 0.4.71 → 0.4.73

package/dist/form.mjs

@@ -5,8 +5,8 @@ import { _ } from './chunk-MGU3KYGC.mjs';
 import { cn } from './chunk-6UHBBDKI.mjs';
 import { __objRest, __spreadValues, __spreadProps } from './chunk-6F7H4PAA.mjs';
 import React6, { useEffect, useMemo, useState, createRef } from 'react';
-import { Modal, ModalContent, ModalHeader, ModalBody, Button, Checkbox, Input, Card, Tabs, Tab } from '@nextui-org/react';
-import { ChevronUp, ChevronDown, Check } from 'lucide-react';
+import { Modal, ModalContent, ModalHeader, ModalBody, Checkbox, Input, Button, Textarea, Card, Tabs, Tab } from '@nextui-org/react';
+import { Check, ChevronUp, ChevronDown } from 'lucide-react';
 import MonacoEditor from '@monaco-editor/react';
 import validator from '@rjsf/validator-ajv8';
 import { makeAutoObservable, makeObservable, computed, observable, action, toJS } from 'mobx';
@@ -49,7 +49,6 @@ function CheckboxWidget({
     label
   ), description && /* @__PURE__ */ React6.createElement("div", { className: "mt-1 text-xs text-[#A1A1A9] dark:text-[#717179]" }, description));
 }
-var CheckboxWidget_default = CheckboxWidget;
 function InputWidget(props) {
   const {
     onChange,
@@ -80,7 +79,6 @@ function InputWidget(props) {
     }
   );
 }
-var InputWidget_default = InputWidget;
 function SelectWidget(props) {
   const { onChange, options, label, value, required, disabled, schema } = props;
   const { className, labelPlacement = "top", placeholder = "Select an option" } = options;
@@ -111,7 +109,6 @@ function SelectWidget(props) {
     }))
   ));
 }
-var SelectWidget_default = SelectWidget;
 var EditorWidget = ({ label, options = {}, value, required, schema, disabled, onChange }) => {
   const { editorHeight = "200px", readOnly = false, language = "json", jsonStrSpace, languageSelectorOptions = [], onChangeLanguage, onRun, onMount } = options;
   const [selectedLanguage, setSelectedLanguage] = useState("");
@@ -170,7 +167,6 @@ var EditorWidget = ({ label, options = {}, value, required, schema, disabled, on
     "Run"
   ));
 };
-var EditorWidget_default = EditorWidget;
 var JSONSchemaFormState = class {
   constructor(args = {}) {
     this.value = new JSONValue();
@@ -280,14 +276,14 @@ var getFormState = (props, formLayout = {}) => {
       const uiOptions = formConfigData[k]["ui:options"] || {};
       if (type === "string" || type === "number") {
         if ((_a2 = formConfigData[k]) == null ? void 0 : _a2.selectOptions) {
-          formConfigData[k]["ui:widget"] = SelectWidget_default;
+          formConfigData[k]["ui:widget"] = SelectWidget;
           p[k].selectOptions = formConfigData[k].selectOptions;
           formConfigData[k]["ui:options"] = __spreadValues({
             size: "sm"
           }, uiOptions);
         } else {
           if (!formConfigData[k]["ui:widget"]) {
-            formConfigData[k]["ui:widget"] = InputWidget_default;
+            formConfigData[k]["ui:widget"] = InputWidget;
             formConfigData[k]["ui:options"] = __spreadValues({
               labelPlacement: "inside",
               size: "sm"
@@ -296,7 +292,7 @@ var getFormState = (props, formLayout = {}) => {
               p[k].inputType = "number";
             }
             if (helper.json.isJsonString(v)) {
-              formConfigData[k]["ui:widget"] = EditorWidget_default;
+              formConfigData[k]["ui:widget"] = EditorWidget;
               formConfigData[k]["ui:options"] = __spreadValues({
                 jsonStrSpace: 2
               }, uiOptions);
@@ -305,7 +301,7 @@ var getFormState = (props, formLayout = {}) => {
         }
       }
       if (type === "boolean") {
-        formConfigData[k]["ui:widget"] = CheckboxWidget_default;
+        formConfigData[k]["ui:widget"] = CheckboxWidget;
         formConfigData[k]["ui:options"] = __spreadValues({
           size: "sm"
         }, uiOptions);
@@ -698,7 +694,7 @@ var GridLayout = (props) => {
   return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(grid_default, { numItems: $gridColumn != null ? $gridColumn : 1, className: "gap-2" }, Object.keys(formStates).map((key) => {
     var _a2;
     const layout = formLayout[key];
-    return /* @__PURE__ */ React6.createElement(col_default, { numColSpan: (_a2 = layout == null ? void 0 : layout.colSpan) != null ? _a2 : 1, key, id: `form-${key}` }, /* @__PURE__ */ React6.createElement(Card, { className: cn("h-full m-0 p-4 shadow-sm border-1", layout == null ? void 0 : layout.cardCss) }, /* @__PURE__ */ React6.createElement("div", { className: cn("mb-2 font-bold text-center", layout == null ? void 0 : layout.titleBoxCss) }, (layout == null ? void 0 : layout.title) || key), /* @__PURE__ */ React6.createElement(JSONSchemaForm, { formState: formStates[key] }, (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React6.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps }))));
+    return /* @__PURE__ */ React6.createElement(col_default, { numColSpan: (_a2 = layout == null ? void 0 : layout.colSpan) != null ? _a2 : 1, key, id: `form-${key}` }, /* @__PURE__ */ React6.createElement(Card, { className: cn("h-full m-0 p-4 shadow-sm border dark:border-[#3e3e3e]", layout == null ? void 0 : layout.cardCss) }, /* @__PURE__ */ React6.createElement("div", { className: cn("mb-2 font-bold text-center", layout == null ? void 0 : layout.titleBoxCss) }, (layout == null ? void 0 : layout.title) || key), /* @__PURE__ */ React6.createElement(JSONSchemaForm, { formState: formStates[key] }, (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React6.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps }))));
   })), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React6.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React6.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
 };
 var CollapsibleBox = ({ formKey, title, titleBoxCss, formState, submitButtonProps }) => {
@@ -805,9 +801,31 @@ var JSONForm = (props) => {
     /* @__PURE__ */ React6.createElement(Component, __spreadValues({}, props))
   );
 };
+function TextareaWidget(props) {
+  const { onChange, options, label, value, required, disabled, schema } = props;
+  const { className, labelPlacement = "inside", size = "md", minRows = 2, maxRows = 8 } = options;
+  const placeholder = props.placeholder || options.placeholder;
+  return /* @__PURE__ */ React6.createElement(
+    Textarea,
+    {
+      className: cn("w-full", className),
+      label,
+      placeholder,
+      value,
+      isRequired: required,
+      isDisabled: disabled,
+      minRows,
+      maxRows,
+      size,
+      labelPlacement,
+      description: schema.description || "",
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+}
 var JSONViewModal = observer(() => {
   const rootStore = useStore();
-  const complexFormModal = rootStore.get(FormPlugin);
+  const complexFormModal = rootStore.get(ComplexFormModalStore);
   const { formData, isOpen } = complexFormModal;
   const store = useLocalObservable(() => ({
     isMobile: false
@@ -871,9 +889,9 @@ var JSONViewModal = observer(() => {
   return ModalMemo;
 });
 var Provider_default = JSONViewModal;
-var FormPlugin = class {
+var ComplexFormModalStore = class {
   constructor(args) {
-    this.sid = "FormPlugin";
+    this.sid = "ComplexFormModalStore";
     this.provider = () => /* @__PURE__ */ React6.createElement(Provider_default, null);
     this.isOpen = false;
     this.title = "";
@@ -908,7 +926,7 @@ var FormPlugin = class {
 };
 async function getComplexFormData(v) {
   return new Promise((resolve, reject) => {
-    const complexFormModal = RootStore.Get(FormPlugin);
+    const complexFormModal = RootStore.Get(ComplexFormModalStore);
     complexFormModal.setData(__spreadProps(__spreadValues({}, v), {
       isOpen: true
     }));
@@ -960,7 +978,6 @@ var FormModalStore = class {
     this.provider = () => /* @__PURE__ */ React6.createElement(Provider_default2, null);
     this.isOpen = false;
     this.title = "";
-    //@ts-ignore
     this.form = null;
     this.className = "";
     this.modalSize = "md";
@@ -1026,11 +1043,11 @@ function getFormState2({
     }
     if (type === "string" || type === "number") {
       if ((_a = metadata[k]) == null ? void 0 : _a.selectOptions) {
-        metadata[k]["ui:widget"] = SelectWidget_default;
+        metadata[k]["ui:widget"] = SelectWidget;
         p[k].selectOptions = metadata[k].selectOptions;
       } else {
         if (!metadata[k]["ui:widget"]) {
-          metadata[k]["ui:widget"] = InputWidget_default;
+          metadata[k]["ui:widget"] = InputWidget;
           metadata[k]["ui:options"] = {
             // labelPlacement: 'outside-left',
             size: "sm"
@@ -1042,7 +1059,7 @@ function getFormState2({
       }
     }
     if (type === "boolean") {
-      metadata[k]["ui:widget"] = CheckboxWidget_default;
+      metadata[k]["ui:widget"] = CheckboxWidget;
       metadata[k]["ui:options"] = {
         size: "sm"
       };
@@ -1147,6 +1164,6 @@ _JSONViewPlugin.JSONView = (props) => {
 };
 var JSONViewPlugin = _JSONViewPlugin;
 
-export { FormModalStore, FormPlugin, JSONForm, JSONSchemaForm, JSONViewPlugin, getComplexFormData, getFormData, getFormState2 as getFormState, getSimpleFormData };
+export { CheckboxWidget, ComplexFormModalStore, EditorWidget, FormModalStore, InputWidget, JSONForm, JSONSchemaForm, JSONViewPlugin, SelectWidget, TextareaWidget, getComplexFormData, getFormData, getFormState2 as getFormState, getSimpleFormData };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=form.mjs.map