@solidstarters/solid-core-ui 1.1.26 → 1.1.28

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

@@ -71,13 +71,13 @@ export const SolidVarInputsFilterElement = ({ values, onChange, inputType = Inpu
     return (
         <>
             {inputs && inputs.map((value: any, index: number) => (
-                <>
+                <div className="flex">
                     {inputType === InputTypes.Text &&
                         <InputText
                             value={value}
                             onChange={(e) => updateInputs(index, e.target.value)}
                             placeholder=""
-                            className='w-full'
+                            className='w-full p-inputtext-sm'
                         />
                     }
                     {inputType === InputTypes.Numeric &&
@@ -85,7 +85,7 @@ export const SolidVarInputsFilterElement = ({ values, onChange, inputType = Inpu
                             value={value}
                             onChange={(e) => updateInputs(index, e.value)}
                             placeholder=""
-                            className='w-full'
+                            className='w-full p-inputtext-sm'
                         />
                     }
                     {inputType === InputTypes.Date &&
@@ -95,6 +95,8 @@ export const SolidVarInputsFilterElement = ({ values, onChange, inputType = Inpu
                             dateFormat="mm/dd/yy"
                             placeholder="mm/dd/yyyy"
                             mask="99/99/9999"
+                            className="w-full"
+                            inputClassName="w-full p-inputtext-sm"
                         />
                     }
                     {inputType === InputTypes.DateTime &&
@@ -106,6 +108,8 @@ export const SolidVarInputsFilterElement = ({ values, onChange, inputType = Inpu
                             mask="99/99/9999 99:99"
                             showTime
                             hourFormat="24"
+                            className="w-full"
+                            inputClassName="w-full p-inputtext-sm"
                         />
                     }
                     {inputType === InputTypes.Time &&
@@ -116,6 +120,8 @@ export const SolidVarInputsFilterElement = ({ values, onChange, inputType = Inpu
                             mask="99:99"
                             timeOnly
                             hourFormat="24"
+                            className="w-full"
+                            inputClassName="w-full p-inputtext-sm"
                         />
                     }
                     {inputType === InputTypes.RelationManyToOne &&
@@ -163,12 +169,11 @@ export const SolidVarInputsFilterElement = ({ values, onChange, inputType = Inpu
                                     severity="danger"
                                     type="button"
                                 /> */}
-                            <Button text icon="pi pi-plus-circle" size="small" onClick={() => addInput()} />
-                            <Button text icon="pi pi-trash" size="small" onClick={() => deleteInput(index)} />
+                            <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' />
                         </>
                     }
-                </>
-
+                </div>
             ))}
         </>
     )

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

@@ -13,14 +13,14 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
     ];
     const filterMatchModeOptions = [
         { label: 'Equals', value: "$eqi" },
-  ];
+    ];
 
 
     // const header = column.attrs.label ?? fieldMetadata.displayName;
 
 
     return (
-        <>
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -29,17 +29,21 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
                 options={filterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <Dropdown
-                value={rule.value}
-                options={booleanOptions}
-                onChange={(e: any) => {
-                    onChange(rule.id, 'value', e.value)
-                }}
-                placeholder="Select"
-                className="p-column-filter"
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
             />
-        </>
+            <div className='flex flex-column gap-2 w-full'>
+                <Dropdown
+                    value={rule.value}
+                    options={booleanOptions}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e.value)
+                    }}
+                    placeholder="Select"
+                    className="p-column-filter"
+                />
+            </div>
+        </div>
     );
 };
 

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

@@ -26,7 +26,7 @@ const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <>
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -35,18 +35,22 @@ const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
                 options={dateFilterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidVarInputsFilterElement
-                values={rule.value}
-                onChange={(e: any) => {
-                    onChange(rule.id, 'value', e)
-                }}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.Date}
-                fieldMetadata={fieldMetadata}
-            >
-            </SolidVarInputsFilterElement>
-        </>
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Date}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 
 };

package/src/components/core/filter/fields/SolidDatetimeField.tsx

@@ -10,16 +10,16 @@ const SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilte
     const showFilterOperator = false;
     const columnDataType = 'date';
 
-    const [numberOfInputs,setNumberOfInputs] = useState<any>(null);
+    const [numberOfInputs, setNumberOfInputs] = useState<any>(null);
     // 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;
-    useEffect(()=>{
+    useEffect(() => {
         setNumberOfInputs(getNumberOfInputs(rule.matchMode))
-    },[rule])
+    }, [rule])
     // const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <>
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -28,17 +28,22 @@ const SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilte
                 options={dateFilterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidVarInputsFilterElement
-                values={rule.value}
-                onChange={(e: any) => {
-                    onChange(rule.id, 'value', e)
-                }}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.DateTime}
-                fieldMetadata={fieldMetadata}
-            >
-            </SolidVarInputsFilterElement></>
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.DateTime}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 
 };

package/src/components/core/filter/fields/SolidExternalIdField.tsx

@@ -14,7 +14,7 @@ const SolidExternalIdField = ({ fieldMetadata, onChange, index, rule }: SolidFil
 
 
     return (
-        <>
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -23,18 +23,22 @@ const SolidExternalIdField = ({ fieldMetadata, onChange, index, rule }: SolidFil
                 options={filterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidVarInputsFilterElement
-                values={rule.value}
-                onChange={(e: any) => {
-                    onChange(rule.id, 'value', e)
-                }}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.Text}
-                fieldMetadata={fieldMetadata}
-            >
-            </SolidVarInputsFilterElement>
-        </>
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 
 };

package/src/components/core/filter/fields/SolidIdField.tsx

@@ -14,27 +14,31 @@ const SolidIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterField
 
 
     return (
-       <>
-                  <Dropdown
-                      value={rule.matchMode}
-                      onChange={(e: any) => {
-                          onChange(rule.id, 'matchMode', e.value)
-                        }}
-                      options={filterMatchModeOptions}
-                      optionLabel='label'
-                      optionValue='value'
-                      placeholder="Select Operator" className="w-full md:w-14rem" />
-                  <SolidVarInputsFilterElement
-                      values={rule.value}
-                      onChange={(e: any) => {
-                          onChange(rule.id, 'value', e)
-                        }}
-                      numberOfInputs={numberOfInputs}
-                      inputType={InputTypes.Numeric}
-                      fieldMetadata={fieldMetadata}
-                  >
-                  </SolidVarInputsFilterElement>
-              </>
+        <div className='flex align-items-start gap-3 w-full'>
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={filterMatchModeOptions}
+                optionLabel='label'
+                optionValue='value'
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Numeric}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 
 };

package/src/components/core/filter/fields/SolidIntField.tsx

@@ -23,29 +23,33 @@ const SolidIntField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFiel
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <>
-                    <Dropdown
-                        value={rule.matchMode}
-                        onChange={(e: any) => {
-                            // updateEnumValues(index, 'operator', e.value)
-                            onChange(rule.id, 'matchMode', e.value)
-                        }}
-                        options={filterMatchModeOptions}
-                        optionLabel='label'
-                        optionValue='value'
-                        placeholder="Select Operator" className="w-full filter-small-input md:w-14rem" />
-                    <SolidVarInputsFilterElement
-                        values={rule.value}
-                        onChange={(e: any) => {
-                            // updateEnumValues(index, 'value', e)
-                            onChange(rule.id, 'value', e)
-                        }}
-                        numberOfInputs={numberOfInputs}
-                        inputType={InputTypes.Numeric}
-                        fieldMetadata={fieldMetadata}
-                    >
-                    </SolidVarInputsFilterElement>
-        </>
+        <div className='flex align-items-start gap-3 w-full'>
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    // updateEnumValues(index, 'operator', e.value)
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={filterMatchModeOptions}
+                optionLabel='label'
+                optionValue='value'
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        // updateEnumValues(index, 'value', e)
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Numeric}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 };
 

package/src/components/core/filter/fields/SolidMediaMultipleField.tsx

@@ -22,8 +22,7 @@ const SolidMediaMultipleField = ({ fieldMetadata, onChange, index, rule }: Solid
     ];
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
     return (
-        <>
-
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -32,18 +31,22 @@ const SolidMediaMultipleField = ({ fieldMetadata, onChange, index, rule }: Solid
                 options={filterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidVarInputsFilterElement
-                values={rule.value}
-                onChange={(e: any) => {
-                    onChange(rule.id, 'value', e)
-                }}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.Text}
-                fieldMetadata={fieldMetadata}
-            >
-            </SolidVarInputsFilterElement>
-        </>
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 
 };

package/src/components/core/filter/fields/SolidMediaSingleField.tsx

@@ -24,8 +24,7 @@ const SolidMediaSingleField = ({ fieldMetadata, onChange, index, rule }: SolidFi
     // const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
-        <>
-
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -34,18 +33,22 @@ const SolidMediaSingleField = ({ fieldMetadata, onChange, index, rule }: SolidFi
                 options={filterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidVarInputsFilterElement
-                values={rule.value}
-                onChange={(e: any) => {
-                    onChange(rule.id, 'value', e)
-                }}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.Text}
-                fieldMetadata={fieldMetadata}
-            >
-            </SolidVarInputsFilterElement>
-        </>
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 
 };

package/src/components/core/filter/fields/SolidSelectionDynamicField.tsx

@@ -14,7 +14,7 @@ const SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: So
 
 
     return (
-        <>
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -23,18 +23,22 @@ const SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: So
                 options={filterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidVarInputsFilterElement
-                values={rule.value}
-                onChange={(e: any) => {
-                    onChange(rule.id, 'value', e)  
-                }}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.SelectionDynamic}
-                fieldMetadata={fieldMetadata}
-            >
-            </SolidVarInputsFilterElement>
-        </>
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.SelectionDynamic}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 
 };

package/src/components/core/filter/fields/SolidSelectionStaticField.tsx

@@ -17,7 +17,7 @@ const SolidSelectionStaticField = ({ fieldMetadata, onChange, index, rule }: Sol
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <>
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -26,18 +26,22 @@ const SolidSelectionStaticField = ({ fieldMetadata, onChange, index, rule }: Sol
                 options={filterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidVarInputsFilterElement
-                values={rule.value}
-                onChange={(e: any) => {
-                    onChange(rule.id, 'value', e)
-                }}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.SelectionStatic}
-                fieldMetadata={fieldMetadata}
-            >
-            </SolidVarInputsFilterElement>
-        </>
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.SelectionStatic}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 };
 

package/src/components/core/filter/fields/SolidShortTextField.tsx

@@ -22,7 +22,7 @@ const SolidShortTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilt
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <>
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -31,18 +31,22 @@ const SolidShortTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilt
                 options={filterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidVarInputsFilterElement
-                values={rule.value}
-                onChange={(e: any) => {
-                    onChange(rule.id, 'value', e)
-                }}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.Text}
-                fieldMetadata={fieldMetadata}
-            >
-            </SolidVarInputsFilterElement>
-        </>
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 
 };

package/src/components/core/filter/fields/SolidTimeField.tsx

@@ -13,7 +13,7 @@ const SolidTimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
     // const header = column.attrs.label ?? fieldMetadata.displayName;
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
     return (
-        <>
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -22,17 +22,22 @@ const SolidTimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
                 options={dateFilterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidVarInputsFilterElement
-                values={rule.value}
-                onChange={(e: any) => {
-                    onChange(rule.id, 'value', e)
-                }}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.Time}
-                fieldMetadata={fieldMetadata}
-            >
-            </SolidVarInputsFilterElement></>
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Time}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 
 };