@solidxai/core-ui 0.1.8-beta.8 → 0.1.8

package/dist/components/core/form/SolidFormView.tsx

@@ -28,6 +28,7 @@ import { SolidSelectionDynamicField } from "./fields/SolidSelectionDynamicField"
 import { SolidSelectionStaticField } from "./fields/SolidSelectionStaticField";
 import { SolidShortTextField } from "./fields/SolidShortTextField";
 import { SolidTimeField } from "./fields/SolidTimeField";
+import { SolidComputedField } from "./fields/SolidComputedField";
 import { SolidUiEvent } from "../../../types";
 import { getExtensionComponent, getExtensionFunction } from "../../../helpers/registry";
 import { SolidFormWidgetProps, SolidUiEventResponse } from "../../../types/solid-core";
@@ -41,6 +42,7 @@ import { hasAnyRole } from "../../../helpers/rolesHelper";
 import SolidChatterLocaleTabView from "../locales/SolidChatterLocaleTabView";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { useLazyGetMcpUrlQuery, useLazyGetSolidSettingsQuery } from "../../../redux/api/solidSettingsApi";
+import { getSettingsMap } from "../../../helpers/settingsPayload";
 import { SolidFormFooter } from "./SolidFormFooter";
 import { normalizeSolidFormActionPath } from "../../../helpers/routePaths";
 import { showToast } from "../../../redux/features/toastSlice";
@@ -171,6 +173,9 @@ const fieldFactory = (type: string, fieldContext: SolidFieldProps, setLightboxUr
     if (type === 'email') {
         return new SolidEmailField(fieldContext);
     }
+    if (type === 'computed') {
+        return new SolidComputedField(fieldContext);
+    }
     return null;
 }
 
@@ -276,7 +281,7 @@ const SolidSheet = ({ children }: any) => (
 // Internal tab data carrier — SolidNotebook reads props from this
 const SolidPageTab = ({ children }: any) => <>{children}</>;
 
-const SolidNotebook = ({ children, activeTab, embeded }: any) => {
+const SolidNotebook = ({ children, activeTab, embeded, requestedTab, requestedTabVersion }: any) => {
     const childrenArray = React.Children.toArray(children).filter(child => !!child) as any[];
 
     const router = useRouter();
@@ -286,6 +291,19 @@ const SolidNotebook = ({ children, activeTab, embeded }: any) => {
 
     const effectiveTab = embeded ? localActiveTab : activeTab;
 
+    useEffect(() => {
+        if (!requestedTab) return;
+        const exists = childrenArray.some((child: any) => child.props?.tabKey === requestedTab);
+        if (!exists) return;
+        if (embeded) {
+            setLocalActiveTab(requestedTab);
+        } else {
+            const queryParams = new URLSearchParams(searchParams.toString());
+            queryParams.set('activeTab', requestedTab);
+            router.push(`${pathname}?${queryParams.toString()}`);
+        }
+    }, [requestedTabVersion]);
+
     const activeIndex = useMemo(() => {
         const idx = childrenArray.findIndex((child: any) => child.props?.tabKey === effectiveTab);
         return idx >= 0 ? idx : 0;
@@ -350,6 +368,29 @@ const SolidDynamicWidget = ({ widgetName, formik, field, solidFormViewMetaData,
 };
 
 
+const FormikSubmitWatcher = ({ formik, tabFieldsRef, embeded, searchParams, setRequestedTab, setRequestedTabVersion }: any) => {
+    const lastHandledRef = useRef(0);
+    useEffect(() => {
+        if (formik.submitCount === lastHandledRef.current) return;
+        if (formik.isSubmitting) return;
+        lastHandledRef.current = formik.submitCount;
+        const erroredKeys = Object.keys(formik.errors || {});
+        if (erroredKeys.length === 0) return;
+        if (!tabFieldsRef.current || tabFieldsRef.current.length === 0) return;
+        const currentActive = embeded ? null : (searchParams.get("activeTab") || "");
+        const currentHasError = currentActive
+            ? tabFieldsRef.current.find((t: any) => t.tabKey === currentActive)?.fields.some((f: string) => erroredKeys.includes(f))
+            : false;
+        if (currentHasError) return;
+        const firstErroredTab = tabFieldsRef.current.find((t: any) => t.fields.some((f: string) => erroredKeys.includes(f)));
+        if (firstErroredTab) {
+            setRequestedTab(firstErroredTab.tabKey);
+            setRequestedTabVersion((v: number) => v + 1);
+        }
+    }, [formik.submitCount, formik.isSubmitting]);
+    return null;
+};
+
 const SolidPage = ({ attrs, children, key, formik, fields }: any) => {
     const fieldsName = fields.map((f: any) => f.attrs.name);
     const errorCount = formik.submitCount > 0 ? fieldsName.filter((name: any) => !!formik.errors[name]).length : 0;
@@ -433,6 +474,12 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const [chatterLocaleWidth, setChatterLocaleWidth] = useState(360);
     const [isResizingChatterLocale, setIsResizingChatterLocale] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isMobileViewport, setIsMobileViewport] = useState(false);
+    const solidFormWrapperRef = useRef<HTMLDivElement | null>(null);
+
+    const tabFieldsRef = useRef<Array<{ tabKey: string; fields: string[] }>>([]);
+    const [requestedTab, setRequestedTab] = useState<string | null>(null);
+    const [requestedTabVersion, setRequestedTabVersion] = useState(0);
 
     const [solidWorkflowFieldValue, setSolidWorkflowFieldValue] = useState<string>("");
     const [defaultTabViewOptionIndex, setDefaultTabViewOptionIndex] = useState<number>(1);
@@ -450,15 +497,16 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const actionContext = searchParams.get('actionContext');
 
     const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery();
+    const solidSettingsMap = useMemo(() => getSettingsMap(solidSettingsData), [solidSettingsData]);
     useEffect(() => {
         trigger("") // Fetch settings on mount
     }, [])
 
     useEffect(() => {
-        if (solidSettingsData?.data?.mcpEnabled && solidSettingsData?.data?.mcpServerUrl) {
+        if (solidSettingsMap?.mcpEnabled && solidSettingsMap?.mcpServerUrl) {
             enableSolidXAiPanel();
         }
-    }, [solidSettingsData]);
+    }, [solidSettingsMap]);
 
 
     const enableSolidXAiPanel = async () => {
@@ -479,19 +527,34 @@ const SolidFormView = (params: SolidFormViewProps) => {
     }
 
     const op = useRef(null);
+    const MIN_CHATTER_WIDTH = 320;
+    const MIN_FORM_SECTION_WIDTH = 420;
+
+    const getMaxChatterWidth = () => {
+        const wrapperWidth = solidFormWrapperRef.current?.getBoundingClientRect().width ?? window.innerWidth;
+        return Math.max(MIN_CHATTER_WIDTH, wrapperWidth - MIN_FORM_SECTION_WIDTH);
+    };
+
+    const clampChatterWidth = (width: number) => {
+        const maxWidth = getMaxChatterWidth();
+        return Math.max(MIN_CHATTER_WIDTH, Math.min(width, maxWidth));
+    };
+
     useEffect(() => {
         const stored = localStorage.getItem('chatter_locale_width');
         if (stored) {
             const parsed = parseInt(stored, 10);
-            const clampedWidth = Math.max(320, Math.min(parsed, 420));
+            const clampedWidth = clampChatterWidth(parsed);
             setChatterLocaleWidth(clampedWidth);
         }
     }, []);
     useEffect(() => {
         const handleMouseMove = (e: MouseEvent) => {
             if (!isResizingChatterLocale) return;
-            const newWidth = window.innerWidth - e.clientX;
-            const clampedWidth = Math.max(320, Math.min(newWidth, 420));
+            const wrapperRect = solidFormWrapperRef.current?.getBoundingClientRect();
+            const rightEdge = wrapperRect?.right ?? window.innerWidth;
+            const newWidth = rightEdge - e.clientX;
+            const clampedWidth = clampChatterWidth(newWidth);
             setChatterLocaleWidth(clampedWidth);
             localStorage.setItem('chatter_locale_width', clampedWidth.toString());
         };
@@ -511,6 +574,28 @@ const SolidFormView = (params: SolidFormViewProps) => {
         };
     }, [isResizingChatterLocale]);
 
+    useEffect(() => {
+        const updateViewportFlag = () => setIsMobileViewport(window.innerWidth <= 1199);
+        updateViewportFlag();
+        window.addEventListener('resize', updateViewportFlag);
+        return () => window.removeEventListener('resize', updateViewportFlag);
+    }, []);
+
+    useEffect(() => {
+        const handleWindowResize = () => {
+            setChatterLocaleWidth((currentWidth) => {
+                const clamped = clampChatterWidth(currentWidth);
+                if (clamped !== currentWidth) {
+                    localStorage.setItem('chatter_locale_width', clamped.toString());
+                }
+                return clamped;
+            });
+        };
+
+        window.addEventListener('resize', handleWindowResize);
+        return () => window.removeEventListener('resize', handleWindowResize);
+    }, []);
+
 
     useEffect(() => {
         const mode = searchParams.get('viewMode');
@@ -628,6 +713,8 @@ const SolidFormView = (params: SolidFormViewProps) => {
         data: solidFormViewMetaData,
         isLoading: solidFormViewMetaDataIsLoading
     } = useGetSolidViewLayoutQuery(formViewMetaDataQs);
+    const entityDisplayName =
+        solidFormViewMetaData?.data?.solidView?.model?.displayName || params.modelName;
     const [refreshChatterMessage, setRefreshChatterMessage] = useState<boolean>(true);
     useEffect(() => {
         if (
@@ -1200,7 +1287,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
         });
 
         return (
-            <div className="solid-form-wrapper">
+            <div className="solid-form-wrapper" ref={solidFormWrapperRef}>
                 <div className="solid-form-section">
                     <div className="page-header solid-list-toolbar flex-column lg:flex-row">
                         <div className="flex justify-content-between w-full solid-form-toolbar-row">
@@ -1264,6 +1351,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
         });
 
         const formFieldOnXXX = async (event: ChangeEvent<HTMLInputElement>, eventType: string) => {
+            // console.log("formFieldOnXXX", eventType, event);
 
             // Invoke the formik change 
             if (eventType === 'onFieldChange') {
@@ -1441,12 +1529,14 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
                 case "notebook":
                     if (visible === true) {
-                        return <SolidNotebook key={key} activeTab={searchParams.get("activeTab") || ""} embeded={params.embeded}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidNotebook>;
+                        tabFieldsRef.current = [];
+                        return <SolidNotebook key={key} activeTab={searchParams.get("activeTab") || ""} embeded={params.embeded} requestedTab={requestedTab} requestedTabVersion={requestedTabVersion}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidNotebook>;
                     }
                     break;
                 case "page":
                     if (visible === true) {
                         const fields = children.flatMap((child: any) => getLayoutFields(child));
+                        tabFieldsRef.current.push({ tabKey: key, fields: fields.map((f: any) => f.attrs.name) });
                         const pageChildren = children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`));
                         return SolidPage({ children: pageChildren, attrs: attrs, key: key, formik: formik, fields });
                     }
@@ -1634,9 +1724,17 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
 
         return (
-            <div className="solid-form-wrapper">
+            <div className="solid-form-wrapper" ref={solidFormWrapperRef}>
                 <div className="solid-form-section">
                     <form style={{ width: '100%' }} onSubmit={formik.handleSubmit}>
+                        <FormikSubmitWatcher
+                            formik={formik}
+                            tabFieldsRef={tabFieldsRef}
+                            embeded={params.embeded}
+                            searchParams={searchParams}
+                            setRequestedTab={setRequestedTab}
+                            setRequestedTabVersion={setRequestedTabVersion}
+                        />
                         <SolidFormActionHeader
                             formik={formik}
                             formData={solidFormViewData?.data}
@@ -1660,6 +1758,8 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             onStepperUpdate={() => setRefreshChatterMessage(true)}
                             isSubmitting={isSubmitting}
                             headerRequestStatusLabel={isSubmitting ? "Saving..." : null}
+                            showMobileOpenChatter={isMobileViewport && !isShowChatter && params.embeded !== true}
+                            onMobileOpenChatter={() => setShowChatter(true)}
                         />
                         <div className={`px-4 py-3 md:p-4 solid-form-content md:pt-1 ${createMode ? 'solid-create-mode-form-content' : ''} ${params.embeded === true ? 'h-auto' : ''}`} style={{ maxHeight: params.embeded === true ? '80vh' : '', overflowY: 'auto' }}>
                             {DynamicHeaderComponent && <DynamicHeaderComponent />}
@@ -1741,23 +1841,21 @@ const SolidFormView = (params: SolidFormViewProps) => {
                     </div>
                 }
 
-                <SolidDialog
+                <SolidConfirmDialog
                     open={isDeleteDialogVisible}
-                    onOpenChange={setDeleteDialogVisible}
-                    className="solid-confirm-dialog"
-                >
-                    <SolidDialogHeader className="solid-field-confirm-header">
-                        <SolidDialogTitle>Confirm Delete</SolidDialogTitle>
-                        <SolidDialogClose />
-                    </SolidDialogHeader>
-                    <SolidDialogBody className="solid-field-confirm-dialog-body">
-                        <p className="solid-field-confirm-message">Are you sure you want to delete?</p>
-                    </SolidDialogBody>
-                    <div className="solid-radix-dialog-footer solid-field-confirm-actions">
-                        <SolidButton label="Yes" icon="si si-check" variant="destructive" autoFocus onClick={() => handleDeleteEntity()} />
-                        <SolidButton label="No" icon="si si-times" variant="outline" onClick={onDeleteClose} />
-                    </div>
-                </SolidDialog>
+                    onCancel={onDeleteClose}
+                    onConfirm={() => handleDeleteEntity()}
+                    className="solid-shadcn-confirm-dialog solid-delete-confirm-dialog"
+                    headerClassName="solid-shadcn-dialog-head"
+                    bodyClassName="solid-shadcn-dialog-body"
+                    footerClassName="solid-shadcn-dialog-actions"
+                    separatorClassName="solid-shadcn-dialog-sep"
+                    showSeparator
+                    title={`Delete ${entityDisplayName}`}
+                    message={<p className="solid-shadcn-dialog-text">{`Are you sure you want to delete this ${entityDisplayName}?`}</p>}
+                    confirmLabel="Delete"
+                    cancelLabel="Cancel"
+                />
                 <SolidDialog
                     open={isLayoutDialogVisible}
                     onOpenChange={setLayoutDialogVisible}

package/dist/components/core/form/fields/SolidComputedField.d.ts

@@ -0,0 +1,25 @@
+import * as Yup from 'yup';
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
+/**
+ * SolidComputedField
+ *
+ * Computed fields are server-generated values (e.g. auto-calculated totals, slugs, codes).
+ * They are always read-only in the UI and are only shown when a record already exists
+ * (i.e., the form is in view or edit mode for an existing record, NOT during creation).
+ */
+export declare class SolidComputedField implements ISolidField {
+    private fieldContext;
+    constructor(fieldContext: SolidFieldProps);
+    updateFormData(_value: any, _formData: FormData): any;
+    initialValue(): any;
+    validationSchema(): Yup.Schema;
+    render(formik: FormikObject): import("react/jsx-runtime").JSX.Element | null;
+    renderExtensionRenderMode(widget: string, formik: FormikObject): import("react/jsx-runtime").JSX.Element;
+}
+/**
+ * Default widget for computed fields — renders as a read-only input in edit mode.
+ * Uses the same layout as the short-text view widget for consistency.
+ */
+export declare const DefaultComputedFormWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidComputedField.d.ts.map

package/dist/components/core/form/fields/SolidComputedField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidComputedField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidComputedField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAIzE;;;;;;GAMG;AACH,qBAAa,kBAAmB,YAAW,WAAW;IAElD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,GAAG,GAAG;IAIrD,YAAY,IAAI,GAAG;IAMnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAK9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAoC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAED;;;GAGG;AACH,eAAO,MAAM,yBAAyB,6BAA8B,yBAAyB,4CAwC5F,CAAC"}

package/dist/components/core/form/fields/SolidComputedField.js

@@ -0,0 +1,128 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as Yup from 'yup';
+import styles from './solidFields.module.css';
+import { getExtensionComponent } from "../../../../helpers/registry";
+import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
+import { SolidInput } from "../../../shad-cn-ui";
+/**
+ * SolidComputedField
+ *
+ * Computed fields are server-generated values (e.g. auto-calculated totals, slugs, codes).
+ * They are always read-only in the UI and are only shown when a record already exists
+ * (i.e., the form is in view or edit mode for an existing record, NOT during creation).
+ */
+var SolidComputedField = /** @class */ (function () {
+    function SolidComputedField(fieldContext) {
+        Object.defineProperty(this, "fieldContext", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.fieldContext = fieldContext;
+    }
+    Object.defineProperty(SolidComputedField.prototype, "updateFormData", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (_value, _formData) {
+            // Computed fields are never submitted — the server calculates them.
+        }
+    });
+    Object.defineProperty(SolidComputedField.prototype, "initialValue", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var _a;
+            var fieldName = this.fieldContext.field.attrs.name;
+            var existingValue = (_a = this.fieldContext.data) === null || _a === void 0 ? void 0 : _a[fieldName];
+            return existingValue !== undefined && existingValue !== null ? existingValue : '';
+        }
+    });
+    Object.defineProperty(SolidComputedField.prototype, "validationSchema", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            // Computed fields are always optional; they are never set by the user.
+            return Yup.mixed().nullable();
+        }
+    });
+    Object.defineProperty(SolidComputedField.prototype, "render", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (formik) {
+            var _a, _b;
+            var fieldLayoutInfo = this.fieldContext.field;
+            var className = ((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) || 'field col-12';
+            // Computed fields are only relevant for existing records.
+            // Check by whether the underlying data has an `id` (record exists).
+            var recordExists = !!((_b = this.fieldContext.data) === null || _b === void 0 ? void 0 : _b.id);
+            if (!recordExists) {
+                return null;
+            }
+            var viewWidget = fieldLayoutInfo.attrs.viewWidget;
+            var editWidget = fieldLayoutInfo.attrs.editWidget;
+            if (!editWidget) {
+                editWidget = 'DefaultComputedFormWidget';
+            }
+            if (!viewWidget) {
+                viewWidget = 'DefaultComputedFormWidget';
+            }
+            var viewMode = this.fieldContext.viewMode;
+            return (_jsx(_Fragment, { children: _jsxs("div", { className: className, children: [viewMode === "view" &&
+                            this.renderExtensionRenderMode(viewWidget, formik), viewMode === "edit" &&
+                            this.renderExtensionRenderMode(editWidget, formik)] }) }));
+        }
+    });
+    Object.defineProperty(SolidComputedField.prototype, "renderExtensionRenderMode", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (widget, formik) {
+            var DynamicWidget = getExtensionComponent(widget);
+            var widgetProps = {
+                formik: formik,
+                fieldContext: this.fieldContext,
+            };
+            return (_jsx(_Fragment, { children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }));
+        }
+    });
+    return SolidComputedField;
+}());
+export { SolidComputedField };
+/**
+ * Default widget for computed fields — renders as a read-only input in edit mode.
+ * Uses the same layout as the short-text view widget for consistency.
+ */
+export var DefaultComputedFormWidget = function (_a) {
+    var _b, _c;
+    var formik = _a.formik, fieldContext = _a.fieldContext;
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var fieldLayoutInfo = fieldContext.field;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.displayName;
+    var showFieldLabel = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.showLabel;
+    var viewMode = fieldContext.viewMode;
+    var value = formik.values[fieldLayoutInfo.attrs.name];
+    if (viewMode === 'view') {
+        // View mode: display as plain text (same as DefaultShortTextFormViewWidget)
+        return (_jsxs("div", { className: styles.fieldViewWrapper, children: [showFieldLabel !== false && (_jsx("p", { className: "".concat(styles.fieldViewLabel, " form-field-label"), children: fieldLabel })), _jsx("p", { className: styles.fieldViewValue, children: value && typeof value === 'string' ? value : '' })] }));
+    }
+    // Edit mode: read-only input to make it clear this is a server-computed value
+    return (_jsxs("div", { className: styles.fieldWrapper, children: [showFieldLabel != false &&
+                _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "".concat(styles.fieldLabel, " form-field-label"), children: [fieldLabel, _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsx(SolidInput, { type: "text", id: fieldLayoutInfo.attrs.name, name: fieldLayoutInfo.attrs.name, value: value || '', readOnly: true, disabled: true, className: styles.fieldInput })] }));
+};
+//# sourceMappingURL=SolidComputedField.js.map

package/dist/components/core/form/fields/SolidComputedField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidComputedField.js","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidComputedField.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport * as Yup from 'yup';\nimport styles from './solidFields.module.css';\nimport { FormikObject, ISolidField, SolidFieldProps } from \"./ISolidField\";\nimport { getExtensionComponent } from \"../../../../helpers/registry\";\nimport { SolidFormFieldWidgetProps } from \"../../../../types/solid-core\";\nimport { SolidFieldTooltip } from \"../../../../components/common/SolidFieldTooltip\";\nimport { SolidInput } from \"../../../shad-cn-ui\";\n\n/**\n * SolidComputedField\n *\n * Computed fields are server-generated values (e.g. auto-calculated totals, slugs, codes).\n * They are always read-only in the UI and are only shown when a record already exists\n * (i.e., the form is in view or edit mode for an existing record, NOT during creation).\n */\nexport class SolidComputedField implements ISolidField {\n\n    private fieldContext: SolidFieldProps;\n\n    constructor(fieldContext: SolidFieldProps) {\n        this.fieldContext = fieldContext;\n    }\n\n    updateFormData(_value: any, _formData: FormData): any {\n        // Computed fields are never submitted — the server calculates them.\n    }\n\n    initialValue(): any {\n        const fieldName = this.fieldContext.field.attrs.name;\n        const existingValue = this.fieldContext.data?.[fieldName];\n        return existingValue !== undefined && existingValue !== null ? existingValue : '';\n    }\n\n    validationSchema(): Yup.Schema {\n        // Computed fields are always optional; they are never set by the user.\n        return Yup.mixed().nullable();\n    }\n\n    render(formik: FormikObject) {\n        const fieldLayoutInfo = this.fieldContext.field;\n        const className = fieldLayoutInfo.attrs?.className || 'field col-12';\n\n        // Computed fields are only relevant for existing records.\n        // Check by whether the underlying data has an `id` (record exists).\n        const recordExists = !!this.fieldContext.data?.id;\n        if (!recordExists) {\n            return null;\n        }\n\n        let viewWidget = fieldLayoutInfo.attrs.viewWidget;\n        let editWidget = fieldLayoutInfo.attrs.editWidget;\n        if (!editWidget) {\n            editWidget = 'DefaultComputedFormWidget';\n        }\n        if (!viewWidget) {\n            viewWidget = 'DefaultComputedFormWidget';\n        }\n\n        const viewMode: string = this.fieldContext.viewMode;\n\n        return (\n            <>\n                <div className={className}>\n                    {viewMode === \"view\" &&\n                        this.renderExtensionRenderMode(viewWidget, formik)\n                    }\n                    {viewMode === \"edit\" &&\n                        this.renderExtensionRenderMode(editWidget, formik)\n                    }\n                </div>\n            </>\n        );\n    }\n\n    renderExtensionRenderMode(widget: string, formik: FormikObject) {\n        let DynamicWidget = getExtensionComponent(widget);\n        const widgetProps: SolidFormFieldWidgetProps = {\n            formik: formik,\n            fieldContext: this.fieldContext,\n        }\n        return (\n            <>\n                {DynamicWidget && <DynamicWidget {...widgetProps} />}\n            </>\n        )\n    }\n}\n\n/**\n * Default widget for computed fields — renders as a read-only input in edit mode.\n * Uses the same layout as the short-text view widget for consistency.\n */\nexport const DefaultComputedFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata?.displayName;\n    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;\n    const viewMode: string = fieldContext.viewMode;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n\n    if (viewMode === 'view') {\n        // View mode: display as plain text (same as DefaultShortTextFormViewWidget)\n        return (\n            <div className={styles.fieldViewWrapper}>\n                {showFieldLabel !== false && (\n                    <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>\n                )}\n                <p className={styles.fieldViewValue}>{value && typeof value === 'string' ? value : ''}</p>\n            </div>\n        );\n    }\n\n    // Edit mode: read-only input to make it clear this is a server-computed value\n    return (\n        <div className={styles.fieldWrapper}>\n            {showFieldLabel != false &&\n                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>\n                    {fieldLabel}\n                    <SolidFieldTooltip fieldContext={fieldContext} />\n                </label>\n            }\n            <SolidInput\n                type=\"text\"\n                id={fieldLayoutInfo.attrs.name}\n                name={fieldLayoutInfo.attrs.name}\n                value={value || ''}\n                readOnly\n                disabled\n                className={styles.fieldInput}\n            />\n        </div>\n    );\n};\n"]}

package/dist/components/core/form/fields/SolidComputedField.tsx

@@ -0,0 +1,134 @@
+
+import * as Yup from 'yup';
+import styles from './solidFields.module.css';
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { getExtensionComponent } from "../../../../helpers/registry";
+import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
+import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
+import { SolidInput } from "../../../shad-cn-ui";
+
+/**
+ * SolidComputedField
+ *
+ * Computed fields are server-generated values (e.g. auto-calculated totals, slugs, codes).
+ * They are always read-only in the UI and are only shown when a record already exists
+ * (i.e., the form is in view or edit mode for an existing record, NOT during creation).
+ */
+export class SolidComputedField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    updateFormData(_value: any, _formData: FormData): any {
+        // Computed fields are never submitted — the server calculates them.
+    }
+
+    initialValue(): any {
+        const fieldName = this.fieldContext.field.attrs.name;
+        const existingValue = this.fieldContext.data?.[fieldName];
+        return existingValue !== undefined && existingValue !== null ? existingValue : '';
+    }
+
+    validationSchema(): Yup.Schema {
+        // Computed fields are always optional; they are never set by the user.
+        return Yup.mixed().nullable();
+    }
+
+    render(formik: FormikObject) {
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+
+        // Computed fields are only relevant for existing records.
+        // Check by whether the underlying data has an `id` (record exists).
+        const recordExists = !!this.fieldContext.data?.id;
+        if (!recordExists) {
+            return null;
+        }
+
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultComputedFormWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultComputedFormWidget';
+        }
+
+        const viewMode: string = this.fieldContext.viewMode;
+
+        return (
+            <>
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" &&
+                        this.renderExtensionRenderMode(editWidget, formik)
+                    }
+                </div>
+            </>
+        );
+    }
+
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
+}
+
+/**
+ * Default widget for computed fields — renders as a read-only input in edit mode.
+ * Uses the same layout as the short-text view widget for consistency.
+ */
+export const DefaultComputedFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata?.displayName;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const viewMode: string = fieldContext.viewMode;
+    const value = formik.values[fieldLayoutInfo.attrs.name];
+
+    if (viewMode === 'view') {
+        // View mode: display as plain text (same as DefaultShortTextFormViewWidget)
+        return (
+            <div className={styles.fieldViewWrapper}>
+                {showFieldLabel !== false && (
+                    <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                )}
+                <p className={styles.fieldViewValue}>{value && typeof value === 'string' ? value : ''}</p>
+            </div>
+        );
+    }
+
+    // Edit mode: read-only input to make it clear this is a server-computed value
+    return (
+        <div className={styles.fieldWrapper}>
+            {showFieldLabel != false &&
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                    {fieldLabel}
+                    <SolidFieldTooltip fieldContext={fieldContext} />
+                </label>
+            }
+            <SolidInput
+                type="text"
+                id={fieldLayoutInfo.attrs.name}
+                name={fieldLayoutInfo.attrs.name}
+                value={value || ''}
+                readOnly
+                disabled
+                className={styles.fieldInput}
+            />
+        </div>
+    );
+};

package/dist/components/core/form/fields/SolidDateTimeField.js

@@ -157,6 +157,6 @@ export var DefaultDateTimeFormViewWidget = function (_a) {
     var showFieldLabel = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.showLabel;
     var rawValue = formik.values[fieldName];
     var format = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.format;
-    return (_jsxs("div", { className: styles.fieldViewWrapper, children: [showFieldLabel !== false && (_jsx("p", { className: "".concat(styles.fieldViewLabel, " form-field-label"), children: fieldLabel })), _jsx("p", { className: styles.fieldViewValue, children: _jsx(DateFieldViewComponent, { value: rawValue, format: format, fallback: "-" }) })] }));
+    return (_jsxs("div", { className: styles.fieldViewWrapper, children: [showFieldLabel !== false && (_jsx("p", { className: "".concat(styles.fieldViewLabel, " form-field-label"), children: fieldLabel })), _jsx("p", { className: styles.fieldViewValue, children: _jsx(DateFieldViewComponent, { value: rawValue, format: format, showTime: true, fallback: "-" }) })] }));
 };
 //# sourceMappingURL=SolidDateTimeField.js.map