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

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-B-IQTi47.mjs}

@@ -3,6 +3,7 @@ import * as React from "react";
 import React__default from "react";
 import { Field, Flex, Button, Typography } from "@strapi/design-system";
 import { Play } from "@strapi/icons";
+import { useCMEditViewDataManager } from "@strapi/strapi/admin";
 var __assign = function() {
   __assign = Object.assign || function __assign2(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -427,6 +428,7 @@ const CompositeInput = (props) => {
     label,
     intlLabel
   } = props;
+  const { modifiedData } = useCMEditViewDataManager();
   const { formatMessage } = useIntl();
   const [localValue, setLocalValue] = React__default.useState(value || "");
   React__default.useEffect(() => {
@@ -434,6 +436,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,20 +449,11 @@ const CompositeInput = (props) => {
       onChange({ target: { name, value: newValue, type: "text" } });
     }
   };
-  const handleGenerate = () => {
-    const formData = {};
-    fields.forEach((fieldPath) => {
-      const input = document.querySelector(
-        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"]`
-      );
-      if (input && input.value) {
-        formData[fieldPath] = input.value;
-      }
-    });
+  const handleGenerate = React__default.useCallback(() => {
     const parts = [];
     fields.forEach((fieldPath) => {
-      const fieldValue = formData[fieldPath];
-      if (fieldValue) {
+      const fieldValue = modifiedData?.[fieldPath];
+      if (fieldValue !== null && fieldValue !== void 0 && fieldValue !== "") {
         parts.push(fieldValue);
       }
     });
@@ -468,7 +463,14 @@ const CompositeInput = (props) => {
     if (onChange) {
       onChange({ target: { name, value: result, type: "text" } });
     }
-  };
+  }, [fields, separator, onChange, name, modifiedData]);
+  React__default.useEffect(() => {
+    if (!autoGenerate || fields.length === 0 || !modifiedData) return;
+    const timeoutId = setTimeout(() => {
+      handleGenerate();
+    }, 300);
+    return () => clearTimeout(timeoutId);
+  }, [autoGenerate, fields, modifiedData, handleGenerate]);
   return /* @__PURE__ */ jsx(
     Field.Root,
     {
@@ -486,12 +488,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 +533,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-B2zE74Yh.js}

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
+const admin = require("@strapi/strapi/admin");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -446,6 +447,7 @@ const CompositeInput = (props) => {
     label,
     intlLabel
   } = props;
+  const { modifiedData } = admin.useCMEditViewDataManager();
   const { formatMessage } = useIntl();
   const [localValue, setLocalValue] = React__namespace.default.useState(value || "");
   React__namespace.default.useEffect(() => {
@@ -453,6 +455,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,20 +468,11 @@ const CompositeInput = (props) => {
       onChange({ target: { name, value: newValue, type: "text" } });
     }
   };
-  const handleGenerate = () => {
-    const formData = {};
-    fields.forEach((fieldPath) => {
-      const input = document.querySelector(
-        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"]`
-      );
-      if (input && input.value) {
-        formData[fieldPath] = input.value;
-      }
-    });
+  const handleGenerate = React__namespace.default.useCallback(() => {
     const parts = [];
     fields.forEach((fieldPath) => {
-      const fieldValue = formData[fieldPath];
-      if (fieldValue) {
+      const fieldValue = modifiedData?.[fieldPath];
+      if (fieldValue !== null && fieldValue !== void 0 && fieldValue !== "") {
         parts.push(fieldValue);
       }
     });
@@ -487,7 +482,14 @@ const CompositeInput = (props) => {
     if (onChange) {
       onChange({ target: { name, value: result, type: "text" } });
     }
-  };
+  }, [fields, separator, onChange, name, modifiedData]);
+  React__namespace.default.useEffect(() => {
+    if (!autoGenerate || fields.length === 0 || !modifiedData) return;
+    const timeoutId = setTimeout(() => {
+      handleGenerate();
+    }, 300);
+    return () => clearTimeout(timeoutId);
+  }, [autoGenerate, fields, modifiedData, handleGenerate]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     designSystem.Field.Root,
     {
@@ -505,12 +507,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 +552,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-B2zE74Yh.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-B-IQTi47.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.1",
+  "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",