@solidstarters/solid-core-ui 1.1.32 → 1.1.34

package/src/components/core/form/fields/widgets/SolidBooleanCheckboxFieldWidget.tsx

@@ -0,0 +1,79 @@
+"use client";
+import { SolidBooleanFieldWidgetProps } from "@/types/solid-core";
+import { useEffect, useState } from "react";
+import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+
+export const SolidBooleanFieldCheckboxWidget = ({ formik, fieldContext }: SolidBooleanFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || "field col-12";
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    // Set default value to false on mount
+    useEffect(() => {
+        if (formik.values[fieldLayoutInfo.attrs.name] === undefined) {
+            console.log("Setting default value:", false);
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, false);
+        }
+    }, []);
+
+    const handleChange = (e: CheckboxChangeEvent) => {
+        const newValue = e.checked; // This returns `true` or `false`
+        console.log(`${fieldLayoutInfo.attrs.name}, new value:`, newValue);
+        
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, newValue === true ? 'true' : 'false');
+        formik.setTouched({ ...formik.touched, [fieldLayoutInfo.attrs.name]: true }); // Ensure Formik registers the change
+        // ✅ Check if Formik updated the value correctly
+    setTimeout(() => {
+        console.log("Formik values after update:", formik.values);
+    }, 0);
+    };
+
+    const isFormFieldValid = (formik:any, fieldName:any) => 
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+    return (
+        <div className={className}>
+            <div className="relative">
+                <div className="flex flex-column gap-2 mt-4">
+                    {showFieldLabel !== false && (
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                            {fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        </label>
+                    )}
+
+                    <div className="flex align-items-center">
+                        <Checkbox
+                            id={fieldLayoutInfo.attrs.name}
+                            checked={formik.values[fieldLayoutInfo.attrs.name] === 'true' || formik.initialValues[fieldLayoutInfo.attrs.name] === 'true'}
+                            onChange={handleChange}
+                            disabled={formDisabled || fieldDisabled}
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            className={classNames("", {
+                                "p-invalid": isFormFieldValid(formik, fieldLayoutInfo.attrs.name),
+                            })}
+                        />
+                        <span className="ml-2">{fieldLabel || "Yes"}</span>
+                    </div>
+                </div>
+
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/core/form/fields/widgets/SolidBooleanSelectFieldWidget.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { SolidBooleanFieldWidgetProps } from "@/types/solid-core";
+import { useEffect, useState } from "react";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+import { SelectButton } from "primereact/selectbutton";
+
+export const SolidBooleanFieldSelectWidget = ({ formik, fieldContext }: SolidBooleanFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+    const booleanOptions = ["false", "true"];
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
+
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+
+    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+    return (
+        <div className={className}>
+            <div className="relative">
+                <div className="flex flex-column gap-2 mt-4">
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                        </label>
+                    }
+                    {/* <InputText
+                    id={fieldLayoutInfo.attrs.name}
+                    className="small-input"
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    onChange={formik.handleChange}
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                /> */}
+                    <SelectButton
+                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                        disabled={formDisabled || fieldDisabled}
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={(e) => {formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value); console.log("value is",e.value)}} // Custom handling for boolean input
+                        value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name].toString() : "false"}
+                        options={booleanOptions}
+                        className={classNames("", {
+                            "p-invalid": isFormFieldValid(formik, "defaultValue"),
+                        })}
+
+                    />
+                </div>
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/core/form/fields/widgets/SolidSelectionStaticAutocompleteFieldWidget.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { SolidSelectionStaticFieldWidgetProps } from "@/types/solid-core";
+import { useEffect, useState } from "react";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+import { SelectButton } from "primereact/selectbutton";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+export const SolidSelectionStaticAutocompleteWidget = ({ formik, fieldContext }: SolidSelectionStaticFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+
+    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+    
+    const [selectionStaticItems, setSelectionStaticItems] = useState([]);
+    const selectionStaticSearch = (event: AutoCompleteCompleteEvent) => {
+        const selectionStaticData = fieldMetadata.selectionStaticValues.map((i: string) => {
+            return {
+                label: i.split(":")[1],
+                value: i.split(":")[0]
+            }
+        });
+        const suggestionData = selectionStaticData.filter((t: any) => t.value.toLowerCase().startsWith(event.query.toLowerCase()));
+        setSelectionStaticItems(suggestionData)
+    }
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <div className={className}>
+            <div className="relative">
+                <div className="flex flex-column gap-2 mt-4">
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                        </label>
+                    }
+                    <AutoComplete
+                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                        disabled={formDisabled || fieldDisabled}
+                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                        id={fieldLayoutInfo.attrs.name}
+                        name={fieldLayoutInfo.attrs.name}
+                        field="label"
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        dropdown
+                        suggestions={selectionStaticItems}
+                        completeMethod={selectionStaticSearch}
+                        // onChange={(e) => updateInputs(index, e.value)} />
+                        // onChange={formik.handleChange}
+                        onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
+                        className="solid-standard-autocomplete"
+                    />
+                </div>
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/core/form/fields/widgets/SolidSelectionStaticRadioFieldWidget.tsx

@@ -0,0 +1,71 @@
+"use client";
+import { SolidSelectionStaticFieldWidgetProps } from "@/types/solid-core";
+import { useEffect, useState } from "react";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+import { SelectButton } from "primereact/selectbutton";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { RadioButton } from "primereact/radiobutton";
+
+export const SolidSelectionStaticRadioWidget = ({ formik, fieldContext }: SolidSelectionStaticFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+    const formDisabled = fieldContext.solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = fieldContext.solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+    const fieldName = fieldLayoutInfo.attrs.name;
+
+    // Convert selectionStaticValues to usable radio options
+    const radioOptions = fieldMetadata.selectionStaticValues.map((i: string) => {
+        const [value, label] = i.split(":");
+        return { label, value };
+    });
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <div className={className}>
+            <div className="relative">
+                <div className="flex flex-column gap-2 mt-4">
+                    {showFieldLabel !== false && (
+                        <label htmlFor={fieldName} className="form-field-label">
+                            {fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        </label>
+                    )}
+                    <div className="flex flex-wrap gap-3">
+                    {radioOptions.map((option: any) => (
+                        <div key={option.value} className="flex items-center">
+                            <RadioButton
+                                id={`${fieldName}-${option.value}`}
+                                name={fieldName}
+                                value={option} 
+                                checked={formik.values[fieldName]?.value === option.value} 
+                                onChange={(e) => formik.setFieldValue(fieldName, e.value)} 
+                                disabled={formReadonly || fieldReadonly || readOnlyPermission || formDisabled || fieldDisabled}
+                                className="mr-2"
+                            />
+                            <label htmlFor={`${fieldName}-${option.value}`} className="cursor-pointer">
+                                {option.label}
+                            </label>
+                        </div>
+                    ))}
+                    </div>
+                </div>
+                {isFormFieldValid(formik, fieldName) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldName]?.toString()} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/helpers/registry.ts

@@ -5,6 +5,10 @@ import { SolidRelationManyToManyAutocompleteWidget } from "@/components/core/for
 import { SolidRelationManyToManyCheckboxWidget } from "@/components/core/form/fields/relations/widgets/SolidRelationManyToManyCheckboxWidget";
 import { CustomHtml } from "@/components/core/form/widgets/CustomHtml";
 import React from "react";
+import { SolidBooleanFieldCheckboxWidget } from "@/components/core/form/fields/widgets/SolidBooleanCheckboxFieldWidget";
+import { SolidBooleanFieldSelectWidget } from "@/components/core/form/fields/widgets/SolidBooleanSelectFieldWidget";
+import { SolidSelectionStaticAutocompleteWidget } from "@/components/core/form/fields/widgets/SolidSelectionStaticAutocompleteFieldWidget";
+import { SolidSelectionStaticRadioWidget } from "@/components/core/form/fields/widgets/SolidSelectionStaticRadioFieldWidget";
 
 type ExtensionRegistry = {
     components: Record<string, React.ComponentType<any>>;
@@ -67,6 +71,10 @@ export const getExtensionFunction = (name: string) => {
 registerExtensionComponent("CustomHtml", CustomHtml, []);
 registerExtensionComponent("SolidRelationManyToManyCheckboxWidget", SolidRelationManyToManyCheckboxWidget, ["checkbox"]);
 registerExtensionComponent("SolidRelationManyToManyAutocompleteWidget", SolidRelationManyToManyAutocompleteWidget, ["autocomplete"]);
+registerExtensionComponent("SolidBooleanFieldCheckboxWidget", SolidBooleanFieldCheckboxWidget, ["field-checkbox"]);
+registerExtensionComponent("SolidBooleanFieldSelectWidget", SolidBooleanFieldSelectWidget, ["field-selectbox"]);
+registerExtensionComponent("SolidSelectionStaticAutocompleteWidget", SolidSelectionStaticAutocompleteWidget, ["field-autocomplete"]);
+registerExtensionComponent("SolidSelectionStaticRadioWidget", SolidSelectionStaticRadioWidget, ["field-radio"]);
 
 
 // ModuleMetadata

package/src/types/solid-core.d.ts

@@ -109,3 +109,12 @@ export type SolidRelationManyToManyFieldWidgetProps = {
     formik: any;
     fieldContext?: SolidFieldProps;
 };
+
+export type SolidBooleanFieldWidgetProps = {
+    formik: any;
+    fieldContext?: SolidFieldProps;
+};
+export type SolidSelectionStaticFieldWidgetProps = {
+    formik: any;
+    fieldContext?: SolidFieldProps;
+};