@skalfa/skalfa-component 1.0.23 → 1.0.25

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "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()