@solidstarters/solid-core-ui 1.1.211 → 1.1.212

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

@@ -0,0 +1,52 @@
+"use client";
+
+import { Button } from 'primereact/button';
+import { useHasAnyRole } from '../../../helpers/rolesHelper';
+
+interface SolidFormViewContextMenuHeaderButtonProps {
+    button: any;
+    params: any;
+    formik: any;
+    solidFormViewMetaData: any;
+    handleCustomButtonClick: (attrs: any, event: any) => void;
+    formData:any;
+}
+
+export function SolidFormViewContextMenuHeaderButton({
+    button,
+    params,
+    formik,
+    solidFormViewMetaData,
+    handleCustomButtonClick,
+    formData
+}: SolidFormViewContextMenuHeaderButtonProps) {
+    const hasRole = !button.attrs?.roles || button?.attrs?.roles.length === 0
+        ? true
+        : useHasAnyRole(button?.attrs?.roles);
+
+    if (!hasRole) return null;
+    if(button.attrs?.visible == false) return null
+    return (
+        <div>
+        <Button
+            text
+            type="button"
+            className={`w-full text-left gap-2 ${button?.attrs?.className ? button?.attrs?.className : ''}`}
+            label={button.attrs.label}
+            size="small"
+            iconPos="left"
+            icon={button?.attrs?.icon ? button?.attrs?.icon : "pi pi-pencil"}
+            onClick={() => {
+                const event = {
+                    action: button.attrs.action,
+                    params,
+                    formik,
+                    solidFormViewMetaData: solidFormViewMetaData.data,
+                    formData
+                }
+                handleCustomButtonClick(button.attrs, event)
+            }}
+        />
+        </div>
+    );
+}

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

@@ -0,0 +1,52 @@
+"use client";
+
+import { Button } from 'primereact/button';
+import { useHasAnyRole } from '../../../helpers/rolesHelper';
+
+interface SolidFormViewNormalHeaderButtonProps {
+    button: any;
+    params: any;
+    formik: any;
+    solidFormViewMetaData: any;
+    handleCustomButtonClick: (attrs: any, event: any) => void;
+    formData:any
+}
+
+export function SolidFormViewNormalHeaderButton({
+
+    button,
+    params,
+    formik,
+    solidFormViewMetaData,
+    handleCustomButtonClick,
+    formData
+}: SolidFormViewNormalHeaderButtonProps) {
+    const hasRole = !button?.attrs?.roles || button?.attrs?.roles.length === 0
+        ? true
+        : useHasAnyRole(button?.attrs?.roles);
+
+    if (!hasRole) return null;
+    if (button?.attrs?.visible == false) return null
+    return (
+        <div>
+        <Button
+            type="button"
+            className={`w-full text-left gap-2 p-button-sm solid-icon-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}
+            label={button.attrs.label}
+            size="small"
+            iconPos="left"
+            icon={button?.attrs?.icon ? button?.attrs?.icon : ""}
+            onClick={() => {
+                const event = {
+                    action: button.attrs.action,
+                    params,
+                    formik,
+                    solidFormViewMetaData: solidFormViewMetaData.data,
+                    formData
+                };
+                handleCustomButtonClick(button.attrs, event);
+            }}
+        />
+        </div>
+    );
+}

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

@@ -0,0 +1,109 @@
+"use client"
+import React from 'react'
+import styles from './solidFormViewShimmerLoading.module.css'
+import { Skeleton } from 'primereact/skeleton'
+export const SolidFormViewShimmerLoading = () => {
+    return (
+        <div className='h-screen surface-0'>
+            <div className="page-header pl-2 ">
+                <div className='flex align-items-center gap-3'>
+                    <Skeleton width="50px" height='1.4rem' className='md:h-1.3rem  border-round-lg '></Skeleton>
+                    <Skeleton width="300px" className='border-round-lg hidden md:flex'></Skeleton>
+                </div>
+                <div className='flex align-items-center gap-3'>
+                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem" />
+                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem" />
+                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem flex md:hidden" />
+                </div>
+            </div>
+            <div className="page-header" style={{ borderTop: '1px solid var(--primary-light-color)' }}>
+                <div className='w-full flex align-items-center justify-content-end'>
+                    <Skeleton width="30%" height="2rem"></Skeleton>
+                </div>
+            </div>
+            <div className={styles.solidFormViewShimmerLoadingWrapper}>
+                <div className='p-4'>
+                    <div className='formgrid grid'>
+                        <div className='field col-6'>
+                            <div className='flex align-items-center gap-2'>
+                                <Skeleton width="2rem" className='border-round-lg'></Skeleton>
+                                <Skeleton width="2rem" className='border-round-lg'></Skeleton>
+                                <Skeleton width="2rem" className='border-round-lg'></Skeleton>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='formgrid grid mt-4'>
+                        <div className='field col-6 flex flex-column gap-4'>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                        </div>
+                        <div className='field col-6 flex flex-column gap-4'>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div style={{ borderTop: '1px solid var(--primary-light-color)' }}></div>
+                <div className='p-4'>
+                    <div className='formgrid grid'>
+                        <div className='field col-6'>
+                            <div className='flex align-items-center gap-2'>
+                                <Skeleton width="8rem" height='1.5rem' className='border-round-lg'></Skeleton>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='formgrid grid mt-4'>
+                        <div className='field col-6 flex flex-column gap-4'>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                        </div>
+                        <div className='field col-6 flex flex-column gap-4'>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                            <div className='flex flex-column gap-2'>
+                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
+                                <Skeleton width="100%" height="2rem"></Skeleton>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,71 @@
+'use client';
+import { FieldConfig, FieldHelperProps, FieldInputProps, FieldMetaProps, FormikErrors, FormikState, FormikTouched, FormikValues } from "formik";
+import { Schema } from "yup";
+
+export type SolidFieldProps = {
+    solidFormViewMetaData: any;
+    fieldMetadata: any,
+    field: any,
+    data: any,
+    modelName?: any,
+    readOnly?: any,
+    viewMode?: any
+    onChange?: any,
+    onBlur?: any,
+    parentData?: any,
+    onEmbeddedFormSave?: () => void,
+};
+
+export type FormikObject = {
+    initialValues: FormikValues;
+    initialErrors: FormikErrors<unknown>;
+    initialTouched: FormikTouched<unknown>;
+    initialStatus: any;
+    handleBlur: {
+        (e: React.FocusEvent<any, Element>): void;
+        <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+    };
+    handleChange: {
+        (e: React.ChangeEvent<any>): void;
+        <T_1 = string | React.ChangeEvent<any>>(field: T_1): T_1 extends React.ChangeEvent<any> ? void : (e: string | React.ChangeEvent<any>) => void;
+    };
+    handleReset: (e: any) => void;
+    handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;
+    resetForm: (nextState?: Partial<FormikState<FormikValues>>) => void;
+    setErrors: (errors: FormikErrors<FormikValues>) => void;
+    setFormikState: (stateOrCb: FormikState<FormikValues> | ((state: FormikState<FormikValues>) => FormikState<FormikValues>)) => void;
+    setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
+    setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
+    setFieldError: (field: string, value: string | undefined) => void;
+    setStatus: (status: any) => void;
+    setSubmitting: (isSubmitting: boolean) => void;
+    setTouched: (touched: FormikTouched<FormikValues>, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
+    setValues: (values: React.SetStateAction<FormikValues>, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
+    submitForm: () => Promise<any>;
+    validateForm: (values?: FormikValues) => Promise<FormikErrors<FormikValues>>;
+    validateField: (name: string) => Promise<void> | Promise<string | undefined>;
+    isValid: boolean;
+    dirty: boolean;
+    unregisterField: (name: string) => void;
+    registerField: (name: string, { validate }: any) => void;
+    getFieldProps: (nameOrOptions: string | FieldConfig<any>) => FieldInputProps<any>;
+    getFieldMeta: (name: string) => FieldMetaProps<any>;
+    getFieldHelpers: (name: string) => FieldHelperProps<any>;
+    validateOnBlur: boolean;
+    validateOnChange: boolean;
+    validateOnMount: boolean;
+    values: FormikValues;
+    errors: FormikErrors<FormikValues>;
+    touched: FormikTouched<FormikValues>;
+    isSubmitting: boolean;
+    isValidating: boolean;
+    status?: any;
+    submitCount: number;
+}
+
+export interface ISolidField {
+    initialValue(): any;
+    validationSchema(): Schema;
+    render(formik: FormikObject): React.JSX.Element | null;
+    updateFormData(value: any, formData: FormData): any;
+}