dynamic-modal 1.0.6 → 1.0.7

package/dist/components/input-upload/input-upload.js

@@ -1,86 +1,86 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const general_1 = require("../../tools/general");
-const InputUpload = (_a) => {
-    var _b;
-    var { onChange, readAsArrayBuffer } = _a, props = __rest(_a, ["onChange", "readAsArrayBuffer"]);
-    const onChangeHandler = (event) => {
-        if (props.read && event.target.files) {
-            readFileBlob(event.target.files[0], false)
-                .then((result) => onChange(result))
-                .catch((err) => {
-                console.error('file read error', err);
-                onChange({ name: '', size: 0, data: '' });
-            });
-        }
-        else {
-            onChange(event.target.files);
-        }
-    };
-    const readFileBlob = (blob, image) => {
-        return new Promise((resolve, reject) => {
-            const fileReader = new FileReader();
-            if (image)
-                fileReader.readAsDataURL(blob);
-            else if (readAsArrayBuffer)
-                fileReader.readAsArrayBuffer(blob);
-            else
-                fileReader.readAsText(blob);
-            fileReader.onload = () => {
-                const fileResult = {
-                    name: blob.name,
-                    size: blob.size,
-                    data: fileReader.result
-                };
-                resolve(fileResult);
-            };
-            fileReader.onerror = (error) => {
-                reject(error);
-            };
-        });
-    };
-    const elementId = (0, react_1.useMemo)(() => {
-        var _a;
-        return (_a = props.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)();
-    }, [props.id]);
-    return (react_1.default.createElement("div", { className: 'flex flex-col w-full gap-1 text-center' },
-        props.label && react_1.default.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white", htmlFor: `file-input-${elementId}` }, props.label),
-        react_1.default.createElement("input", Object.assign({ className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\r\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\r\n        file:border-0 file:text-sm file:font-semibold\r\n        file:bg-gray-100 file:text-blue-600\r\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${elementId}-help`, id: `file-input-${elementId}`, type: "file", onChange: onChangeHandler }, props)),
-        react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${elementId}-help` }, (_b = props.helpText) === null || _b === void 0 ? void 0 : _b.toUpperCase())));
-};
-exports.default = InputUpload;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const general_1 = require("../../tools/general");
+const InputUpload = (_a) => {
+    var _b;
+    var { onChange, readAsArrayBuffer } = _a, props = __rest(_a, ["onChange", "readAsArrayBuffer"]);
+    const onChangeHandler = (event) => {
+        if (props.read && event.target.files) {
+            readFileBlob(event.target.files[0], false)
+                .then((result) => onChange(result))
+                .catch((err) => {
+                console.error('file read error', err);
+                onChange({ name: '', size: 0, data: '' });
+            });
+        }
+        else {
+            onChange(event.target.files);
+        }
+    };
+    const readFileBlob = (blob, image) => {
+        return new Promise((resolve, reject) => {
+            const fileReader = new FileReader();
+            if (image)
+                fileReader.readAsDataURL(blob);
+            else if (readAsArrayBuffer)
+                fileReader.readAsArrayBuffer(blob);
+            else
+                fileReader.readAsText(blob);
+            fileReader.onload = () => {
+                const fileResult = {
+                    name: blob.name,
+                    size: blob.size,
+                    data: fileReader.result
+                };
+                resolve(fileResult);
+            };
+            fileReader.onerror = (error) => {
+                reject(error);
+            };
+        });
+    };
+    const elementId = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = props.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)();
+    }, [props.id]);
+    return (react_1.default.createElement("div", { className: 'flex flex-col w-full gap-1 text-center' },
+        props.label && react_1.default.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white", htmlFor: `file-input-${elementId}` }, props.label),
+        react_1.default.createElement("input", Object.assign({ className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\r\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\r\n        file:border-0 file:text-sm file:font-semibold\r\n        file:bg-gray-100 file:text-blue-600\r\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${elementId}-help`, id: `file-input-${elementId}`, type: "file", onChange: onChangeHandler }, props)),
+        react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${elementId}-help` }, (_b = props.helpText) === null || _b === void 0 ? void 0 : _b.toUpperCase())));
+};
+exports.default = InputUpload;

package/dist/components/make-autocomplete/make-autocomplete.js

@@ -56,7 +56,7 @@ const MakeAutocomplete = (_a) => {
                 }
             }, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
                 var _a, _b, _c, _d;
-                return (react_1.default.createElement(react_2.Autocomplete, Object.assign({ size: 'sm' }, element, { isDisabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable, id: (_b = element.id) !== null && _b !== void 0 ? _b : (0, general_1.generateId)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKey: value, errorMessage: invalid ? ((_c = element.validation.message) !== null && _c !== void 0 ? _c : '') : undefined }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.AutocompleteItem, { key: opt.id, value: opt.id }, opt.name)))));
+                return (react_1.default.createElement(react_2.Autocomplete, Object.assign({ size: 'sm' }, element, { isDisabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable, id: (_b = element.id) !== null && _b !== void 0 ? _b : (0, general_1.generateId)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKey: value, color: invalid ? 'danger' : 'success', isInvalid: invalid, errorMessage: invalid ? ((_c = element.validation.message) !== null && _c !== void 0 ? _c : '') : undefined }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.AutocompleteItem, { key: opt.id, value: opt.id }, opt.name)))));
             } })
         : react_1.default.createElement(react_1.default.Fragment, null));
 };

package/dist/components/make-input/make-input.js

@@ -56,7 +56,7 @@ const MakeInput = (_a) => {
                 }
             }, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
                 var _a, _b, _c;
-                return (react_1.default.createElement(react_2.Input, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, value: value !== null && value !== void 0 ? value : '', errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
+                return (react_1.default.createElement(react_2.Input, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, value: value !== null && value !== void 0 ? value : '', color: invalid ? 'danger' : 'success', isInvalid: invalid, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
             } })
         : null);
 };

package/dist/components/make-multi-select/make-multi-select.js

@@ -56,7 +56,7 @@ const MakeMultiSelect = (_a) => {
                 }
             }, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
                 var _a, _b, _c, _d;
-                return (react_1.default.createElement(react_2.Select, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectionMode: "multiple", selectedKeys: value, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable, className: 'max-w-lg' }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.SelectItem, { key: opt.id, value: opt.id }, opt.name)))));
+                return (react_1.default.createElement(react_2.Select, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectionMode: "multiple", selectedKeys: value, color: invalid ? 'danger' : 'success', isInvalid: invalid, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable, className: 'max-w-lg' }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.SelectItem, { key: opt.id, value: opt.id }, opt.name)))));
             } })
         : null);
 };

package/dist/components/make-select/make-select.js

@@ -56,7 +56,7 @@ const MakeSelect = (_a) => {
                 }
             }, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
                 var _a, _b, _c, _d;
-                return (react_1.default.createElement(react_2.Select, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKeys: [value], errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.SelectItem, { key: opt.id, value: opt.id }, opt.name)))));
+                return (react_1.default.createElement(react_2.Select, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKeys: [value], color: invalid ? 'danger' : 'success', isInvalid: invalid, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.SelectItem, { key: opt.id, value: opt.id }, opt.name)))));
             } })
         : react_1.default.createElement(react_1.default.Fragment, null));
 };

package/dist/components/make-textarea/make-textarea.js

@@ -56,7 +56,7 @@ const MakeTextarea = (_a) => {
                 }
             }, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
                 var _a, _b, _c;
-                return (react_1.default.createElement(react_2.Textarea, Object.assign({}, element, { disableAutosize: true, id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, label: element.label, value: value !== null && value !== void 0 ? value : '', errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
+                return (react_1.default.createElement(react_2.Textarea, Object.assign({}, element, { disableAutosize: true, id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, label: element.label, value: value !== null && value !== void 0 ? value : '', color: invalid ? 'danger' : 'success', isInvalid: invalid, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
             } })
         : null);
 };

package/dist/components/make-upload/make-upload.js

@@ -1,26 +1,26 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_hook_form_1 = require("react-hook-form");
-const input_upload_1 = __importDefault(require("../input-upload/input-upload"));
-const field_render_1 = require("../../hooks/field-render");
-const MakeUpload = (props) => {
-    var _a, _b;
-    const { render, enable } = (0, field_render_1.useFieldRender)(props);
-    return (render
-        ? react_1.default.createElement(react_hook_form_1.Controller, { control: props.control, name: props.element.name, rules: {
-                required: props.element.validation.required,
-                pattern: {
-                    value: (_a = props.element.validation.regex) !== null && _a !== void 0 ? _a : /(.*)/,
-                    message: (_b = props.element.validation.message) !== null && _b !== void 0 ? _b : ''
-                }
-            }, render: ({ field: { onChange } }) => {
-                var _a;
-                return (react_1.default.createElement(input_upload_1.default, { id: props.element.id, name: props.element.name, disabled: (_a = props.element.disabled) !== null && _a !== void 0 ? _a : !enable, onChange: onChange, label: props.element.label, helpText: props.element.helpText, style: props.element.styles, accept: props.element.accept, read: props.element.read, readAsArrayBuffer: props.element.readAsArrayBuffer }));
-            } })
-        : null);
-};
-exports.default = MakeUpload;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const input_upload_1 = __importDefault(require("../input-upload/input-upload"));
+const field_render_1 = require("../../hooks/field-render");
+const MakeUpload = (props) => {
+    var _a, _b;
+    const { render, enable } = (0, field_render_1.useFieldRender)(props);
+    return (render
+        ? react_1.default.createElement(react_hook_form_1.Controller, { control: props.control, name: props.element.name, rules: {
+                required: props.element.validation.required,
+                pattern: {
+                    value: (_a = props.element.validation.regex) !== null && _a !== void 0 ? _a : /(.*)/,
+                    message: (_b = props.element.validation.message) !== null && _b !== void 0 ? _b : ''
+                }
+            }, render: ({ field: { onChange } }) => {
+                var _a;
+                return (react_1.default.createElement(input_upload_1.default, { id: props.element.id, name: props.element.name, disabled: (_a = props.element.disabled) !== null && _a !== void 0 ? _a : !enable, onChange: onChange, label: props.element.label, helpText: props.element.helpText, style: props.element.styles, accept: props.element.accept, read: props.element.read, readAsArrayBuffer: props.element.readAsArrayBuffer }));
+            } })
+        : null);
+};
+exports.default = MakeUpload;

package/dist/hooks/field-render.js

@@ -51,16 +51,16 @@ const useFieldRender = (props) => {
         const key = name !== null && name !== void 0 ? name : '';
         const targetField = formData[key];
         if (renderCondition && renderConditionList.includes(key)) {
-            const renderStatus = props.element.renderIf[key].includes(targetField);
+            const renderStatus = targetField === '*' ? true : props.element.renderIf[key].includes(targetField);
             if (render !== renderStatus)
                 setRender(renderStatus);
         }
         else if (enableCondition && enableConditionList.includes(key)) {
-            const enableStatus = props.element.enableIf[key].includes(targetField);
+            const enableStatus = targetField === '*' ? true : props.element.enableIf[key].includes(targetField);
             if (enable !== enableStatus)
                 setEnable(enableStatus);
         }
-        if (liveDataCondition && key === ((_b = props.element.liveData) === null || _b === void 0 ? void 0 : _b.condition)) {
+        if (liveDataCondition && ((_b = props.element.liveData) === null || _b === void 0 ? void 0 : _b.condition.includes(key))) {
             if (targetField) {
                 setLiveSearching(true);
                 const options = yield liveDataAction(targetField, formData);

package/dist/interfaces/input-upload.d.ts

@@ -1,33 +1,33 @@
-import { ChangeEvent, CSSProperties } from 'react';
-export interface IFileResult {
-    name: string;
-    size: number;
-    data: string;
-}
-export interface IFile {
-    data?: string;
-    name: string;
-    size: number;
-}
-export interface IInputState {
-    state: boolean;
-    file: IFile;
-}
-export interface IInputStorage {
-    setData: (file: IInputState) => void;
-    clearFuntion: () => void;
-}
-export interface IInputUpload {
-    id?: string;
-    value?: string;
-    onChange: (event: ChangeEvent<HTMLInputElement> | IFileResult | FileList | null) => void;
-    accept?: string;
-    label?: string;
-    helpText?: string;
-    clearfunction?: () => void;
-    style?: CSSProperties;
-    readAsArrayBuffer?: boolean;
-    name: string;
-    disabled?: boolean;
-    read?: boolean;
-}
+import { ChangeEvent, CSSProperties } from 'react';
+export interface IFileResult {
+    name: string;
+    size: number;
+    data: string;
+}
+export interface IFile {
+    data?: string;
+    name: string;
+    size: number;
+}
+export interface IInputState {
+    state: boolean;
+    file: IFile;
+}
+export interface IInputStorage {
+    setData: (file: IInputState) => void;
+    clearFuntion: () => void;
+}
+export interface IInputUpload {
+    id?: string;
+    value?: string;
+    onChange: (event: ChangeEvent<HTMLInputElement> | IFileResult | FileList | null) => void;
+    accept?: string;
+    label?: string;
+    helpText?: string;
+    clearfunction?: () => void;
+    style?: CSSProperties;
+    readAsArrayBuffer?: boolean;
+    name: string;
+    disabled?: boolean;
+    read?: boolean;
+}

package/dist/interfaces/make-upload.d.ts

@@ -1,12 +1,12 @@
-import { IField, IFieldProps } from './field';
-export interface IMakeUpload extends Omit<IField, 'defaultValue'> {
-    elementType: 'upload';
-    helpText?: string;
-    read: boolean;
-    image?: boolean;
-    accept?: string;
-    readAsArrayBuffer?: boolean;
-}
-export interface IMakeUploadProps extends IFieldProps {
-    element: IMakeUpload;
-}
+import { IField, IFieldProps } from './field';
+export interface IMakeUpload extends Omit<IField, 'defaultValue'> {
+    elementType: 'upload';
+    helpText?: string;
+    read: boolean;
+    image?: boolean;
+    accept?: string;
+    readAsArrayBuffer?: boolean;
+}
+export interface IMakeUploadProps extends IFieldProps {
+    element: IMakeUpload;
+}

package/dist/interfaces/modal.d.ts

@@ -12,10 +12,10 @@ import { IMakeButton } from './make-button';
 import { IMakeAutoComplete } from './make-autocomplete';
 export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeMultiSelect | IMakeText | IMakeUpload | IMakeButton | IMakeAutoComplete;
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle | IMakeMultiSelect;
-export type IModalRenderCondition = Record<string, Array<string | number>>;
+export type IModalRenderCondition = Record<string, Array<string | number | '*'>>;
 export type IModalLiveDataCondition = {
     action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
-    condition: string;
+    condition: Array<string>;
 };
 export interface IModalConfigProps {
     fields: Array<IModalField>;

package/dist/modal.js

@@ -127,7 +127,7 @@ const Modal = ({ open, close, config }) => {
         ? react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal' },
             react_1.default.createElement("div", { className: 'rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]', style: Object.assign({}, modalReady.styles) },
                 react_1.default.createElement("form", { className: 'flex flex-col p-4 gap-4', autoComplete: 'off', onSubmit: handleSubmit(actionHandler) },
-                    react_1.default.createElement("h2", { className: 'text-bold text-center border-b pb-4' }, modalReady.title),
+                    react_1.default.createElement("h2", { className: 'text-bold text-center border-b pb-4 font-semibold' }, modalReady.title),
                     react_1.default.createElement("div", { className: 'flex flex-col items-center gap-4 py-4', style: {
                             overflowY: modalReady.overFlowBody ? 'auto' : undefined,
                             height: modalReady.overFlowBody,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "The dynamic-modal is a solution of creation differents modals into project using a json configuration file",
   "main": "index.js",
   "scripts": {

package/src/components/make-autocomplete/make-autocomplete.tsx

@@ -34,6 +34,8 @@ const MakeAutocomplete: FC<IMakeAutoCompleteProps> = ({ element, ...props }) =>
             onSelectionChange={onChange}
             label={liveSearching ? 'Loading...' : element.label}
             selectedKey={value}
+            color={invalid ? 'danger' : 'success'}
+            isInvalid={invalid}
             errorMessage={invalid ? (element.validation.message ?? '') : undefined}
           >
             {

package/src/components/make-input/make-input.tsx

@@ -32,6 +32,8 @@ const MakeInput: FC<IMakeInputProps> = ({ element, ...props }) => {
             id={element.id ?? generateId()}
             onChange={onChange}
             value={value ?? ''}
+            color={invalid ? 'danger' : 'success'}
+            isInvalid={invalid}
             errorMessage={invalid ? (element.validation.message ?? '') : undefined}
             disabled={element.disabled ?? !enable}
           />

package/src/components/make-multi-select/make-multi-select.tsx

@@ -34,6 +34,8 @@ const MakeMultiSelect: FC<IMakeMultiSelectProps> = ({ element, ...props }) => {
             label={liveSearching ? 'Loading...' : element.label}
             selectionMode="multiple"
             selectedKeys={value}
+            color={invalid ? 'danger' : 'success'}
+            isInvalid={invalid}
             errorMessage={invalid ? (element.validation.message ?? '') : undefined}
             disabled={element.disabled ?? !enable}
             className='max-w-lg'

package/src/components/make-select/make-select.tsx

@@ -33,6 +33,8 @@ const MakeSelect: FC<IMakeSelectProps> = ({ element, ...props }) => {
             onChange={onChange}
             label={liveSearching ? 'Loading...' : element.label}
             selectedKeys={[value]}
+            color={invalid ? 'danger' : 'success'}
+            isInvalid={invalid}
             errorMessage={invalid ? (element.validation.message ?? '') : undefined}
             disabled={element.disabled ?? !enable}
           >

package/src/components/make-textarea/make-textarea.tsx

@@ -33,6 +33,8 @@ const MakeTextarea: FC<IMakeTextareaProps> = ({ element, ...props }) => {
             onChange={onChange}
             label={element.label}
             value={value ?? ''}
+            color={invalid ? 'danger' : 'success'}
+            isInvalid={invalid}
             errorMessage={invalid ? (element.validation.message ?? '') : undefined}
             disabled={element.disabled ?? !enable}
           />

package/src/hooks/field-render.ts

@@ -75,14 +75,14 @@ export const useFieldRender = (props: IFieldRenderProps): IFieldRender => {
       const targetField  = formData[key] as string | number
 
       if (renderCondition && renderConditionList.includes(key)) {
-        const renderStatus: boolean = (props.element.renderIf as IModalRenderCondition)[key].includes(targetField)
+        const renderStatus: boolean = targetField === '*' ? true : (props.element.renderIf as IModalRenderCondition)[key].includes(targetField)
         if (render !== renderStatus) setRender(renderStatus)
       } else if (enableCondition && enableConditionList.includes(key)) {
-        const enableStatus: boolean = (props.element.enableIf as IModalRenderCondition)[key].includes(targetField)
+        const enableStatus: boolean = targetField === '*' ? true : (props.element.enableIf as IModalRenderCondition)[key].includes(targetField)
         if (enable !== enableStatus) setEnable(enableStatus)
       }
 
-      if (liveDataCondition && key === props.element.liveData?.condition) {
+      if (liveDataCondition && props.element.liveData?.condition.includes(key)) {
         if (targetField) {
           setLiveSearching(true)
           const options: Array<IOption> = await liveDataAction(targetField, formData)

package/src/interfaces/modal.ts

@@ -16,11 +16,11 @@ export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeText
 
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle | IMakeMultiSelect
 
-export type IModalRenderCondition = Record<string, Array<string | number>>
+export type IModalRenderCondition = Record<string, Array<string | number | '*'>>
 
 export type IModalLiveDataCondition = {
   action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
-  condition: string
+  condition: Array<string>
 }
 
 export interface IModalConfigProps {

package/src/modal.tsx

@@ -115,7 +115,7 @@ export const Modal = ({ open, close, config }: IModal) => {
       ? <Portal closeTime={200} portalOpen={open} portalTag={'#modal-portal'}>
         <div className='rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]' style={{ ...modalReady.styles }} >
           <form className='flex flex-col p-4 gap-4' autoComplete='off' onSubmit={handleSubmit(actionHandler)}>
-            <h2 className='text-bold text-center border-b pb-4'>{modalReady.title}</h2>
+            <h2 className='text-bold text-center border-b pb-4 font-semibold'>{modalReady.title}</h2>
             <div
               className='flex flex-col items-center gap-4 py-4'
               style={{