@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.10

package/dist/components/core/filter/SolidVarInputsFilterElement.tsx

@@ -1,14 +1,14 @@
-import { Calendar } from "primereact/calendar";
-import { InputNumber } from "primereact/inputnumber";
-import { InputText } from "primereact/inputtext";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { SolidManyToOneFilterElement } from "./SolidManyToOneFilterElement";
 import { SolidSelectionDynamicFilterElement } from "./SolidSelectionDynamicFilterElement";
 import { SolidSelectionStaticFilterElement } from "./SolidSelectionStaticFilterElement";
-import { Button } from "primereact/button";
 import { SolidManyToManyFilterElement } from "./SolidManyToManyFilterElement";
 import { SolidBooleanFilterElement } from "./SolidBooleanFilterElement";
 import { SolidOneToManyFilterElement } from "./SolidOneToManyFilterElement";
+import { SolidButton } from "../../shad-cn-ui/SolidButton";
+import { SolidInput } from "../../shad-cn-ui/SolidInput";
+import { SolidNumberInput } from "../../shad-cn-ui/SolidNumberInput";
+import { SolidIcon } from "../../shad-cn-ui";
 
 export enum InputTypes {
     Date = 'Date',
@@ -24,31 +24,61 @@ export enum InputTypes {
     Boolean = 'Boolean',
 }
 
+const areInputsEqual = (left: any[] = [], right: any[] = []) => {
+    if (left.length !== right.length) return false;
+    return left.every((item, index) => {
+        const other = right[index];
+        if (item === other) return true;
+        try {
+            return JSON.stringify(item) === JSON.stringify(other);
+        } catch {
+            return false;
+        }
+    });
+};
+
 
 // Based on numberOfInputs map the input filed and hide add and delete 
 export const SolidVarInputsFilterElement = ({ values, onChange, inputType = InputTypes.Text, numberOfInputs = null, fieldMetadata }: any) => {
-
-    if (!values) {
-        values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
-        // values = [''];
-    } else {
-        if (values[0] == '') {
-            values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
-        } else {
-
-            values = values
+    const normalizedValues = useMemo(() => {
+        const emptyShape = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
+        if (!values || !Array.isArray(values)) {
+            return emptyShape;
         }
-    }
+        if (values[0] === '') {
+            return emptyShape;
+        }
+        return values;
+    }, [numberOfInputs, values]);
 
+    // TODO: Ideally values will be an array, so we can spread them here instead of making a nested array.
+    const [inputs, setInputs] = useState([...normalizedValues]);
+    const latestInputsRef = useRef(inputs);
+    const autocompleteTypes = [
+        InputTypes.RelationManyToOne,
+        InputTypes.RelationManyToMany,
+        InputTypes.RelationOneToMany,
+        InputTypes.SelectionDynamic,
+        InputTypes.SelectionStatic,
+        InputTypes.Boolean,
+    ];
+    const useMultiAutocomplete = numberOfInputs === null && autocompleteTypes.includes(inputType);
 
+    useEffect(() => {
+        latestInputsRef.current = inputs;
+    }, [inputs]);
 
-    // TODO: Ideally values will be an array, so we can spread them here instead of making a nested array.
-    const [inputs, setInputs] = useState([...values]);
     useEffect(() => {
-        setInputs([...values])
-    }, [numberOfInputs])
+        if (!areInputsEqual(latestInputsRef.current, normalizedValues)) {
+            setInputs([...normalizedValues]);
+        }
+    }, [normalizedValues]);
 
     const updateInputs = (index: number, value: any) => {
+        if (useMultiAutocomplete && index === 0 && Array.isArray(value)) {
+            setInputs(value);
+            return;
+        }
         const updatedSpecification = inputs.map((item, i) =>
             i === index ? value : item
         );
@@ -69,151 +99,181 @@ export const SolidVarInputsFilterElement = ({ values, onChange, inputType = Inpu
     };
 
     useEffect(() => {
-        onChange(inputs)
-    }, [inputs])
+        if (!areInputsEqual(inputs, normalizedValues)) {
+            onChange(inputs);
+        }
+    }, [inputs, normalizedValues, onChange]);
+
+    const renderInputByType = (value: any, index: number, multiple = false) => {
+        if (inputType === InputTypes.Text) {
+            return (
+                <SolidInput
+                    value={value}
+                    onChange={(e) => updateInputs(index, e.target.value)}
+                    placeholder="Value"
+                    className='w-full p-inputtext-sm solid-filter-compact-control'
+                />
+            );
+        }
 
+        if (inputType === InputTypes.Numeric) {
+            return (
+                <SolidNumberInput
+                    value={value}
+                    onChange={(e) => updateInputs(index, e.value)}
+                    placeholder="Value"
+                    className='w-full p-inputtext-sm solid-filter-compact-control'
+                />
+            );
+        }
 
+        if (inputType === InputTypes.Date) {
+            return (
+                <SolidInput
+                    type="date"
+                    value={value || ""}
+                    onChange={(e) => updateInputs(index, e.target.value)}
+                    className="w-full p-inputtext-sm solid-filter-compact-control"
+                />
+            );
+        }
+
+        if (inputType === InputTypes.DateTime) {
+            return (
+                <SolidInput
+                    type="datetime-local"
+                    value={value || ""}
+                    onChange={(e) => updateInputs(index, e.target.value)}
+                    className="w-full p-inputtext-sm solid-filter-compact-control"
+                />
+            );
+        }
+
+        if (inputType === InputTypes.Time) {
+            return (
+                <SolidInput
+                    type="time"
+                    value={value || ""}
+                    onChange={(e) => updateInputs(index, e.target.value)}
+                    className="w-full p-inputtext-sm solid-filter-compact-control"
+                />
+            );
+        }
+
+        if (inputType === InputTypes.RelationManyToOne) {
+            return (
+                <SolidManyToOneFilterElement
+                    value={value}
+                    index={index}
+                    updateInputs={updateInputs}
+                    fieldMetadata={fieldMetadata}
+                    multiple={multiple}
+                />
+            );
+        }
+
+        if (inputType === InputTypes.RelationManyToMany) {
+            return (
+                <SolidManyToManyFilterElement
+                    value={value}
+                    index={index}
+                    updateInputs={updateInputs}
+                    fieldMetadata={fieldMetadata}
+                    multiple={multiple}
+                />
+            );
+        }
+
+        if (inputType === InputTypes.RelationOneToMany) {
+            return (
+                <SolidOneToManyFilterElement
+                    value={value}
+                    index={index}
+                    updateInputs={updateInputs}
+                    fieldMetadata={fieldMetadata}
+                    multiple={multiple}
+                />
+            );
+        }
+
+        if (inputType === InputTypes.SelectionDynamic) {
+            return (
+                <SolidSelectionDynamicFilterElement
+                    value={value}
+                    index={index}
+                    updateInputs={updateInputs}
+                    fieldMetadata={fieldMetadata}
+                    multiple={multiple}
+                />
+            );
+        }
+
+        if (inputType === InputTypes.SelectionStatic) {
+            return (
+                <SolidSelectionStaticFilterElement
+                    value={value}
+                    index={index}
+                    updateInputs={updateInputs}
+                    fieldMetadata={fieldMetadata}
+                    multiple={multiple}
+                />
+            );
+        }
+
+        if (inputType === InputTypes.Boolean) {
+            return (
+                <SolidBooleanFilterElement
+                    value={value}
+                    index={index}
+                    updateInputs={updateInputs}
+                    fieldMetadata={fieldMetadata}
+                    multiple={multiple}
+                />
+            );
+        }
+
+        return null;
+    };
+
+    if (numberOfInputs === 0) return null;
+
+    if (useMultiAutocomplete) {
+        const selectedValues = Array.isArray(inputs) ? inputs.filter((item) => item !== "" && item !== null && item !== undefined) : [];
+        return (
+            <div className="solid-filter-var-input-row">
+                {renderInputByType(selectedValues, 0, true)}
+            </div>
+        );
+    }
+
+    if (numberOfInputs === 2) {
+        const leftValue = inputs?.[0] ?? "";
+        const rightValue = inputs?.[1] ?? "";
+        return (
+            <div className="solid-filter-var-input-between">
+                {renderInputByType(leftValue, 0, false)}
+                {renderInputByType(rightValue, 1, false)}
+            </div>
+        );
+    }
 
     return (
         <>
             {inputs && inputs.map((value: any, index: number) => (
-                <div className="flex">
-                    {numberOfInputs === 0 ?
-                        <></>
-                        :
+                <div className="solid-filter-var-input-row" key={`solid-filter-value-${index}`}>
+                    {renderInputByType(value, index, false)}
+                    {numberOfInputs === null &&
                         <>
-                            {inputType === InputTypes.Text &&
-                                <InputText
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    placeholder=""
-                                    className='w-full p-inputtext-sm'
-                                />
-                            }
-                            {inputType === InputTypes.Numeric &&
-                                <InputNumber
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.value)}
-                                    placeholder=""
-                                    className='w-full p-inputtext-sm'
-                                />
-                            }
-                            {inputType === InputTypes.Date &&
-                                <Calendar
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    dateFormat="mm/dd/yy"
-                                    placeholder="mm/dd/yyyy"
-                                    mask="99/99/9999"
-                                    className="w-full"
-                                    inputClassName="w-full p-inputtext-sm"
-                                />
-                            }
-                            {inputType === InputTypes.DateTime &&
-                                <Calendar
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    dateFormat="mm/dd/yy"
-                                    placeholder="mm/dd/yyyy hh:mm"
-                                    mask="99/99/9999 99:99"
-                                    showTime
-                                    hourFormat="24"
-                                    className="w-full"
-                                    inputClassName="w-full p-inputtext-sm"
-                                />
-                            }
-                            {inputType === InputTypes.Time &&
-                                <Calendar
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    placeholder="hh:mm"
-                                    mask="99:99"
-                                    timeOnly
-                                    hourFormat="24"
-                                    className="w-full"
-                                    inputClassName="w-full p-inputtext-sm"
-                                />
-                            }
-                            {inputType === InputTypes.RelationManyToOne &&
-                                <SolidManyToOneFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidManyToOneFilterElement>
-                            }
-                            {inputType === InputTypes.RelationManyToMany &&
-                                <SolidManyToManyFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidManyToManyFilterElement>
-                            }
-                            {inputType === InputTypes.RelationOneToMany &&
-                                <SolidOneToManyFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidOneToManyFilterElement>
-                            }
-                            {inputType === InputTypes.SelectionDynamic &&
-                                <SolidSelectionDynamicFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidSelectionDynamicFilterElement>
-                            }
-                            {inputType === InputTypes.SelectionStatic &&
-
-                                <SolidSelectionStaticFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidSelectionStaticFilterElement>
-                            }
-                            {inputType === InputTypes.Boolean &&
-
-                                <SolidBooleanFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidBooleanFilterElement>
-                            }
-
-
-                            {numberOfInputs === null &&
-                                <>
-                                    {/* Plus Button to add a new row */}
-                                    {/* < Button
-                                    icon="pi pi-plus"
-                                    size="small"
-                                    className="small-button"
-                                    onClick={addInput}
-                                    type="button"
-                                /> */}
-
-                                    {/* Trash Button to delete the row */}
-                                    {/* <Button
-                                    icon="pi pi-trash"
-                                    size="small"
-                                    className="small-button"
-                                    onClick={() => deleteInput(index)}
-                                    severity="danger"
-                                    type="button"
-                                /> */}
-                                    <Button text severity='secondary' icon="pi pi-plus" size='small' onClick={() => addInput()} className='solid-filter-action-btn' />
-                                    <Button text severity='secondary' icon="pi pi-trash" size='small' onClick={() => deleteInput(index)} className='solid-filter-action-btn' />
-                                </>
-                            }
+                            <SolidButton variant="ghost" size="sm" onClick={() => addInput()} className='solid-filter-action-btn solid-filter-action-icon-btn'>
+                                <SolidIcon name="si-plus" aria-hidden />
+                            </SolidButton>
+                            <SolidButton variant="ghost" size="sm" onClick={() => deleteInput(index)} className='solid-filter-action-btn solid-filter-action-icon-btn is-danger'>
+                                <SolidIcon name="si-trash" aria-hidden />
+                            </SolidButton>
                         </>
                     }
                 </div>
             ))}
         </>
     )
-}
+}

package/dist/components/core/filter/fields/SolidBooleanField.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dropdown } from 'primereact/dropdown';
+import { SolidSelect } from "../../../shad-cn-ui/SolidSelect";
 import { getNumberOfInputs } from '../SolidFilterFields';
 import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
 var SolidBooleanField = function (_a) {
@@ -18,9 +18,9 @@ var SolidBooleanField = function (_a) {
     ];
     // const header = column.attrs.label ?? fieldMetadata.displayName;
     var numberOfInputs = getNumberOfInputs(rule.matchMode);
-    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-2 md:gap-0', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-2 md:pl-0", children: _jsx(Dropdown, { value: rule.matchMode, onChange: function (e) {
+    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-6 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, onChange: function (e) {
                         onChange(rule.id, 'matchMode', e.value);
-                    }, options: filterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full " }) }), _jsx("div", { className: 'flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
+                    }, options: filterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full " }) }), _jsx("div", { className: 'flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.Boolean, fieldMetadata: fieldMetadata }) })] }));
 };

package/dist/components/core/filter/fields/SolidBooleanField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidBooleanField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidBooleanField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,iBAAiB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC7D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,SAAS,CAAC;IAEjC,IAAM,cAAc,GAAG;QACnB,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;QAC9B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;KACnC,CAAC;IACF,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE;QACjC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;KAE9C,CAAC;IAGF,kEAAkE;IAElE,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,sCAAsC,YACjD,KAAC,QAAQ,IACL,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EAEN,cAAK,SAAS,EAAC,6DAA6D,YAUxE,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,OAAO,EAC7B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["\nimport { Dropdown } from 'primereact/dropdown';\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'boolean';\n\n    const booleanOptions = [\n        { label: 'true', value: true },\n        { label: 'false', value: false },\n    ];\n    const filterMatchModeOptions = [\n        { label: 'Equals', value: \"$eq\" },\n        { label: 'Is null', value: \"$null\" },\n        { label: 'Is Not null', value: \"$notNull\" }\n\n    ];\n\n\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-2 md:pl-0\">\n                <Dropdown\n                    value={rule.matchMode}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={filterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>\n                {/* <Dropdown\n                    value={rule.value}\n                    options={booleanOptions}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e.value)\n                    }}\n                    placeholder=\"Select\"\n                    className=\"p-column-filter\"\n                /> */}\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Boolean}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n};\n\nexport default SolidBooleanField;"]}
+{"version":3,"file":"SolidBooleanField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidBooleanField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,iBAAiB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC7D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,SAAS,CAAC;IAEjC,IAAM,cAAc,GAAG;QACnB,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;QAC9B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;KACnC,CAAC;IACF,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE;QACjC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;KAE9C,CAAC;IAGF,kEAAkE;IAElE,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EAEN,cAAK,SAAS,EAAC,iEAAiE,YAU5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,OAAO,EAC7B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'boolean';\n\n    const booleanOptions = [\n        { label: 'true', value: true },\n        { label: 'false', value: false },\n    ];\n    const filterMatchModeOptions = [\n        { label: 'Equals', value: \"$eq\" },\n        { label: 'Is null', value: \"$null\" },\n        { label: 'Is Not null', value: \"$notNull\" }\n\n    ];\n\n\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={filterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>\n                {/* <SolidSelect\n                    value={rule.value}\n                    options={booleanOptions}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e.value)\n                    }}\n                    placeholder=\"Select\"\n                    className=\"p-column-filter\"\n                /> */}\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Boolean}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n};\n\nexport default SolidBooleanField;"]}

package/dist/components/core/filter/fields/SolidBooleanField.tsx

@@ -1,5 +1,5 @@
 
-import { Dropdown } from 'primereact/dropdown';
+import { SolidSelect } from "../../../shad-cn-ui/SolidSelect";
 import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
 import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
 
@@ -25,9 +25,9 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
-            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
-                <Dropdown
+        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>
+            <div className="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
+                <SolidSelect
                     value={rule.matchMode}
                     onChange={(e: any) => {
                         onChange(rule.id, 'matchMode', e.value)
@@ -40,8 +40,8 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
                 />
             </div>
 
-            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
-                {/* <Dropdown
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>
+                {/* <SolidSelect
                     value={rule.value}
                     options={booleanOptions}
                     onChange={(e: any) => {

package/dist/components/core/filter/fields/SolidDateField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDateField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDateField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,eAAO,MAAM,0BAA0B;;;GAatC,CAAC;AAEF,QAAA,MAAM,cAAc,6CAA8C,uBAAuB,4CAwCxF,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SolidDateField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDateField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,eAAO,MAAM,0BAA0B;;;GAWtC,CAAC;AAEF,QAAA,MAAM,cAAc,6CAA8C,uBAAuB,4CAwCxF,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/core/filter/fields/SolidDateField.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dropdown } from 'primereact/dropdown';
+import { SolidSelect } from "../../../shad-cn-ui/SolidSelect";
 import { getNumberOfInputs } from '../SolidFilterFields';
 import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
 export var dateFilterMatchModeOptions = [
@@ -9,8 +9,6 @@ export var dateFilterMatchModeOptions = [
     { label: 'Less Than Or Equal', value: "$lte" },
     { label: 'Greater Than', value: "$gt" },
     { label: 'Greater Than Or Equal', value: "$gte" },
-    { label: 'In', value: "$in" },
-    { label: 'Not In', value: "$notIn" },
     { label: 'Between', value: "$between" },
     { label: 'Is null', value: "$null" },
     { label: 'Is Not null', value: "$notNull" }
@@ -23,9 +21,9 @@ var SolidDateField = function (_a) {
     // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.
     // const header = column.attrs.label ?? fieldMetadata.displayName;
     var numberOfInputs = getNumberOfInputs(rule.matchMode);
-    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-2 md:gap-0', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-2 md:pl-0", children: _jsx(Dropdown, { value: rule.matchMode, onChange: function (e) {
+    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-6 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, onChange: function (e) {
                         onChange(rule.id, 'matchMode', e.value);
-                    }, options: dateFilterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full " }) }), _jsx("div", { className: 'flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
+                    }, options: dateFilterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full " }) }), _jsx("div", { className: 'flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.Date, fieldMetadata: fieldMetadata }) })] }));
 };

package/dist/components/core/filter/fields/SolidDateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDateField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDateField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,MAAM,CAAC,IAAM,0BAA0B,GAAG;IACtC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;IAClC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE;IACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE;IACpC,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,EAAE;IAC9C,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE;IACvC,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,MAAM,EAAE;IACjD,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;IAC7B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;IACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;CAE9C,CAAC;AAEF,IAAM,cAAc,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC1D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAG9B,kHAAkH;IAClH,kEAAkE;IAClE,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,sCAAsC,YACjD,KAAC,QAAQ,IACL,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,0BAA0B,EACnC,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EACN,cAAK,SAAS,EAAC,6DAA6D,YACxE,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,IAAI,EAC1B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["\nimport { Dropdown } from 'primereact/dropdown';\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nexport const dateFilterMatchModeOptions = [\n    { label: 'Equals', value: \"$eqi\" },\n    { label: 'Not Equals', value: \"$nei\" },\n    { label: 'Less Than', value: \"$lt\" },\n    { label: 'Less Than Or Equal', value: \"$lte\" },\n    { label: 'Greater Than', value: \"$gt\" },\n    { label: 'Greater Than Or Equal', value: \"$gte\" },\n    { label: 'In', value: \"$in\" },\n    { label: 'Not In', value: \"$notIn\" },\n    { label: 'Between', value: \"$between\" },\n    { label: 'Is null', value: \"$null\" },\n    { label: 'Is Not null', value: \"$notNull\" }\n\n];\n\nconst SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'date';\n\n\n    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-2 md:pl-0\">\n                <Dropdown\n                    value={rule.matchMode}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={dateFilterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Date}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidDateField;"]}
+{"version":3,"file":"SolidDateField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDateField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,MAAM,CAAC,IAAM,0BAA0B,GAAG;IACtC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;IAClC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE;IACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE;IACpC,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,EAAE;IAC9C,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE;IACvC,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,MAAM,EAAE;IACjD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;IACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;CAE9C,CAAC;AAEF,IAAM,cAAc,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC1D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAG9B,kHAAkH;IAClH,kEAAkE;IAClE,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,0BAA0B,EACnC,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EACN,cAAK,SAAS,EAAC,iEAAiE,YAC5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,IAAI,EAC1B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nexport const dateFilterMatchModeOptions = [\n    { label: 'Equals', value: \"$eqi\" },\n    { label: 'Not Equals', value: \"$nei\" },\n    { label: 'Less Than', value: \"$lt\" },\n    { label: 'Less Than Or Equal', value: \"$lte\" },\n    { label: 'Greater Than', value: \"$gt\" },\n    { label: 'Greater Than Or Equal', value: \"$gte\" },\n    { label: 'Between', value: \"$between\" },\n    { label: 'Is null', value: \"$null\" },\n    { label: 'Is Not null', value: \"$notNull\" }\n\n];\n\nconst SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'date';\n\n\n    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={dateFilterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Date}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidDateField;\n"]}

package/dist/components/core/filter/fields/SolidDateField.tsx

@@ -1,5 +1,5 @@
 
-import { Dropdown } from 'primereact/dropdown';
+import { SolidSelect } from "../../../shad-cn-ui/SolidSelect";
 import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
 import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
 
@@ -10,8 +10,6 @@ export const dateFilterMatchModeOptions = [
     { label: 'Less Than Or Equal', value: "$lte" },
     { label: 'Greater Than', value: "$gt" },
     { label: 'Greater Than Or Equal', value: "$gte" },
-    { label: 'In', value: "$in" },
-    { label: 'Not In', value: "$notIn" },
     { label: 'Between', value: "$between" },
     { label: 'Is null', value: "$null" },
     { label: 'Is Not null', value: "$notNull" }
@@ -29,9 +27,9 @@ const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
-            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
-                <Dropdown
+        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>
+            <div className="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
+                <SolidSelect
                     value={rule.matchMode}
                     onChange={(e: any) => {
                         onChange(rule.id, 'matchMode', e.value)
@@ -43,7 +41,7 @@ const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
                     className="p-inputtext-sm w-full "
                 />
             </div>
-            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>
                 <SolidVarInputsFilterElement
                     values={rule.value}
                     onChange={(e: any) => {
@@ -60,4 +58,4 @@ const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
 
 };
 
-export default SolidDateField;
+export default SolidDateField;

package/dist/components/core/filter/fields/SolidDatetimeField.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { dateFilterMatchModeOptions } from './SolidDateField';
 import { getNumberOfInputs } from '../SolidFilterFields';
-import { Dropdown } from 'primereact/dropdown';
+import { SolidSelect } from "../../../shad-cn-ui/SolidSelect";
 import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
 var SolidDatetimeField = function (_a) {
     var fieldMetadata = _a.fieldMetadata, onChange = _a.onChange, index = _a.index, rule = _a.rule;
@@ -16,9 +16,9 @@ var SolidDatetimeField = function (_a) {
         setNumberOfInputs(getNumberOfInputs(rule.matchMode));
     }, [rule]);
     // const numberOfInputs = getNumberOfInputs(rule.matchMode);
-    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-2 md:gap-0', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-2 md:pl-0", children: _jsx(Dropdown, { value: rule.matchMode, onChange: function (e) {
+    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-6 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, onChange: function (e) {
                         onChange(rule.id, 'matchMode', e.value);
-                    }, options: dateFilterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full " }) }), _jsx("div", { className: 'flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
+                    }, options: dateFilterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full " }) }), _jsx("div", { className: 'flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.DateTime, fieldMetadata: fieldMetadata }) })] }));
 };

package/dist/components/core/filter/fields/SolidDatetimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDatetimeField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDatetimeField.tsx"],"names":[],"mappings":";AACA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,kBAAkB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC9D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAExB,IAAA,KAAsC,QAAQ,CAAM,IAAI,CAAC,EAAxD,cAAc,QAAA,EAAE,iBAAiB,QAAuB,CAAC;IAChE,kHAAkH;IAClH,kEAAkE;IAClE,SAAS,CAAC;QACN,iBAAiB,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAA;IACxD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACV,4DAA4D;IAE5D,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,sCAAsC,YACjD,KAAC,QAAQ,IACL,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,0BAA0B,EACnC,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EAEN,cAAK,SAAS,EAAC,6DAA6D,YACxE,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["\nimport React, { useEffect, useState } from 'react';\nimport { dateFilterMatchModeOptions } from './SolidDateField';\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { Dropdown } from 'primereact/dropdown';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'date';\n\n    const [numberOfInputs, setNumberOfInputs] = useState<any>(null);\n    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n    useEffect(() => {\n        setNumberOfInputs(getNumberOfInputs(rule.matchMode))\n    }, [rule])\n    // const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-2 md:pl-0\">\n                <Dropdown\n                    value={rule.matchMode}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={dateFilterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.DateTime}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidDatetimeField;"]}
+{"version":3,"file":"SolidDatetimeField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDatetimeField.tsx"],"names":[],"mappings":";AACA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,kBAAkB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC9D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAExB,IAAA,KAAsC,QAAQ,CAAM,IAAI,CAAC,EAAxD,cAAc,QAAA,EAAE,iBAAiB,QAAuB,CAAC;IAChE,kHAAkH;IAClH,kEAAkE;IAClE,SAAS,CAAC;QACN,iBAAiB,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAA;IACxD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACV,4DAA4D;IAE5D,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,0BAA0B,EACnC,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EAEN,cAAK,SAAS,EAAC,iEAAiE,YAC5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["\nimport React, { useEffect, useState } from 'react';\nimport { dateFilterMatchModeOptions } from './SolidDateField';\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'date';\n\n    const [numberOfInputs, setNumberOfInputs] = useState<any>(null);\n    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n    useEffect(() => {\n        setNumberOfInputs(getNumberOfInputs(rule.matchMode))\n    }, [rule])\n    // const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={dateFilterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.DateTime}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidDatetimeField;"]}