@dragonmastery/zinia-forms-core 0.3.10 → 0.3.11

package/dist/index.d.ts

@@ -882,6 +882,8 @@ interface TextareaFieldProps<FormType> {
     size?: string;
     variant?: string;
     rows?: number;
+    autoExpand?: boolean;
+    maxRows?: number;
 }
 
 interface TextFieldProps<FormType> {
@@ -1359,6 +1361,11 @@ declare function useForm<T extends z.ZodObject<any>, CalcType = (values: z.infer
         getDisplayText: (path: string) => string;
         setSelectedIndex: (path: string, index: number) => void;
         getSelectedIndex: (path: string) => number;
+        getArrayItemId: (path: string, index: number) => string;
+        addArrayItemId: (path: string, index?: number) => string;
+        removeArrayItemId: (path: string, index: number) => void;
+        swapArrayItemIds: (path: string, indexA: number, indexB: number) => void;
+        syncArrayItemIds: (path: string) => void;
     };
     ZiniaForm: vue.FunctionalComponent<FormProps<z.TypeOf<T>>, {}, any, {}>;
     ZiniaSubmitButton: vue.FunctionalComponent<SubmitButtonProps<z.TypeOf<T>>, {}, any, {}>;

package/dist/index.js

@@ -849,6 +849,71 @@ function setFieldSelectedIndex(formState, path, index) {
 function getFieldSelectedIndex(formState, path) {
   return formState.selectedIndex[path] ?? -1;
 }
+function generateArrayItemId() {
+  return `item-${Math.random().toString(36).substr(2, 9)}-${Date.now()}`;
+}
+function getArrayItemId(formState, path, index) {
+  if (!formState.arrayItemIds[path]) {
+    formState.arrayItemIds[path] = [];
+  }
+  const ids = formState.arrayItemIds[path];
+  const arrayValue = getFieldValue(formState, path);
+  const arrayLength = Array.isArray(arrayValue) ? arrayValue.length : 0;
+  while (ids.length < arrayLength) {
+    ids.push(generateArrayItemId());
+  }
+  if (index >= ids.length) {
+    ids.push(generateArrayItemId());
+  }
+  return ids[index];
+}
+function addArrayItemId(formState, path, index) {
+  if (!formState.arrayItemIds[path]) {
+    formState.arrayItemIds[path] = [];
+  }
+  const ids = formState.arrayItemIds[path];
+  const newId = generateArrayItemId();
+  if (index !== void 0 && index >= 0 && index <= ids.length) {
+    ids.splice(index, 0, newId);
+  } else {
+    ids.push(newId);
+  }
+  return newId;
+}
+function removeArrayItemId(formState, path, index) {
+  if (!formState.arrayItemIds[path]) {
+    return;
+  }
+  const ids = formState.arrayItemIds[path];
+  if (index >= 0 && index < ids.length) {
+    ids.splice(index, 1);
+  }
+}
+function swapArrayItemIds(formState, path, indexA, indexB) {
+  if (!formState.arrayItemIds[path]) {
+    return;
+  }
+  const ids = formState.arrayItemIds[path];
+  if (indexA >= 0 && indexA < ids.length && indexB >= 0 && indexB < ids.length) {
+    const temp = ids[indexA];
+    ids[indexA] = ids[indexB];
+    ids[indexB] = temp;
+  }
+}
+function syncArrayItemIds(formState, path) {
+  const arrayValue = getFieldValue(formState, path);
+  const arrayLength = Array.isArray(arrayValue) ? arrayValue.length : 0;
+  if (!formState.arrayItemIds[path]) {
+    formState.arrayItemIds[path] = [];
+  }
+  const ids = formState.arrayItemIds[path];
+  while (ids.length < arrayLength) {
+    ids.push(generateArrayItemId());
+  }
+  if (ids.length > arrayLength) {
+    ids.splice(arrayLength);
+  }
+}
 
 // src/registry/metadataRegistry.ts
 var globalRegistry = {};
@@ -1526,6 +1591,7 @@ function useFormState(initialData, options) {
     undoHistory: {},
     redoHistory: {},
     pendingOperations: {},
+    arrayItemIds: {},
     // Form status
     isSubmitting: false,
     hasAttemptedSubmit: false,
@@ -2009,7 +2075,13 @@ function useForm(schema, options) {
     setDisplayText: (path, text) => setFieldDisplayText(formState.state, path, text),
     getDisplayText: (path) => getFieldDisplayText(formState.state, path),
     setSelectedIndex: (path, index) => setFieldSelectedIndex(formState.state, path, index),
-    getSelectedIndex: (path) => getFieldSelectedIndex(formState.state, path)
+    getSelectedIndex: (path) => getFieldSelectedIndex(formState.state, path),
+    // Array item ID management (for stable keys in ArrayField)
+    getArrayItemId: (path, index) => getArrayItemId(formState.state, path, index),
+    addArrayItemId: (path, index) => addArrayItemId(formState.state, path, index),
+    removeArrayItemId: (path, index) => removeArrayItemId(formState.state, path, index),
+    swapArrayItemIds: (path, indexA, indexB) => swapArrayItemIds(formState.state, path, indexA, indexB),
+    syncArrayItemIds: (path) => syncArrayItemIds(formState.state, path)
   };
   if (options.autoProvide !== false) {
     provide(ZINIA_FORM_SCHEMA_KEY, schema);
@@ -3736,6 +3808,7 @@ function createDaisyUIArrayField() {
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
     const arrayValue = formState.getValue(props.name) || [];
+    formState.syncArrayItemIds(props.name);
     const fieldName = String(props.name);
     if (!formState.collapsedFields[fieldName]) {
       formState.collapsedFields[fieldName] = {
@@ -3874,7 +3947,19 @@ function createDaisyUIArrayField() {
       const currentActualArray = formState.getValue(props.name) || [];
       const newArray = [...currentActualArray];
       const removedItem = newArray[opToConfirm.index];
-      newArray.splice(opToConfirm.index, 1);
+      const removedIndex = opToConfirm.index;
+      newArray.splice(removedIndex, 1);
+      formState.removeArrayItemId(props.name, removedIndex);
+      const collapsedItems = collapseState.collapsedItems;
+      const deletedIndexPos = collapsedItems.indexOf(removedIndex);
+      if (deletedIndexPos > -1) {
+        collapsedItems.splice(deletedIndexPos, 1);
+      }
+      for (let i = 0; i < collapsedItems.length; i++) {
+        if (collapsedItems[i] > removedIndex) {
+          collapsedItems[i] = collapsedItems[i] - 1;
+        }
+      }
       formState.setValue(props.name, newArray);
       formState.validateField(props.name);
       const instance = getCurrentInstance();
@@ -3886,10 +3971,10 @@ function createDaisyUIArrayField() {
       }
       formState.pendingOperations[fieldName] = ops.filter((op) => op.timestamp !== opToConfirm.timestamp);
       if (opToConfirm.type === "remove" && opToConfirm.index !== void 0) {
-        const removedIndex = opToConfirm.index;
+        const removedIndex2 = opToConfirm.index;
         const remainingOps = formState.pendingOperations[fieldName];
         const updatedOps = remainingOps.map((op) => {
-          if (op.type === "remove" && op.index !== void 0 && op.index > removedIndex) {
+          if (op.type === "remove" && op.index !== void 0 && op.index > removedIndex2) {
             const newIndex = op.index - 1;
             const currentArray = formState.getValue(props.name) || [];
             const newCurrentState = [...currentArray];
@@ -3942,6 +4027,7 @@ function createDaisyUIArrayField() {
       }
       const itemCopy = JSON.parse(JSON.stringify(item));
       const newArray = [...currentArray, itemCopy];
+      formState.addArrayItemId(props.name, newArray.length - 1);
       formState.setValue(props.name, newArray);
       formState.validateField(props.name);
       if (props.onAddItem) {
@@ -3965,6 +4051,17 @@ function createDaisyUIArrayField() {
         createPendingOperation("remove", previousState, newArray, index);
         return;
       }
+      formState.removeArrayItemId(props.name, index);
+      const collapsedItems = collapseState.collapsedItems;
+      const deletedIndexPos = collapsedItems.indexOf(index);
+      if (deletedIndexPos > -1) {
+        collapsedItems.splice(deletedIndexPos, 1);
+      }
+      for (let i = 0; i < collapsedItems.length; i++) {
+        if (collapsedItems[i] > index) {
+          collapsedItems[i] = collapsedItems[i] - 1;
+        }
+      }
       formState.setValue(props.name, newArray);
       formState.validateField(props.name);
       if (props.onRemoveItem) {
@@ -3984,6 +4081,7 @@ function createDaisyUIArrayField() {
       const temp = newArray[indexA];
       newArray[indexA] = newArray[indexB];
       newArray[indexB] = temp;
+      formState.swapArrayItemIds(props.name, indexA, indexB);
       formState.setValue(props.name, newArray);
       formState.validateField(props.name);
       if (props.onSwapItems) {
@@ -4180,11 +4278,14 @@ function createDaisyUIArrayField() {
             `remove-${itemPendingOp.timestamp}`
           );
         }
-        const itemKey = `item-${index}-${JSON.stringify(item).substring(0, 50)}`;
+        const itemId = formState.getArrayItemId(props.name, index);
+        const itemKey = `item-${index}-${itemId}`;
         return /* @__PURE__ */ jsxs(
           "div",
           {
             class: "border border-base-300 rounded-lg bg-base-100 shadow-sm hover:shadow-md transition-shadow",
+            "data-item-key": itemKey,
+            "data-item-index": index,
             children: [
               /* @__PURE__ */ jsxs("div", { class: "border-b border-base-200 bg-base-50 rounded-t-lg", children: [
                 /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between gap-2 p-1 sm:p-3 sm:px-4", children: [
@@ -6192,11 +6293,47 @@ function createDaisyUITextareaField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const textareaRef = ref(null);
+    const autoExpand = props.autoExpand !== false;
+    const defaultMaxRows = 10;
+    const maxRows = props.maxRows ?? (autoExpand ? defaultMaxRows : void 0);
+    const minRows = props.rows ?? 3;
+    const getLineHeight = () => {
+      const textarea = textareaRef.value;
+      if (!textarea) return 24;
+      const style = window.getComputedStyle(textarea);
+      const lineHeight = parseFloat(style.lineHeight);
+      return isNaN(lineHeight) ? 24 : lineHeight;
+    };
+    const autoResize = async () => {
+      const textarea = textareaRef.value;
+      if (!textarea || !autoExpand) return;
+      textarea.style.height = "auto";
+      await nextTick();
+      const scrollHeight = textarea.scrollHeight;
+      const lineHeight = getLineHeight();
+      const minHeight = minRows * lineHeight;
+      const maxHeight = maxRows ? maxRows * lineHeight : void 0;
+      const newHeight = maxHeight ? Math.min(Math.max(scrollHeight, minHeight), maxHeight) : Math.max(scrollHeight, minHeight);
+      textarea.style.height = `${newHeight}px`;
+      textarea.style.overflowY = maxHeight && scrollHeight > maxHeight ? "auto" : "hidden";
+    };
+    const setTextareaRef = (el) => {
+      textareaRef.value = el;
+      if (el && autoExpand && formState.getValue(props.name)) {
+        nextTick(() => {
+          autoResize();
+        });
+      }
+    };
     const textareaProps = {
       value: formState.getValue(props.name),
-      onInput: (event) => {
+      onInput: async (event) => {
         const target = event.target;
         formState.setValue(props.name, target.value);
+        if (autoExpand) {
+          await autoResize();
+        }
       },
       onBlur: () => {
         formState.touchField(props.name);
@@ -6223,6 +6360,7 @@ function createDaisyUITextareaField() {
       /* @__PURE__ */ jsx(
         "textarea",
         {
+          ref: setTextareaRef,
           class: textareaClass,
           placeholder: props.placeholder,
           disabled: props.disabled,
@@ -6248,7 +6386,9 @@ function createDaisyUITextareaField() {
     "required",
     "size",
     "variant",
-    "rows"
+    "rows",
+    "autoExpand",
+    "maxRows"
   ];
   return DaisyUITextareaField;
 }