@tunghtml/strapi-plugin-composite-field 1.0.0 → 1.1.0

package/README.md

@@ -8,8 +8,10 @@ A Strapi v5 plugin that creates composite display fields by combining multiple t
 
 ## Features
 
-- 🔗 **Multiple Fields**: Combine any text/string fields
+- 🔗 **Multiple Fields**: Combine any text/string/enum fields
 - 🔄 **Generate Button**: Click icon to generate composite value
+- ⚡ **Auto-Generate**: Automatically update when source fields change
+- 🔒 **Editable Control**: Make field read-only or editable
 - 📝 **Easy Config**: Textarea input (one field per line)
 - ⚙️ **Custom Separator**: Configure separator (default: " - ")
 - ✨ **Auto Spacing**: Automatically adds spaces around separator
@@ -115,17 +117,51 @@ Result: Tung Le
 
 ## Configuration Options
 
+### Base Settings
+
 | Option      | Type     | Default | Description                           |
 | ----------- | -------- | ------- | ------------------------------------- |
 | `fields`    | textarea | -       | Field names to combine (one per line) |
 | `separator` | text     | `" - "` | Separator between fields              |
 
+### Advanced Settings
+
+| Option         | Type     | Default | Description                                      |
+| -------------- | -------- | ------- | ------------------------------------------------ |
+| `editable`     | checkbox | `true`  | Allow manual editing of the composite field      |
+| `autoGenerate` | checkbox | `false` | Automatically generate when source fields change |
+
+## Advanced Usage
+
+### Auto-Generate Mode
+
+Enable **Auto-generate** in Advanced settings to automatically update the composite field when any source field changes. This is useful for fields that should always reflect the current values.
+
+### Read-Only Mode
+
+Disable **Editable** in Advanced settings to make the composite field read-only. Users can only generate values using the button or auto-generate, but cannot manually edit the field.
+
+### Enum Field Support
+
+The plugin now supports enumeration fields! Simply include the enum field name in your fields list, and the plugin will automatically extract the selected value.
+
+Example:
+
+```
+Fields:
+  meetingType (enum)
+  name
+
+Result: Panel Discussion - John Doe
+```
+
 ## Notes
 
-- Only combines simple text/string fields
+- Supports text, string, and enumeration fields
 - Automatically adds spaces around separator for clean output
 - Empty fields are skipped automatically
 - Relation fields are not supported (use simple fields only)
+- Auto-generate uses a 300ms debounce to avoid excessive updates
 
 ## Requirements
 

package/dist/_chunks/{CompositeInput-DZSaB0Rv.mjs → CompositeInput-Cs0WHHpL.mjs}

@@ -434,6 +434,8 @@ const CompositeInput = (props) => {
   }, [value]);
   const fieldsConfig = attribute?.options?.fields || "";
   const separator = attribute?.options?.separator || " - ";
+  const editable = attribute?.options?.editable !== false;
+  const autoGenerate = attribute?.options?.autoGenerate === true;
   let fields = [];
   if (typeof fieldsConfig === "string") {
     fields = fieldsConfig.split("\n").map((f) => f.trim()).filter(Boolean);
@@ -445,7 +447,7 @@ const CompositeInput = (props) => {
       onChange({ target: { name, value: newValue, type: "text" } });
     }
   };
-  const handleGenerate = () => {
+  const handleGenerate = React__default.useCallback(() => {
     const formData = {};
     fields.forEach((fieldPath) => {
       const input = document.querySelector(
@@ -453,6 +455,22 @@ const CompositeInput = (props) => {
       );
       if (input && input.value) {
         formData[fieldPath] = input.value;
+      } else {
+        const enumSelect = document.querySelector(
+          `[data-strapi-field-name="${fieldPath}"] select`
+        );
+        if (enumSelect && enumSelect.value) {
+          formData[fieldPath] = enumSelect.value;
+        }
+        const enumButton = document.querySelector(
+          `[data-strapi-field-name="${fieldPath}"] button[role="combobox"]`
+        );
+        if (enumButton) {
+          const selectedText = enumButton.textContent?.trim();
+          if (selectedText && selectedText !== "Select...") {
+            formData[fieldPath] = selectedText;
+          }
+        }
       }
     });
     const parts = [];
@@ -468,7 +486,33 @@ const CompositeInput = (props) => {
     if (onChange) {
       onChange({ target: { name, value: result, type: "text" } });
     }
-  };
+  }, [fields, separator, onChange, name]);
+  React__default.useEffect(() => {
+    if (!autoGenerate || fields.length === 0) return;
+    const handleFieldChange = () => {
+      const timeoutId = setTimeout(() => {
+        handleGenerate();
+      }, 300);
+      return () => clearTimeout(timeoutId);
+    };
+    const listeners = [];
+    fields.forEach((fieldPath) => {
+      const elements = document.querySelectorAll(
+        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"], [data-strapi-field-name="${fieldPath}"] select, [data-strapi-field-name="${fieldPath}"] button`
+      );
+      elements.forEach((element) => {
+        element.addEventListener("change", handleFieldChange);
+        element.addEventListener("input", handleFieldChange);
+        listeners.push({ element, handler: handleFieldChange });
+      });
+    });
+    return () => {
+      listeners.forEach(({ element, handler }) => {
+        element.removeEventListener("change", handler);
+        element.removeEventListener("input", handler);
+      });
+    };
+  }, [autoGenerate, fields, handleGenerate]);
   return /* @__PURE__ */ jsx(
     Field.Root,
     {
@@ -486,12 +530,12 @@ const CompositeInput = (props) => {
               type: "text",
               value: localValue,
               onChange: handleChange,
-              disabled,
-              placeholder: "Click button to generate",
+              disabled: disabled || !editable,
+              placeholder: autoGenerate ? "Auto-generated from fields" : "Click button to generate",
               style: { paddingRight: "40px" }
             }
           ),
-          /* @__PURE__ */ jsx(
+          !autoGenerate && /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -531,7 +575,9 @@ const CompositeInput = (props) => {
         ] }),
         fields.length > 0 && /* @__PURE__ */ jsx(Field.Hint, { children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
           "Combines: ",
-          fields.join(", ")
+          fields.join(", "),
+          autoGenerate && " (auto-generated)",
+          !editable && " (read-only)"
         ] }) }),
         /* @__PURE__ */ jsx(Field.Error, {})
       ] })

package/dist/_chunks/{CompositeInput-BsQuuQxB.js → CompositeInput-cwqJYLtS.js}

@@ -453,6 +453,8 @@ const CompositeInput = (props) => {
   }, [value]);
   const fieldsConfig = attribute?.options?.fields || "";
   const separator = attribute?.options?.separator || " - ";
+  const editable = attribute?.options?.editable !== false;
+  const autoGenerate = attribute?.options?.autoGenerate === true;
   let fields = [];
   if (typeof fieldsConfig === "string") {
     fields = fieldsConfig.split("\n").map((f) => f.trim()).filter(Boolean);
@@ -464,7 +466,7 @@ const CompositeInput = (props) => {
       onChange({ target: { name, value: newValue, type: "text" } });
     }
   };
-  const handleGenerate = () => {
+  const handleGenerate = React__namespace.default.useCallback(() => {
     const formData = {};
     fields.forEach((fieldPath) => {
       const input = document.querySelector(
@@ -472,6 +474,22 @@ const CompositeInput = (props) => {
       );
       if (input && input.value) {
         formData[fieldPath] = input.value;
+      } else {
+        const enumSelect = document.querySelector(
+          `[data-strapi-field-name="${fieldPath}"] select`
+        );
+        if (enumSelect && enumSelect.value) {
+          formData[fieldPath] = enumSelect.value;
+        }
+        const enumButton = document.querySelector(
+          `[data-strapi-field-name="${fieldPath}"] button[role="combobox"]`
+        );
+        if (enumButton) {
+          const selectedText = enumButton.textContent?.trim();
+          if (selectedText && selectedText !== "Select...") {
+            formData[fieldPath] = selectedText;
+          }
+        }
       }
     });
     const parts = [];
@@ -487,7 +505,33 @@ const CompositeInput = (props) => {
     if (onChange) {
       onChange({ target: { name, value: result, type: "text" } });
     }
-  };
+  }, [fields, separator, onChange, name]);
+  React__namespace.default.useEffect(() => {
+    if (!autoGenerate || fields.length === 0) return;
+    const handleFieldChange = () => {
+      const timeoutId = setTimeout(() => {
+        handleGenerate();
+      }, 300);
+      return () => clearTimeout(timeoutId);
+    };
+    const listeners = [];
+    fields.forEach((fieldPath) => {
+      const elements = document.querySelectorAll(
+        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"], [data-strapi-field-name="${fieldPath}"] select, [data-strapi-field-name="${fieldPath}"] button`
+      );
+      elements.forEach((element) => {
+        element.addEventListener("change", handleFieldChange);
+        element.addEventListener("input", handleFieldChange);
+        listeners.push({ element, handler: handleFieldChange });
+      });
+    });
+    return () => {
+      listeners.forEach(({ element, handler }) => {
+        element.removeEventListener("change", handler);
+        element.removeEventListener("input", handler);
+      });
+    };
+  }, [autoGenerate, fields, handleGenerate]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     designSystem.Field.Root,
     {
@@ -505,12 +549,12 @@ const CompositeInput = (props) => {
               type: "text",
               value: localValue,
               onChange: handleChange,
-              disabled,
-              placeholder: "Click button to generate",
+              disabled: disabled || !editable,
+              placeholder: autoGenerate ? "Auto-generated from fields" : "Click button to generate",
               style: { paddingRight: "40px" }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          !autoGenerate && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               style: {
@@ -550,7 +594,9 @@ const CompositeInput = (props) => {
         ] }),
         fields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
           "Combines: ",
-          fields.join(", ")
+          fields.join(", "),
+          autoGenerate && " (auto-generated)",
+          !editable && " (read-only)"
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
       ] })

package/dist/admin/index.js

@@ -37,7 +37,7 @@ const index = {
         defaultMessage: "Combine multiple fields into one display value"
       },
       components: {
-        Input: async () => Promise.resolve().then(() => require("../_chunks/CompositeInput-BsQuuQxB.js"))
+        Input: async () => Promise.resolve().then(() => require("../_chunks/CompositeInput-cwqJYLtS.js"))
       },
       options: {
         base: [
@@ -82,7 +82,40 @@ const index = {
             ]
           }
         ],
-        advanced: []
+        advanced: [
+          {
+            sectionTitle: {
+              id: "composite-field.advanced.title",
+              defaultMessage: "Settings"
+            },
+            items: [
+              {
+                name: "options.editable",
+                type: "checkbox",
+                intlLabel: {
+                  id: "composite-field.editable.label",
+                  defaultMessage: "Editable"
+                },
+                description: {
+                  id: "composite-field.editable.description",
+                  defaultMessage: "Allow manual editing of the composite field value"
+                }
+              },
+              {
+                name: "options.autoGenerate",
+                type: "checkbox",
+                intlLabel: {
+                  id: "composite-field.autoGenerate.label",
+                  defaultMessage: "Auto-generate"
+                },
+                description: {
+                  id: "composite-field.autoGenerate.description",
+                  defaultMessage: "Automatically generate value when source fields change"
+                }
+              }
+            ]
+          }
+        ]
       }
     });
   },

package/dist/admin/index.mjs

@@ -34,7 +34,7 @@ const index = {
         defaultMessage: "Combine multiple fields into one display value"
       },
       components: {
-        Input: async () => import("../_chunks/CompositeInput-DZSaB0Rv.mjs")
+        Input: async () => import("../_chunks/CompositeInput-Cs0WHHpL.mjs")
       },
       options: {
         base: [
@@ -79,7 +79,40 @@ const index = {
             ]
           }
         ],
-        advanced: []
+        advanced: [
+          {
+            sectionTitle: {
+              id: "composite-field.advanced.title",
+              defaultMessage: "Settings"
+            },
+            items: [
+              {
+                name: "options.editable",
+                type: "checkbox",
+                intlLabel: {
+                  id: "composite-field.editable.label",
+                  defaultMessage: "Editable"
+                },
+                description: {
+                  id: "composite-field.editable.description",
+                  defaultMessage: "Allow manual editing of the composite field value"
+                }
+              },
+              {
+                name: "options.autoGenerate",
+                type: "checkbox",
+                intlLabel: {
+                  id: "composite-field.autoGenerate.label",
+                  defaultMessage: "Auto-generate"
+                },
+                description: {
+                  id: "composite-field.autoGenerate.description",
+                  defaultMessage: "Automatically generate value when source fields change"
+                }
+              }
+            ]
+          }
+        ]
       }
     });
   },

package/dist/server/index.js

@@ -3,15 +3,11 @@ function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
 var register$1 = ({ strapi }) => {
-  console.log("🔌 Composite Field Plugin: Registering custom field...");
   strapi.customFields.register({
     name: "composite",
     plugin: "composite-field",
     type: "string"
   });
-  console.log(
-    "✅ Composite Field Plugin: Custom field registered successfully"
-  );
 };
 const register = register$1;
 var src = {

package/dist/server/index.mjs

@@ -2,15 +2,11 @@ function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
 var register$1 = ({ strapi }) => {
-  console.log("🔌 Composite Field Plugin: Registering custom field...");
   strapi.customFields.register({
     name: "composite",
     plugin: "composite-field",
     type: "string"
   });
-  console.log(
-    "✅ Composite Field Plugin: Custom field registered successfully"
-  );
 };
 const register = register$1;
 var src = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tunghtml/strapi-plugin-composite-field",
-  "version": "1.0.0",
-  "description": "A Strapi v5 plugin to create composite display fields by combining multiple text fields",
+  "version": "1.1.0",
+  "description": "A Strapi v5 plugin to create composite display fields by combining multiple text, string, and enum fields with auto-generate support",
   "keywords": [
     "strapi",
     "strapi-plugin",