@skalfa/skalfa-component 1.0.22 → 1.0.24

package/dist/input/Input.component.js

@@ -15,7 +15,7 @@ function InputComponent({ label, tip, leftIcon, rightIcon, className = "", value
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, props.type == "file");
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, props.type == "file", unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputCheckbox.component.js

@@ -14,7 +14,7 @@ function InputCheckboxComponent({ name, label, tip, vertical, className = "", cl
     // =========================>
     // ## initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false, unregister);
     // =========================>
     // ## Invalid handler
     // =========================>

package/dist/input/InputCurrency.component.js

@@ -9,7 +9,7 @@ function InputCurrencyComponent({ label, tip, leftIcon, rightIcon, value, invali
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputDate.component.js

@@ -19,7 +19,7 @@ function InputDateComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputDatetime.component.js

@@ -20,7 +20,7 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputDocument.component.js

@@ -23,7 +23,7 @@ function InputDocumentComponent({ label, tip, leftIcon, rightIcon, className = "
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, props.type == "file");
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, props.type == "file", unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputImage.component.js

@@ -17,7 +17,7 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1"
     const [drag, setDrag] = (0, react_1.useState)(false);
     const [cropSrc, setCropSrc] = (0, react_1.useState)(null);
     const [openCrop, setOpenCrop] = (0, react_1.useState)(false);
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, true);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, true, unregister);
     const [invalidMessage, setInvalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
     (0, react_1.useEffect)(() => {
         if (value) {

package/dist/input/InputNumber.component.js

@@ -9,7 +9,7 @@ function InputNumberComponent({ label, tip, leftIcon, rightIcon, value, invalid,
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputPassword.component.js

@@ -15,7 +15,7 @@ function InputPasswordComponent({ label, tip, leftIcon, rightIcon, value, invali
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     const randomConfirmId = (0, _utils_1.useInputRandomId)();
     // =========================>

package/dist/input/InputRadio.component.js

@@ -12,7 +12,7 @@ function InputRadioComponent({ name, label, tip, vertical, value, disabled, inva
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false, unregister);
     // =========================>
     // ## Invalid handler
     // =========================>

package/dist/input/InputTime.component.js

@@ -15,7 +15,7 @@ function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/Select.component.js

@@ -21,7 +21,7 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/supervision/FormSupervision.component.d.ts

@@ -24,6 +24,7 @@ type ClusterConstruction = {
     tip: string;
     fields: FormType[];
     wrap: boolean;
+    min?: number;
     /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
     className: string;
 };
@@ -44,12 +45,26 @@ type ConstructionMap = {
     custom: formCustomConstructionProps;
 };
 type TypeKeys = keyof ConstructionMap;
+export type WatchContext = {
+    values: Record<string, any>;
+    self: string;
+    prev: WatchAction;
+};
+export type WatchAction = {
+    disabled?: boolean;
+    hidden?: boolean;
+    value?: any;
+    required?: boolean;
+    readonly?: boolean;
+    reset?: boolean;
+};
 export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
     col?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
     className?: string;
     construction?: ConstructionMap[T];
     type?: T;
-    onHide?: (values: any) => boolean;
+    onHide?: (values: Record<string, any>) => boolean;
+    onWatch?: (ctx: WatchContext) => WatchAction | undefined;
 }
 export interface formSupervisionProps {
     title?: string;

package/dist/supervision/FormSupervision.component.js

@@ -13,7 +13,9 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
     const [modal, setModal] = (0, react_1.useState)(false);
     const [fresh, setFresh] = (0, react_1.useState)(true);
     const [mapGroups, setMapGroups] = (0, react_1.useState)({});
-    const [{ formControl, setRegister, values, setValues, errors, setErrors, setDefaultValues, submit, loading, confirm, },] = (0, _utils_1.useForm)(submitControl, payload, confirmation, (data) => {
+    const [watchState, setWatchState] = (0, react_1.useState)({});
+    const watchRef = (0, react_1.useRef)({});
+    const [{ formControl, setRegister, setUnregister, values, setValues, errors, setErrors, setDefaultValues, submit, loading, confirm, },] = (0, _utils_1.useForm)(submitControl, payload, confirmation, (data) => {
         onSuccess?.(data);
         setModal("success");
         setTimeout(() => setModal(false), 1000);
@@ -25,6 +27,82 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
         else
             setModal("failed");
     });
+    // ==============================>
+    // ## Watch: collect watchers from fields
+    // ==============================>
+    const collectWatchers = (fieldList, prefix) => {
+        const result = [];
+        for (const f of fieldList) {
+            const inputType = f.type || "default";
+            const name = prefix ? `${prefix}.${f.construction?.name}` : f.construction?.name || "";
+            if (inputType === "cluster") {
+                const cluster = f.construction;
+                const groupKey = prefix ? `${prefix}.${cluster.name}` : cluster.name;
+                const group = mapGroups[groupKey] || [];
+                for (const gIndex of group) {
+                    result.push(...collectWatchers(cluster.fields, `${cluster.name}[${gIndex}]`));
+                }
+            }
+            else if (f.onWatch) {
+                result.push({ name, onWatch: f.onWatch, construction: f.construction });
+            }
+        }
+        return result;
+    };
+    // ==============================>
+    // ## Watch: execute watchers on value change
+    // ==============================>
+    (0, react_1.useEffect)(() => {
+        const watchers = collectWatchers(fields);
+        if (watchers.length === 0) {
+            if (Object.keys(watchRef.current).length > 0) {
+                watchRef.current = {};
+                setWatchState({});
+            }
+            return;
+        }
+        const valMap = {};
+        values.forEach((v) => { valMap[v.name] = v.value; });
+        const nextState = {};
+        const valueUpdates = [];
+        for (const { name, onWatch, construction } of watchers) {
+            const prev = watchRef.current[name] || {};
+            const action = onWatch({ values: valMap, self: name, prev });
+            if (!action)
+                continue;
+            nextState[name] = action;
+            if (action.hidden && !prev.hidden)
+                setUnregister(name);
+            if (action.required !== prev.required) {
+                const baseValidations = Array.isArray(construction?.validations) ? [...construction.validations] : [];
+                const newValidations = action.required ? (baseValidations.includes("required") ? baseValidations : [...baseValidations, "required"]) : baseValidations.filter((v) => v !== "required");
+                setRegister({ name, validations: newValidations });
+            }
+            if (action.reset) {
+                const cur = valMap[name];
+                if (cur != null && cur !== "")
+                    valueUpdates.push({ name, value: "" });
+            }
+            else if (action.value !== undefined && action.value !== valMap[name]) {
+                valueUpdates.push({ name, value: action.value });
+            }
+        }
+        if (JSON.stringify(watchRef.current) !== JSON.stringify(nextState)) {
+            watchRef.current = nextState;
+            setWatchState(nextState);
+        }
+        if (valueUpdates.length > 0) {
+            const merged = [...values];
+            for (const upd of valueUpdates) {
+                const idx = merged.findIndex(v => v.name === upd.name);
+                if (idx >= 0)
+                    merged[idx] = upd;
+                else
+                    merged.push(upd);
+            }
+            setValues(merged);
+        }
+    }, [values, fields, mapGroups]);
     const GroupsFromDefaults = (defaults) => {
         const groups = {};
         Object.keys(defaults).forEach((key) => {
@@ -53,18 +131,42 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
         resetFresh();
     }, [fields]);
     (0, react_1.useEffect)(() => {
+        const minGroups = {};
+        const initialValues = [];
+        const processMinClusters = (formList, prefix) => {
+            formList.forEach((form) => {
+                if (form.type === "cluster" && form.construction) {
+                    const { name: mapName, fields: innerForms, min } = form.construction;
+                    const groupKey = prefix ? `${prefix}.${mapName}` : mapName;
+                    const minCount = Math.max(0, min || 0);
+                    if (minCount > 0) {
+                        minGroups[groupKey] = Array.from({ length: minCount }, (_, i) => i);
+                        for (let gIndex = 0; gIndex < minCount; gIndex++) {
+                            innerForms.forEach((inner) => {
+                                const fieldName = `${groupKey}[${gIndex}].${inner.construction?.name}`;
+                                initialValues.push({ name: fieldName, value: "" });
+                            });
+                        }
+                    }
+                }
+            });
+        };
+        processMinClusters(fields);
         if (defaultValue) {
             setDefaultValues(defaultValue);
             const derivedGroups = GroupsFromDefaults(defaultValue);
-            setMapGroups(derivedGroups);
+            setMapGroups({ ...minGroups, ...derivedGroups });
             resetFresh();
         }
         else {
             setDefaultValues(null);
-            setMapGroups({});
+            setMapGroups(minGroups);
+            if (initialValues.length > 0) {
+                setValues(initialValues);
+            }
             resetFresh();
         }
-    }, [defaultValue]);
+    }, [defaultValue, fields]);
     const generateColClass = (col) => String(col).split(" ").map((c) => (c.includes(":") ? `${c.replace(":", ":col-span-")}` : `col-span-${c}`)).join(" ");
     const inputMap = {
         default: __1.InputComponent,
@@ -85,13 +187,29 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
     const renderInput = (form, key, prefix) => {
         const inputType = form.type || "default";
         const name = prefix ? `${prefix}.${form.construction?.name}` : form.construction?.name || "input_name";
-        if (form?.onHide?.(values))
+        const valMap = {};
+        values.forEach((v) => { valMap[v.name] = v.value; });
+        if (form?.onHide?.(valMap))
+            return null;
+        const ws = watchState[name];
+        if (ws?.hidden)
             return null;
         if (inputType === "cluster") {
-            const { name: mapName, fields: innerForms, label, tip, wrap, className } = form.construction;
+            const { name: mapName, fields: innerForms, label, tip, wrap, className, min } = form.construction;
+            const minCount = Math.max(0, min || 0);
             const groupKey = prefix ? `${prefix}.${mapName}` : mapName;
-            const group = mapGroups[groupKey] || [0];
-            const addGroup = () => setMapGroups((prev) => ({ ...prev, [groupKey]: [...group, group.length] }));
+            const defaultGroup = minCount > 0 ? Array.from({ length: minCount }, (_, i) => i) : [];
+            const group = mapGroups[groupKey] ?? defaultGroup;
+            const showDeleteButton = group.length > minCount;
+            const addGroup = () => {
+                const nextIndex = group.length;
+                setMapGroups((prev) => ({ ...prev, [groupKey]: [...group, nextIndex] }));
+                const newGroupValues = innerForms.map((inner) => ({
+                    name: `${groupKey}[${nextIndex}].${inner.construction?.name}`,
+                    value: "",
+                }));
+                setValues([...values, ...newGroupValues]);
+            };
             const removeGroup = (index) => {
                 const filteredGroup = group.filter((_, i) => i !== index);
                 const newGroup = filteredGroup.map((_, i) => i);
@@ -116,14 +234,15 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
                 });
                 setValues(updatedValues);
             };
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("relative pr-8", wrap && "p-4 rounded border", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip"), children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full grid grid-cols-12 gap-4", children: innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`)) }), (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/times", paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("absolute top-10 right-2 translate-x-[50%] -translate-y-[50%]", wrap && "translate-x-0 -translate-y-0 top-1 right-1"), onClick: () => removeGroup(gIndex) })] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label: `${l.base.add ? l.base.add() : "Add"} ${label || mapName}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
+            const clusterError = errors?.find((err) => err.name === groupKey || err.name === mapName)?.error;
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [label && (0, jsx_runtime_1.jsx)("p", { className: "input-label", children: label }), clusterError && (0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: clusterError }), group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("relative pr-8", wrap && "p-4 rounded border", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip"), children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full grid grid-cols-12 gap-4", children: innerForms.map((inner, i) => renderInput(inner, i, `${groupKey}[${gIndex}]`)) }), showDeleteButton && ((0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/times", paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("absolute top-10 right-2 translate-x-[50%] -translate-y-[50%]", wrap && "translate-x-0 -translate-y-0 top-1 right-1"), onClick: () => removeGroup(gIndex) }))] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label: `${l.base.add ? l.base.add() : "Add"} ${label || mapName}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
         }
         if (inputType === "custom") {
             const customRender = form.construction;
             return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: customRender?.({ formControl, values, setValues, errors, setErrors, setRegister, prefixName: prefix }) }, key));
         }
         const Component = inputMap[inputType] || __1.InputComponent;
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: (0, jsx_runtime_1.jsx)(Component, { ...form.construction, ...formControl(name) }) }, key));
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: (0, jsx_runtime_1.jsx)(Component, { ...form.construction, ...formControl(name), disabled: ws?.disabled, readOnly: ws?.readonly, name: name }) }, key));
     };
     (0, react_1.useEffect)(() => {
         (modal == "failed") && setModal(false);

package/dist/supervision/TableSupervision.component.js

@@ -213,10 +213,10 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
                                 } }) }, "button-add"));
                     }
                     if (cb == "IMPORT") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-excel", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_IMPORT_${toggleKey}`), size: "sm" }) }, "import"));
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/import", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_IMPORT_${toggleKey}`), size: "sm" }) }, "import"));
                     }
                     if (cb == "EXPORT") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-excel", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_EXPORT_${toggleKey}`), size: "sm" }) }, "export-excel"));
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/export", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_EXPORT_${toggleKey}`), size: "sm" }) }, "export-excel"));
                     }
                     if (cb == "PRINT") {
                         return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-pdf", label: l.base.print ? l.base.print() : "Print", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_PRINT_${toggleKey}`), size: "sm" }) }, "export-pdf"));

package/dist/table/Table.component.js

@@ -97,7 +97,7 @@ function TableComponent({ id, controlBar, columns, data, pagination, loading, so
                     selector: c.selector,
                     type: typeof c?.filterable == "object" ? c?.filterable?.type : "text",
                     options: typeof c?.filterable == "object" && c?.filterable?.type == "select" ? c?.filterable?.options : undefined
-                })), onFilter: (filters) => onChangeFilter?.(filters), filter: filter, className: (0, _utils_1.pcn)(className, "controller-bar") || "" })), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(ScrollContainer_component_1.ScrollContainerComponent, { scrollFloating: !isSm && block, className: "w-full", onScroll: (e) => {
+                })), onFilter: (filters) => onChangeFilter?.(filters), filter: filter, className: (0, _utils_1.pcn)(className, "controller-bar") || "" })), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(ScrollContainer_component_1.ScrollContainerComponent, { scrollFloating: !isSm && block, className: `w-full ${block ? "pb-12" : ""}`, onScroll: (e) => {
                         actionColumnRef.current?.clientWidth && e.scrollLeft &&
                             setShowFloatingAction(e.scrollLeft + e.clientWidth <= e.scrollWidth - actionColumnRef.current?.clientWidth);
                     }, footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: block && pagination && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "py-6" }), (0, jsx_runtime_1.jsx)("div", { className: "my-2 absolute bottom-0 w-full", children: (0, jsx_runtime_1.jsx)(Pagination_component_1.PaginationComponent, { ...pagination }) })] })) }), children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "w-max min-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "table-loading-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-loading-text", children: l.base.tableLoading ? l.base.tableLoading() : "" }) }) })) : !data || !data.length ? ((0, jsx_runtime_1.jsx)("div", { className: "table-empty-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-empty-text", children: l.base.tableEmpty ? l.base.tableEmpty() : "Data empty" }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isSm || !responsiveControl?.mobile ? ((0, jsx_runtime_1.jsxs)("div", { className: "w-max min-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-head-row", (0, _utils_1.pcn)(className, "row")), children: [!!actionBulking && ((0, jsx_runtime_1.jsx)("div", { className: "table-head-column w-max", children: (0, jsx_runtime_1.jsx)(Checkbox_component_1.CheckboxComponent, { name: "selected_table", className: "w-5 h-5", checked: data.length > 0 && checks?.length === data.length, onChange: () => data.length > 0 && checks?.length === data.length ? onChangeChecks?.([]) : onChangeChecks?.(data.map((d) => d.id)) }) })), !noIndex && (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-head-column w-8", (0, _utils_1.pcn)(className, "head-column")), children: "#" }), renderHead()] }), (0, jsx_runtime_1.jsx)("div", { className: "table-body", children: data.map((item, key) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
   "keywords": [

package/src/input/Input.component.tsx

@@ -72,7 +72,7 @@ export function InputComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler      =  useInputHandler(props.name, value, validations, register, props.type == "file")
+  const inputHandler      =  useInputHandler(props.name, value, validations, register, props.type == "file", unregister)
   const randomId          =  useInputRandomId()
 
 

package/src/input/InputCheckbox.component.tsx

@@ -70,7 +70,7 @@ export function InputCheckboxComponent({
   // =========================>
   // ## initial
   // =========================>
-  const inputHandler = useInputHandler(name, value, validations, register, false)
+  const inputHandler = useInputHandler(name, value, validations, register, false, unregister)
 
 
   // =========================>

package/src/input/InputCurrency.component.tsx

@@ -55,7 +55,7 @@ export function InputCurrencyComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler = useInputHandler(props.name, value, validations, register, false)
+  const inputHandler = useInputHandler(props.name, value, validations, register, false, unregister)
   const randomId = useInputRandomId()
 
 

package/src/input/InputDate.component.tsx

@@ -54,7 +54,7 @@ export function InputDateComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler = useInputHandler(props.name, value, validations, register, false)
+  const inputHandler = useInputHandler(props.name, value, validations, register, false, unregister)
   const randomId = useInputRandomId()
 
 

package/src/input/InputDatetime.component.tsx

@@ -61,7 +61,7 @@ export function InputDatetimeComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler  =  useInputHandler(props.name, value, validations, register, false)
+  const inputHandler  =  useInputHandler(props.name, value, validations, register, false, unregister)
   const randomId      =  useInputRandomId()
 
 

package/src/input/InputDocument.component.tsx

@@ -73,7 +73,7 @@ export function InputDocumentComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler      =  useInputHandler(props.name, value, validations, register, props.type == "file")
+  const inputHandler      =  useInputHandler(props.name, value, validations, register, props.type == "file", unregister)
   const randomId          =  useInputRandomId()
 
   // =========================>

package/src/input/InputImage.component.tsx

@@ -56,7 +56,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
   const [cropSrc, setCropSrc]    =  useState<string | null>(null);
   const [openCrop, setOpenCrop]  =  useState(false);
 
-  const inputHandler                         =  useInputHandler(name, value, validations, register, true);
+  const inputHandler                         =  useInputHandler(name, value, validations, register, true, unregister);
   const [invalidMessage, setInvalidMessage]  =  useValidation(inputHandler.value, validations, invalid, inputHandler.idle);
 
   useEffect(() => {

package/src/input/InputNumber.component.tsx

@@ -53,7 +53,7 @@ export function InputNumberComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler  =  useInputHandler(props.name, value, validations, register, false)
+  const inputHandler  =  useInputHandler(props.name, value, validations, register, false, unregister)
   const randomId      =  useInputRandomId()
 
 

package/src/input/InputPassword.component.tsx

@@ -55,7 +55,7 @@ export function InputPasswordComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler     =  useInputHandler(props.name, value, validations, register, false)
+  const inputHandler     =  useInputHandler(props.name, value, validations, register, false, unregister)
   const randomId         =  useInputRandomId()
   const randomConfirmId  =  useInputRandomId()
 

package/src/input/InputRadio.component.tsx

@@ -68,7 +68,7 @@ export function InputRadioComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler  =  useInputHandler(name, value, validations, register, false)
+  const inputHandler  =  useInputHandler(name, value, validations, register, false, unregister)
 
 
   // =========================>

package/src/input/InputTime.component.tsx

@@ -53,7 +53,7 @@ export function InputTimeComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler  =  useInputHandler(props.name, value, validations, register, false)
+  const inputHandler  =  useInputHandler(props.name, value, validations, register, false, unregister)
   const randomId      =  useInputRandomId()
   
   

package/src/input/Select.component.tsx

@@ -105,7 +105,7 @@ export function SelectComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler  =  useInputHandler(name, value, validations, register, false)
+  const inputHandler  =  useInputHandler(name, value, validations, register, false, unregister)
   const randomId      =  useInputRandomId()
 
 

package/src/supervision/FormSupervision.component.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { ApiType, cn, pcn, FormErrorType, FormRegisterType, FormValueType, useForm, ValidationRules, DBSchema } from "@utils";
 import {
   InputCheckboxComponent,
@@ -65,6 +65,7 @@ type ClusterConstruction = {
   tip             :  string;
   fields          :  FormType[];
   wrap            :  boolean;
+  min            ?:  number;
 
   /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
   className  :  string;
@@ -89,12 +90,28 @@ type ConstructionMap = {
 
 type TypeKeys = keyof ConstructionMap;
 
+export type WatchContext = {
+  values  : Record<string, any>
+  self    : string
+  prev    : WatchAction
+}
+
+export type WatchAction = {
+  disabled  ?: boolean
+  hidden    ?: boolean
+  value     ?: any
+  required  ?: boolean
+  readonly  ?: boolean
+  reset     ?: boolean
+}
+
 export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
   col           ?:  1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
   className     ?:  string;
   construction  ?:  ConstructionMap[T];
   type          ?:  T;
-  onHide        ?:  (values: any) => boolean;
+  onHide        ?:  (values: Record<string, any>) => boolean;
+  onWatch       ?:  (ctx: WatchContext) => WatchAction | undefined;
 }
 
 export interface formSupervisionProps {
@@ -130,14 +147,17 @@ export function FormSupervisionComponent({
 }: formSupervisionProps) {
   const l = useLang();
 
-  const [modal, setModal]          =  useState<boolean | "success" | "failed">(false);
-  const [fresh, setFresh]          =  useState<boolean>(true);
-  const [mapGroups, setMapGroups]  =  useState<Record<string, number[]>>({});
+  const [modal, setModal]            =  useState<boolean | "success" | "failed">(false);
+  const [fresh, setFresh]            =  useState<boolean>(true);
+  const [mapGroups, setMapGroups]      =  useState<Record<string, number[]>>({});
+  const [watchState, setWatchState]    =  useState<Record<string, WatchAction>>({});
+  const watchRef                       =  useRef<Record<string, WatchAction>>({});
 
   const [
     {
       formControl,
       setRegister,
+      setUnregister,
       values,
       setValues,
       errors,
@@ -164,6 +184,95 @@ export function FormSupervisionComponent({
     }
   );
 
+  // ==============================>
+  // ## Watch: collect watchers from fields
+  // ==============================>
+  const collectWatchers = (fieldList: FormType[], prefix?: string): { name: string, onWatch: NonNullable<FormType['onWatch']>, construction: any }[] => {
+    const result: { name: string, onWatch: NonNullable<FormType['onWatch']>, construction: any }[] = [];
+
+    for (const f of fieldList) {
+      const inputType = f.type || "default";
+      const name      = prefix ? `${prefix}.${f.construction?.name}` : f.construction?.name || "";
+
+      if (inputType === "cluster") {
+        const cluster   = f.construction as ClusterConstruction;
+        const groupKey  = prefix ? `${prefix}.${cluster.name}` : cluster.name;
+        const group     = mapGroups[groupKey] || [];
+
+        for (const gIndex of group) {
+          result.push(...collectWatchers(cluster.fields, `${cluster.name}[${gIndex}]`));
+        }
+      } else if (f.onWatch) {
+        result.push({ name, onWatch: f.onWatch, construction: f.construction });
+      }
+    }
+
+    return result;
+  };
+
+  // ==============================>
+  // ## Watch: execute watchers on value change
+  // ==============================>
+  useEffect(() => {
+    const watchers = collectWatchers(fields);
+    if (watchers.length === 0) {
+      if (Object.keys(watchRef.current).length > 0) {
+        watchRef.current = {};
+        setWatchState({});
+      }
+      return;
+    }
+
+    const valMap: Record<string, any> = {};
+    values.forEach((v) => { valMap[v.name] = v.value; });
+
+    const nextState    : Record<string, WatchAction> = {};
+    const valueUpdates : FormValueType[] = [];
+
+    for (const { name, onWatch, construction } of watchers) {
+      const prev   = watchRef.current[name] || {};
+      const action = onWatch({ values: valMap, self: name, prev });
+
+      if (!action) continue;
+
+      nextState[name] = action;
+
+      if (action.hidden && !prev.hidden) setUnregister(name);
+
+      if (action.required !== prev.required) {
+        const baseValidations = Array.isArray(construction?.validations) ? [...construction.validations] : [];
+        const newValidations  = action.required ? (baseValidations.includes("required") ? baseValidations : [...baseValidations, "required"]) : baseValidations.filter((v: string) => v !== "required");
+
+        setRegister({ name, validations: newValidations });
+      }
+
+      if (action.reset) {
+        const cur = valMap[name];
+
+        if (cur != null && cur !== "") valueUpdates.push({ name, value: "" });
+      } else if (action.value !== undefined && action.value !== valMap[name]) {
+        valueUpdates.push({ name, value: action.value });
+      }
+    }
+
+    if (JSON.stringify(watchRef.current) !== JSON.stringify(nextState)) {
+      watchRef.current = nextState;
+      setWatchState(nextState);
+    }
+
+    if (valueUpdates.length > 0) {
+      const merged = [...values];
+
+      for (const upd of valueUpdates) {
+        const idx = merged.findIndex(v => v.name === upd.name);
+        if (idx >= 0) merged[idx] = upd;
+        else merged.push(upd);
+      }
+
+      setValues(merged);
+    }
+  }, [values, fields, mapGroups]);
+
   const GroupsFromDefaults = (defaults: Record<string, any>): Record<string, number[]> => {
     const groups: Record<string, Set<number>> = {};
 
@@ -201,19 +310,46 @@ export function FormSupervisionComponent({
   }, [fields]);
 
   useEffect(() => {
-  if (defaultValue) {
-    setDefaultValues(defaultValue);
-
-    const derivedGroups = GroupsFromDefaults(defaultValue);
-    setMapGroups(derivedGroups);
-
-    resetFresh();
-  } else {
-    setDefaultValues(null);
-    setMapGroups({});
-    resetFresh();
-  }
-}, [defaultValue]);
+    const minGroups: Record<string, number[]> = {};
+    const initialValues: FormValueType[] = [];
+
+    const processMinClusters = (formList: FormType[], prefix?: string) => {
+      formList.forEach((form) => {
+        if (form.type === "cluster" && form.construction) {
+          const { name: mapName, fields: innerForms, min } = form.construction as ClusterConstruction;
+          const groupKey = prefix ? `${prefix}.${mapName}` : mapName;
+          const minCount = Math.max(0, min || 0);
+
+          if (minCount > 0) {
+            minGroups[groupKey] = Array.from({ length: minCount }, (_, i) => i);
+
+            for (let gIndex = 0; gIndex < minCount; gIndex++) {
+              innerForms.forEach((inner) => {
+                const fieldName = `${groupKey}[${gIndex}].${inner.construction?.name}`;
+                initialValues.push({ name: fieldName, value: "" });
+              });
+            }
+          }
+        }
+      });
+    };
+
+    processMinClusters(fields);
+
+    if (defaultValue) {
+      setDefaultValues(defaultValue);
+      const derivedGroups = GroupsFromDefaults(defaultValue);
+      setMapGroups({ ...minGroups, ...derivedGroups });
+      resetFresh();
+    } else {
+      setDefaultValues(null);
+      setMapGroups(minGroups);
+      if (initialValues.length > 0) {
+        setValues(initialValues);
+      }
+      resetFresh();
+    }
+  }, [defaultValue, fields]);
 
   const generateColClass = (col: string | number) => String(col).split(" ").map((c) => (c.includes(":") ? `${c.replace(":", ":col-span-")}` : `col-span-${c}`)).join(" ");
 
@@ -238,15 +374,35 @@ export function FormSupervisionComponent({
     const inputType = form.type || "default";
     const name = prefix ? `${prefix}.${form.construction?.name}` : form.construction?.name || "input_name";
 
-    if (form?.onHide?.(values)) return null;
+    const valMap: Record<string, any> = {};
+    values.forEach((v) => { valMap[v.name] = v.value; });
+
+    if (form?.onHide?.(valMap)) return null;
+
+    const ws = watchState[name];
+    if (ws?.hidden) return null;
 
     if (inputType === "cluster") {
-      const { name: mapName, fields: innerForms, label, tip, wrap, className } = form.construction as ClusterConstruction;
+      const { name: mapName, fields: innerForms, label, tip, wrap, className, min } = form.construction as ClusterConstruction;
+      const minCount = Math.max(0, min || 0);
 
       const groupKey = prefix ? `${prefix}.${mapName}` : mapName;
-      const group = mapGroups[groupKey] || [0];
+      const defaultGroup = minCount > 0 ? Array.from({ length: minCount }, (_, i) => i) : [];
+      const group = mapGroups[groupKey] ?? defaultGroup;
+
+      const showDeleteButton = group.length > minCount;
 
-      const addGroup = () => setMapGroups((prev) => ({ ...prev, [groupKey]: [...group, group.length] }));
+      const addGroup = () => {
+        const nextIndex = group.length;
+        setMapGroups((prev) => ({ ...prev, [groupKey]: [...group, nextIndex] }));
+
+        const newGroupValues = innerForms.map((inner) => ({
+          name: `${groupKey}[${nextIndex}].${inner.construction?.name}`,
+          value: "",
+        }));
+
+        setValues([...values, ...newGroupValues]);
+      };
 
       const removeGroup = (index: number) => {
         const filteredGroup = group.filter((_, i) => i !== index);
@@ -275,8 +431,12 @@ export function FormSupervisionComponent({
         setValues(updatedValues);
       };
 
+      const clusterError = errors?.find((err: FormErrorType) => err.name === groupKey || err.name === mapName)?.error;
+
       return (
         <div key={key} className={cn("flex flex-col gap-4", generateColClass(form.col || "12"))}>
+          {label && <p className="input-label">{label}</p>}
+          {clusterError && <small className="input-error-message">{clusterError}</small>}
           {group.map((gIndex) => (
             <div key={gIndex} className={cn("relative pr-8", wrap && "p-4 rounded border", className)}>
               {label && <p className="input-label">{label} {gIndex + 1}</p>}
@@ -284,17 +444,19 @@ export function FormSupervisionComponent({
               {(label || tip) && <div className="mb-2"></div>}
 
               <div className="w-full grid grid-cols-12 gap-4">
-                {innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`))}
+                {innerForms.map((inner, i) => renderInput(inner, i, `${groupKey}[${gIndex}]`))}
               </div>
 
-              <ButtonComponent
-                icon={"solid/times"}
-                paint="danger"
-                variant="outline"
-                size="xs"
-                className={cn("absolute top-10 right-2 translate-x-[50%] -translate-y-[50%]", wrap && "translate-x-0 -translate-y-0 top-1 right-1")}
-                onClick={() => removeGroup(gIndex)}
-              />
+              {showDeleteButton && (
+                <ButtonComponent
+                  icon={"solid/times"}
+                  paint="danger"
+                  variant="outline"
+                  size="xs"
+                  className={cn("absolute top-10 right-2 translate-x-[50%] -translate-y-[50%]", wrap && "translate-x-0 -translate-y-0 top-1 right-1")}
+                  onClick={() => removeGroup(gIndex)}
+                />
+              )}
             </div>
           ))}
 
@@ -326,7 +488,9 @@ export function FormSupervisionComponent({
         <Component
           {...(form.construction as any)}
           {...formControl(name)}
-          // autoFocus={key === 0}
+          disabled={ws?.disabled}
+          readOnly={ws?.readonly}
+          name={name}
         />
       </div>
     );

package/src/supervision/TableSupervision.component.tsx

@@ -431,7 +431,7 @@ export function TableSupervisionComponent({
               return (
                 <div className="px-1.5 rounded-md relative" key={"import"}>
                   <ButtonComponent
-                    icon={"solid/file-excel"}
+                    icon={"solid/import"}
                     variant="outline"
                     className="!text-foreground"
                     onClick={() => setToggle(`MODAL_IMPORT_${toggleKey}`)}
@@ -445,7 +445,7 @@ export function TableSupervisionComponent({
               return (
                 <div className="px-1.5 rounded-md relative" key={"export-excel"}>
                   <ButtonComponent
-                    icon={"solid/file-excel"}
+                    icon={"solid/export"}
                     variant="outline"
                     className="!text-foreground"
                     onClick={() => setToggle(`MODAL_EXPORT_${toggleKey}`)}

package/src/table/Table.component.tsx

@@ -293,7 +293,7 @@ export function TableComponent({
       <div className="relative">
         <ScrollContainerComponent
           scrollFloating={!isSm && block}
-          className="w-full"
+          className={`w-full ${block ? "pb-12" : ""}`}
           onScroll={(e) => {
             actionColumnRef.current?.clientWidth &&  e.scrollLeft &&
               setShowFloatingAction(e.scrollLeft + e.clientWidth <=  e.scrollWidth - actionColumnRef.current?.clientWidth);