@tunghtml/strapi-plugin-multiselect-checkbox 1.0.0

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2025 Felix Mau <me@felix.hamburg>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,165 @@
+# @tunghtml/strapi-plugin-multiselect-checkbox
+
+A Strapi v5 custom field plugin with checkbox UI that stores selected values as an **array of strings** (JSON type) instead of comma-separated strings.
+
+![Strapi Version](https://img.shields.io/badge/strapi-v5-blue)
+![npm version](https://img.shields.io/npm/v/@tunghtml/strapi-plugin-multiselect-checkbox)
+![License](https://img.shields.io/npm/l/@tunghtml/strapi-plugin-multiselect-checkbox)
+
+## ✨ Features
+
+- ✅ **Checkbox UI** for intuitive multi-selection
+- ✅ **Array Storage** - Stores data as `["Option 1", "Option 2"]` instead of `"Option 1,Option 2"`
+- ✅ **JSON Type** - Uses Strapi's JSON field type for proper array handling
+- ✅ **Strapi v5** compatible
+- ✅ **TypeScript** support
+- ✅ **Easy Configuration** - Define options directly in Content-Type Builder
+
+## 📦 Installation
+
+```bash
+npm install @tunghtml/strapi-plugin-multiselect-checkbox
+```
+
+or with yarn:
+
+```bash
+yarn add @tunghtml/strapi-plugin-multiselect-checkbox
+```
+
+## 🔧 Configuration
+
+Add the plugin to your `config/plugins.js` (or `config/plugins.ts`):
+
+```javascript
+module.exports = {
+  // ...
+  'multiselect-checkbox': {
+    enabled: true,
+  },
+};
+```
+
+Then restart your Strapi application.
+
+## 🎯 Usage
+
+### 1. Add Field in Content-Type Builder
+
+1. Go to **Content-Type Builder**
+2. Select a content type or create a new one
+3. Click **Add another field**
+4. Choose **Custom** tab
+5. Select **Multiselect Checkbox**
+6. Configure your field:
+   - **Name**: Field name
+   - **Available Options**: Enter options (one per line)
+7. Click **Finish** and **Save**
+
+### 2. Use in Content Manager
+
+The field will appear as a list of checkboxes in the Content Manager. Select multiple options and save.
+
+### 3. API Response
+
+The API will return selected values as an array:
+
+```json
+{
+  "id": 1,
+  "myField": ["Option 1", "Option 3", "Option 5"]
+}
+```
+
+## 📊 Data Format Comparison
+
+### This Plugin (Array)
+
+```json
+{
+  "field": ["Option 1", "Option 2", "Option 3"]
+}
+```
+
+### Other Plugins (String)
+
+```json
+{
+  "field": "Option 1,Option 2,Option 3"
+}
+```
+
+## 🎨 Example Schema
+
+```json
+{
+  "kind": "collectionType",
+  "collectionName": "products",
+  "info": {
+    "singularName": "product",
+    "pluralName": "products",
+    "displayName": "Product"
+  },
+  "attributes": {
+    "sizes": {
+      "type": "customField",
+      "customField": "plugin::multiselect-checkbox.multiselect-checkbox",
+      "options": {
+        "availableOptions": ["Small", "Medium", "Large", "XL"]
+      }
+    }
+  }
+}
+```
+
+## 🔍 Querying Data
+
+Since data is stored as JSON array, you can query it using Strapi's filters:
+
+```javascript
+// Find entries where field contains "Option 1"
+const entries = await strapi.entityService.findMany('api::product.product', {
+  filters: {
+    sizes: {
+      $contains: 'Small',
+    },
+  },
+});
+```
+
+## 🛠️ Development
+
+### Build the Plugin
+
+```bash
+npm run build
+```
+
+### Watch Mode
+
+```bash
+npm run watch
+```
+
+## 🙏 Credits
+
+This plugin is based on [strapi-plugin-multiselect-field](https://github.com/fxm90/strapi-plugin-multiselect-field) by Felix M., modified to store data as arrays instead of comma-separated strings.
+
+## 📝 License
+
+MIT
+
+## 🐛 Issues
+
+Found a bug? Please report it on [GitHub Issues](https://github.com/finnwasabi/strapi-plugin-multiselect-checkbox/issues).
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📧 Author
+
+**Tung Le**
+
+- GitHub: [@finnwasabi](https://github.com/finnwasabi)
+- Email: tunghtml@gmail.com

package/dist/_chunks/en-pkXKBXLR.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const en = {
+  "multiselect-field.label": "Multiselect",
+  "multiselect-field.description": "A custom field for Strapi that allows users to select multiple options from a predefined list.",
+  "multiselect-field.options.available-options.label": "Available Options",
+  "multiselect-field.options.available-options.description": "One option per line.",
+  "multiselect-field.options.available-options.placeholder": "Option 1\nOption 2\nOption 3",
+  "multiselect-field.options.delimiter.label": "Delimiter",
+  "multiselect-field.options.delimiter.description": "The delimiter to use when storing the selected options.",
+  "multiselect-field.options.delimiter.placeholder": ",",
+  "multiselect-field.empty-state.text": "⚠️ Please provide the available options in the content builder."
+};
+exports.default = en;

package/dist/_chunks/en-tWwdhLO5.mjs

@@ -0,0 +1,14 @@
+const en = {
+  "multiselect-field.label": "Multiselect",
+  "multiselect-field.description": "A custom field for Strapi that allows users to select multiple options from a predefined list.",
+  "multiselect-field.options.available-options.label": "Available Options",
+  "multiselect-field.options.available-options.description": "One option per line.",
+  "multiselect-field.options.available-options.placeholder": "Option 1\nOption 2\nOption 3",
+  "multiselect-field.options.delimiter.label": "Delimiter",
+  "multiselect-field.options.delimiter.description": "The delimiter to use when storing the selected options.",
+  "multiselect-field.options.delimiter.placeholder": ",",
+  "multiselect-field.empty-state.text": "⚠️ Please provide the available options in the content builder."
+};
+export {
+  en as default
+};

package/dist/_chunks/index-8Txh7SeC.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const reactIntl = require("react-intl");
+const styled = require("styled-components");
+const index = require("./index-DTMA037h.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const config = {
+  /**
+   * The default options used as fallbacks in case the user-defined values are missing.
+   */
+  defaultOptions: {
+    availableOptions: []
+  }
+};
+const CapitalizedText = styled__default.default.p`
+  &::first-letter {
+    text-transform: uppercase;
+  }
+`;
+const EmptyState = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral400", children: /* @__PURE__ */ jsxRuntime.jsx(reactIntl.FormattedMessage, { id: index.prefixKey("empty-state.text") }) });
+};
+const Multiselect = (props) => {
+  const { attribute, disabled, hint, label, name, onChange, required, type, value } = props;
+  const { availableOptions = config.defaultOptions.availableOptions } = attribute.options;
+  const selectedOptions = Array.isArray(value) ? value : [];
+  const updateValue = (value2) => onChange({ target: { name, value: value2, type } });
+  const updateSelectedOptions = (option, isSelected) => {
+    const nextSelectedOptions = isSelected ? selectedOptions.concat(option) : selectedOptions.filter((selectedOption) => selectedOption !== option);
+    const sortedNextSelectedOptions = nextSelectedOptions.sort(
+      (lhs, rhs) => availableOptions.indexOf(lhs) - availableOptions.indexOf(rhs)
+    );
+    updateValue(sortedNextSelectedOptions);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { hint, name, required, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    availableOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, direction: "column", alignItems: "leading", children: availableOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Checkbox,
+      {
+        option,
+        checked: selectedOptions.includes(option),
+        disabled: disabled ?? false,
+        onCheckedChange: (isSelected) => updateSelectedOptions(option, isSelected),
+        children: /* @__PURE__ */ jsxRuntime.jsx(CapitalizedText, { children: option })
+      },
+      option
+    )) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+  ] });
+};
+exports.default = Multiselect;

package/dist/_chunks/index-CTLgAy6y.mjs

@@ -0,0 +1,136 @@
+import { useRef, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const PLUGIN_ID = "multiselect-checkbox";
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef(setPlugin);
+  useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+  return null;
+};
+const checkmarkNotepad = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='800px'%20width='800px'%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%23E1C3A0;'%20d='M406.069,512H105.931c-19.501,0-35.31-15.809-35.31-35.31V70.621c0-19.501,15.809-35.31,35.31-35.31%20h300.138c19.501,0,35.31,15.809,35.31,35.31V476.69C441.379,496.191,425.57,512,406.069,512z'/%3e%3cpath%20style='fill:%23EFF2FA;'%20d='M406.069,485.517H105.931c-4.875,0-8.828-3.953-8.828-8.828V70.621c0-4.875,3.953-8.828,8.828-8.828%20h300.138c4.875,0,8.828,3.953,8.828,8.828V476.69C414.897,481.565,410.944,485.517,406.069,485.517z'/%3e%3cpath%20style='fill:%23C7CFE2;'%20d='M308.966,35.31h-26.483v-8.828C282.483,11.857,270.626,0,256,0s-26.483,11.857-26.483,26.483v8.828%20h-26.483c-9.75,0-17.655,7.904-17.655,17.655v17.655h141.241V52.966C326.621,43.214,318.716,35.31,308.966,35.31z%20M256,35.31%20c-4.875,0-8.828-3.953-8.828-8.828s3.953-8.828,8.828-8.828s8.828,3.953,8.828,8.828S260.875,35.31,256,35.31z'/%3e%3cpath%20style='fill:%23AFB9D2;'%20d='M326.621,79.448H185.379c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h141.241c4.875,0,8.828,3.953,8.828,8.828l0,0C335.448,75.496,331.496,79.448,326.621,79.448z'/%3e%3cpath%20style='fill:%2382889D;'%20d='M167.724,203.034c-2.259,0-4.518-0.862-6.241-2.586L135,173.965c-3.448-3.448-3.448-9.035,0-12.483%20c3.448-3.448,9.035-3.448,12.483,0l20.241,20.242l37.897-37.897c3.448-3.448,9.035-3.448,12.483,0c3.448,3.448,3.448,9.035,0,12.483%20l-44.138,44.138C172.242,202.173,169.983,203.034,167.724,203.034z'/%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23AFB9D2;'%20d='M317.793,167.724h-70.621c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h70.621c4.875,0,8.828,3.953,8.828,8.828l0,0C326.621,163.772,322.668,167.724,317.793,167.724z'/%3e%3c/g%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23C7CFE2;'%20d='M361.931,203.034H247.172c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h114.759c4.875,0,8.828,3.953,8.828,8.828l0,0C370.759,199.082,366.806,203.034,361.931,203.034z'/%3e%3c/g%3e%3cpath%20style='fill:%2382889D;'%20d='M167.724,414.897c-2.259,0-4.518-0.862-6.241-2.586L135,385.827c-3.448-3.448-3.448-9.035,0-12.483%20c3.448-3.448,9.035-3.448,12.483,0l20.241,20.242l37.897-37.897c3.448-3.448,9.035-3.448,12.483,0c3.448,3.448,3.448,9.035,0,12.483%20l-44.138,44.138C172.242,414.035,169.983,414.897,167.724,414.897z'/%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23AFB9D2;'%20d='M317.793,379.586h-70.621c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h70.621c4.875,0,8.828,3.953,8.828,8.828l0,0C326.621,375.634,322.668,379.586,317.793,379.586z'/%3e%3c/g%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23C7CFE2;'%20d='M361.931,414.897H247.172c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h114.759c4.875,0,8.828,3.953,8.828,8.828l0,0C370.759,410.944,366.806,414.897,361.931,414.897z'/%3e%3c/g%3e%3cpath%20style='fill:%2382889D;'%20d='M167.724,308.966c-2.259,0-4.518-0.862-6.241-2.586L135,279.896c-3.448-3.448-3.448-9.035,0-12.483%20c3.448-3.448,9.035-3.448,12.483,0l20.241,20.242l37.897-37.897c3.448-3.448,9.035-3.448,12.483,0c3.448,3.448,3.448,9.035,0,12.483%20l-44.138,44.138C172.242,308.104,169.983,308.966,167.724,308.966z'/%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23AFB9D2;'%20d='M317.793,273.655h-70.621c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h70.621c4.875,0,8.828,3.953,8.828,8.828l0,0C326.621,269.703,322.668,273.655,317.793,273.655z'/%3e%3c/g%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23C7CFE2;'%20d='M361.931,308.966H247.172c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h114.759c4.875,0,8.828,3.953,8.828,8.828l0,0C370.759,305.013,366.806,308.966,361.931,308.966z'/%3e%3c/g%3e%3c/svg%3e";
+const PluginIcon = () => /* @__PURE__ */ jsx("img", { src: checkmarkNotepad });
+const prefixKey = (key) => `${PLUGIN_ID}.${key}`;
+const index = {
+  register(app) {
+    app.customFields.register({
+      name: "multiselect-checkbox",
+      pluginId: `${PLUGIN_ID}`,
+      type: "json",
+      intlLabel: {
+        id: `${PLUGIN_ID}.label`,
+        defaultMessage: "Multiselect"
+      },
+      intlDescription: {
+        id: `${PLUGIN_ID}.description`,
+        defaultMessage: "A custom field for Strapi that allows users to select multiple options from a predefined list."
+      },
+      icon: PluginIcon,
+      components: {
+        Input: async () => import("./index-tpMZnVWK.mjs")
+      },
+      options: {
+        base: [
+          {
+            sectionTitle: null,
+            items: [
+              {
+                name: "options.availableOptions",
+                type: "textarea-enum",
+                intlLabel: {
+                  id: prefixKey("options.available-options.label"),
+                  defaultMessage: "Available Options"
+                },
+                description: {
+                  id: prefixKey("options.available-options.description"),
+                  defaultMessage: "One option per line."
+                },
+                placeholder: {
+                  id: prefixKey("options.available-options.placeholder"),
+                  defaultMessage: "Option 1\nOption 2\nOption 3"
+                }
+              }
+            ]
+          }
+        ],
+        //
+        // Strapi default advanced options.
+        //
+        // - See also: https://github.com/strapi/strapi/blob/develop/packages/core/content-type-builder/admin/src/components/FormModal/attributes/attributeOptions.ts
+        //
+        advanced: [
+          {
+            sectionTitle: {
+              id: "global.settings",
+              defaultMessage: "Settings"
+            },
+            items: [
+              {
+                name: "required",
+                type: "checkbox",
+                intlLabel: {
+                  id: "content-type-builder.form.attribute.item.requiredField",
+                  defaultMessage: "Required field"
+                },
+                description: {
+                  id: "content-type-builder.form.attribute.item.requiredField.description",
+                  defaultMessage: "You won't be able to create an entry if this field is empty"
+                }
+              },
+              {
+                name: "private",
+                type: "checkbox",
+                intlLabel: {
+                  id: "content-type-builder.form.attribute.item.privateField",
+                  defaultMessage: "Private field"
+                },
+                description: {
+                  id: "content-type-builder.form.attribute.item.privateField.description",
+                  defaultMessage: "This field will not show up in the API response"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    });
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID
+    });
+  },
+  async registerTrads({ locales }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("./en-tWwdhLO5.mjs") }), `./translations/${locale}.json`, 3);
+          return { data, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  }
+};
+export {
+  index as i,
+  prefixKey as p
+};

package/dist/_chunks/index-DTMA037h.js

@@ -0,0 +1,135 @@
+"use strict";
+const react = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const PLUGIN_ID = "multiselect-checkbox";
+const Initializer = ({ setPlugin }) => {
+  const ref = react.useRef(setPlugin);
+  react.useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+  return null;
+};
+const checkmarkNotepad = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='800px'%20width='800px'%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%23E1C3A0;'%20d='M406.069,512H105.931c-19.501,0-35.31-15.809-35.31-35.31V70.621c0-19.501,15.809-35.31,35.31-35.31%20h300.138c19.501,0,35.31,15.809,35.31,35.31V476.69C441.379,496.191,425.57,512,406.069,512z'/%3e%3cpath%20style='fill:%23EFF2FA;'%20d='M406.069,485.517H105.931c-4.875,0-8.828-3.953-8.828-8.828V70.621c0-4.875,3.953-8.828,8.828-8.828%20h300.138c4.875,0,8.828,3.953,8.828,8.828V476.69C414.897,481.565,410.944,485.517,406.069,485.517z'/%3e%3cpath%20style='fill:%23C7CFE2;'%20d='M308.966,35.31h-26.483v-8.828C282.483,11.857,270.626,0,256,0s-26.483,11.857-26.483,26.483v8.828%20h-26.483c-9.75,0-17.655,7.904-17.655,17.655v17.655h141.241V52.966C326.621,43.214,318.716,35.31,308.966,35.31z%20M256,35.31%20c-4.875,0-8.828-3.953-8.828-8.828s3.953-8.828,8.828-8.828s8.828,3.953,8.828,8.828S260.875,35.31,256,35.31z'/%3e%3cpath%20style='fill:%23AFB9D2;'%20d='M326.621,79.448H185.379c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h141.241c4.875,0,8.828,3.953,8.828,8.828l0,0C335.448,75.496,331.496,79.448,326.621,79.448z'/%3e%3cpath%20style='fill:%2382889D;'%20d='M167.724,203.034c-2.259,0-4.518-0.862-6.241-2.586L135,173.965c-3.448-3.448-3.448-9.035,0-12.483%20c3.448-3.448,9.035-3.448,12.483,0l20.241,20.242l37.897-37.897c3.448-3.448,9.035-3.448,12.483,0c3.448,3.448,3.448,9.035,0,12.483%20l-44.138,44.138C172.242,202.173,169.983,203.034,167.724,203.034z'/%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23AFB9D2;'%20d='M317.793,167.724h-70.621c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h70.621c4.875,0,8.828,3.953,8.828,8.828l0,0C326.621,163.772,322.668,167.724,317.793,167.724z'/%3e%3c/g%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23C7CFE2;'%20d='M361.931,203.034H247.172c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h114.759c4.875,0,8.828,3.953,8.828,8.828l0,0C370.759,199.082,366.806,203.034,361.931,203.034z'/%3e%3c/g%3e%3cpath%20style='fill:%2382889D;'%20d='M167.724,414.897c-2.259,0-4.518-0.862-6.241-2.586L135,385.827c-3.448-3.448-3.448-9.035,0-12.483%20c3.448-3.448,9.035-3.448,12.483,0l20.241,20.242l37.897-37.897c3.448-3.448,9.035-3.448,12.483,0c3.448,3.448,3.448,9.035,0,12.483%20l-44.138,44.138C172.242,414.035,169.983,414.897,167.724,414.897z'/%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23AFB9D2;'%20d='M317.793,379.586h-70.621c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h70.621c4.875,0,8.828,3.953,8.828,8.828l0,0C326.621,375.634,322.668,379.586,317.793,379.586z'/%3e%3c/g%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23C7CFE2;'%20d='M361.931,414.897H247.172c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h114.759c4.875,0,8.828,3.953,8.828,8.828l0,0C370.759,410.944,366.806,414.897,361.931,414.897z'/%3e%3c/g%3e%3cpath%20style='fill:%2382889D;'%20d='M167.724,308.966c-2.259,0-4.518-0.862-6.241-2.586L135,279.896c-3.448-3.448-3.448-9.035,0-12.483%20c3.448-3.448,9.035-3.448,12.483,0l20.241,20.242l37.897-37.897c3.448-3.448,9.035-3.448,12.483,0c3.448,3.448,3.448,9.035,0,12.483%20l-44.138,44.138C172.242,308.104,169.983,308.966,167.724,308.966z'/%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23AFB9D2;'%20d='M317.793,273.655h-70.621c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h70.621c4.875,0,8.828,3.953,8.828,8.828l0,0C326.621,269.703,322.668,273.655,317.793,273.655z'/%3e%3c/g%3e%3cg%20style='opacity:0.97;'%3e%3cpath%20style='fill:%23C7CFE2;'%20d='M361.931,308.966H247.172c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828%20h114.759c4.875,0,8.828,3.953,8.828,8.828l0,0C370.759,305.013,366.806,308.966,361.931,308.966z'/%3e%3c/g%3e%3c/svg%3e";
+const PluginIcon = () => /* @__PURE__ */ jsxRuntime.jsx("img", { src: checkmarkNotepad });
+const prefixKey = (key) => `${PLUGIN_ID}.${key}`;
+const index = {
+  register(app) {
+    app.customFields.register({
+      name: "multiselect-checkbox",
+      pluginId: `${PLUGIN_ID}`,
+      type: "json",
+      intlLabel: {
+        id: `${PLUGIN_ID}.label`,
+        defaultMessage: "Multiselect"
+      },
+      intlDescription: {
+        id: `${PLUGIN_ID}.description`,
+        defaultMessage: "A custom field for Strapi that allows users to select multiple options from a predefined list."
+      },
+      icon: PluginIcon,
+      components: {
+        Input: async () => Promise.resolve().then(() => require("./index-8Txh7SeC.js"))
+      },
+      options: {
+        base: [
+          {
+            sectionTitle: null,
+            items: [
+              {
+                name: "options.availableOptions",
+                type: "textarea-enum",
+                intlLabel: {
+                  id: prefixKey("options.available-options.label"),
+                  defaultMessage: "Available Options"
+                },
+                description: {
+                  id: prefixKey("options.available-options.description"),
+                  defaultMessage: "One option per line."
+                },
+                placeholder: {
+                  id: prefixKey("options.available-options.placeholder"),
+                  defaultMessage: "Option 1\nOption 2\nOption 3"
+                }
+              }
+            ]
+          }
+        ],
+        //
+        // Strapi default advanced options.
+        //
+        // - See also: https://github.com/strapi/strapi/blob/develop/packages/core/content-type-builder/admin/src/components/FormModal/attributes/attributeOptions.ts
+        //
+        advanced: [
+          {
+            sectionTitle: {
+              id: "global.settings",
+              defaultMessage: "Settings"
+            },
+            items: [
+              {
+                name: "required",
+                type: "checkbox",
+                intlLabel: {
+                  id: "content-type-builder.form.attribute.item.requiredField",
+                  defaultMessage: "Required field"
+                },
+                description: {
+                  id: "content-type-builder.form.attribute.item.requiredField.description",
+                  defaultMessage: "You won't be able to create an entry if this field is empty"
+                }
+              },
+              {
+                name: "private",
+                type: "checkbox",
+                intlLabel: {
+                  id: "content-type-builder.form.attribute.item.privateField",
+                  defaultMessage: "Private field"
+                },
+                description: {
+                  id: "content-type-builder.form.attribute.item.privateField.description",
+                  defaultMessage: "This field will not show up in the API response"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    });
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID
+    });
+  },
+  async registerTrads({ locales }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("./en-pkXKBXLR.js")) }), `./translations/${locale}.json`, 3);
+          return { data, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  }
+};
+exports.index = index;
+exports.prefixKey = prefixKey;

package/dist/_chunks/index-tpMZnVWK.mjs

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Field, Box, Flex, Checkbox, Typography } from "@strapi/design-system";
+import { FormattedMessage } from "react-intl";
+import styled from "styled-components";
+import { p as prefixKey } from "./index-CTLgAy6y.mjs";
+const config = {
+  /**
+   * The default options used as fallbacks in case the user-defined values are missing.
+   */
+  defaultOptions: {
+    availableOptions: []
+  }
+};
+const CapitalizedText = styled.p`
+  &::first-letter {
+    text-transform: uppercase;
+  }
+`;
+const EmptyState = () => {
+  return /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral400", children: /* @__PURE__ */ jsx(FormattedMessage, { id: prefixKey("empty-state.text") }) });
+};
+const Multiselect = (props) => {
+  const { attribute, disabled, hint, label, name, onChange, required, type, value } = props;
+  const { availableOptions = config.defaultOptions.availableOptions } = attribute.options;
+  const selectedOptions = Array.isArray(value) ? value : [];
+  const updateValue = (value2) => onChange({ target: { name, value: value2, type } });
+  const updateSelectedOptions = (option, isSelected) => {
+    const nextSelectedOptions = isSelected ? selectedOptions.concat(option) : selectedOptions.filter((selectedOption) => selectedOption !== option);
+    const sortedNextSelectedOptions = nextSelectedOptions.sort(
+      (lhs, rhs) => availableOptions.indexOf(lhs) - availableOptions.indexOf(rhs)
+    );
+    updateValue(sortedNextSelectedOptions);
+  };
+  return /* @__PURE__ */ jsxs(Field.Root, { hint, name, required, children: [
+    /* @__PURE__ */ jsx(Field.Label, { children: label }),
+    availableOptions.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {}) : /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Flex, { gap: 2, direction: "column", alignItems: "leading", children: availableOptions.map((option) => /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        option,
+        checked: selectedOptions.includes(option),
+        disabled: disabled ?? false,
+        onCheckedChange: (isSelected) => updateSelectedOptions(option, isSelected),
+        children: /* @__PURE__ */ jsx(CapitalizedText, { children: option })
+      },
+      option
+    )) }) }),
+    /* @__PURE__ */ jsx(Field.Hint, {})
+  ] });
+};
+export {
+  Multiselect as default
+};

package/dist/admin/index.js

@@ -0,0 +1,3 @@
+"use strict";
+const index = require("../_chunks/index-DTMA037h.js");
+module.exports = index.index;

package/dist/admin/index.mjs

@@ -0,0 +1,4 @@
+import { i } from "../_chunks/index-CTLgAy6y.mjs";
+export {
+  i as default
+};

package/dist/admin/src/components/Initializer/index.d.ts

@@ -0,0 +1,5 @@
+type InitializerProps = {
+    setPlugin: (id: string) => void;
+};
+declare const Initializer: ({ setPlugin }: InitializerProps) => null;
+export { Initializer };

package/dist/admin/src/components/Multiselect/index.d.ts

@@ -0,0 +1,25 @@
+import type { FieldValue, InputProps } from '@strapi/strapi/admin';
+/** The properties for our `Multiselect` component below. */
+type Props = InputProps & FieldValue & {
+    attribute: {
+        options: {
+            availableOptions: string[] | undefined;
+        };
+    };
+};
+/**
+ * `Multiselect` is a custom form component that allows users to select multiple options
+ * via checkboxes. The selected values are stored as an array of strings.
+ *
+ * ### Props:
+ * - `attribute`: An object containing the list of selectable `options: string[]`.
+ * - `disabled`: (Optional) Disables all checkboxes when `true`.
+ * - `hint`: (Optional) A string providing contextual help, shown below the field.
+ * - `name`: The name of the form field (used in the synthetic `onChange` event).
+ * - `label`: A label for the field, displayed above the checkboxes.
+ * - `onChange`: A handler that receives the updated selection as an array of strings.
+ * - `required`: (Optional) Indicates if the field is required.
+ * - `value`: The current value as an array of selected options.
+ */
+declare const Multiselect: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Multiselect;

package/dist/admin/src/components/PluginIcon/index.d.ts

@@ -0,0 +1,2 @@
+declare const PluginIcon: () => import("react/jsx-runtime").JSX.Element;
+export { PluginIcon };

package/dist/admin/src/index.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    register(app: any): void;
+    registerTrads({ locales }: {
+        locales: string[];
+    }): Promise<{
+        data: any;
+        locale: string;
+    }[]>;
+};
+export default _default;

package/dist/admin/src/pluginId.d.ts

@@ -0,0 +1 @@
+export declare const PLUGIN_ID = "multiselect-checkbox";

package/dist/admin/src/utils/prefixKey.d.ts

@@ -0,0 +1,2 @@
+declare const prefixKey: (key: string) => string;
+export { prefixKey };

package/dist/server/index.js

@@ -0,0 +1,49 @@
+"use strict";
+const bootstrap = ({ strapi }) => {
+};
+const config = {
+  default: {},
+  validator() {
+  }
+};
+const contentTypes = {};
+const controller = ({ strapi }) => ({});
+const controllers = {
+  controller
+};
+const destroy = ({ strapi }) => {
+};
+const middlewares = {};
+const policies = {};
+const register = ({ strapi }) => {
+  strapi.customFields.register({
+    name: "multiselect-checkbox",
+    plugin: "multiselect-checkbox",
+    // The data type stored in the database - using json to store array of strings.
+    type: "json"
+  });
+};
+const contentAPIRoutes = [];
+const routes = {
+  "content-api": {
+    type: "content-api",
+    routes: contentAPIRoutes
+  }
+};
+const service = ({ strapi }) => ({});
+const services = {
+  service
+};
+const index = {
+  register,
+  bootstrap,
+  destroy,
+  config,
+  controllers,
+  routes,
+  services,
+  contentTypes,
+  policies,
+  middlewares
+};
+module.exports = index;

package/dist/server/index.mjs

@@ -0,0 +1,50 @@
+const bootstrap = ({ strapi }) => {
+};
+const config = {
+  default: {},
+  validator() {
+  }
+};
+const contentTypes = {};
+const controller = ({ strapi }) => ({});
+const controllers = {
+  controller
+};
+const destroy = ({ strapi }) => {
+};
+const middlewares = {};
+const policies = {};
+const register = ({ strapi }) => {
+  strapi.customFields.register({
+    name: "multiselect-checkbox",
+    plugin: "multiselect-checkbox",
+    // The data type stored in the database - using json to store array of strings.
+    type: "json"
+  });
+};
+const contentAPIRoutes = [];
+const routes = {
+  "content-api": {
+    type: "content-api",
+    routes: contentAPIRoutes
+  }
+};
+const service = ({ strapi }) => ({});
+const services = {
+  service
+};
+const index = {
+  register,
+  bootstrap,
+  destroy,
+  config,
+  controllers,
+  routes,
+  services,
+  contentTypes,
+  policies,
+  middlewares
+};
+export {
+  index as default
+};

package/dist/server/src/bootstrap.d.ts

@@ -0,0 +1,5 @@
+import type { Core } from '@strapi/strapi';
+declare const bootstrap: ({ strapi }: {
+    strapi: Core.Strapi;
+}) => void;
+export default bootstrap;

package/dist/server/src/config/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    default: {};
+    validator(): void;
+};
+export default _default;

package/dist/server/src/content-types/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/server/src/controllers/controller.d.ts

@@ -0,0 +1,5 @@
+import type { Core } from '@strapi/strapi';
+declare const controller: ({ strapi }: {
+    strapi: Core.Strapi;
+}) => {};
+export default controller;

package/dist/server/src/controllers/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    controller: ({ strapi }: {
+        strapi: import("@strapi/types/dist/core").Strapi;
+    }) => {};
+};
+export default _default;

package/dist/server/src/destroy.d.ts

@@ -0,0 +1,5 @@
+import type { Core } from '@strapi/strapi';
+declare const destroy: ({ strapi }: {
+    strapi: Core.Strapi;
+}) => void;
+export default destroy;

package/dist/server/src/index.d.ts

@@ -0,0 +1,35 @@
+declare const _default: {
+    register: ({ strapi }: {
+        strapi: import("@strapi/types/dist/core").Strapi;
+    }) => void;
+    bootstrap: ({ strapi }: {
+        strapi: import("@strapi/types/dist/core").Strapi;
+    }) => void;
+    destroy: ({ strapi }: {
+        strapi: import("@strapi/types/dist/core").Strapi;
+    }) => void;
+    config: {
+        default: {};
+        validator(): void;
+    };
+    controllers: {
+        controller: ({ strapi }: {
+            strapi: import("@strapi/types/dist/core").Strapi;
+        }) => {};
+    };
+    routes: {
+        'content-api': {
+            type: string;
+            routes: any[];
+        };
+    };
+    services: {
+        service: ({ strapi }: {
+            strapi: import("@strapi/types/dist/core").Strapi;
+        }) => {};
+    };
+    contentTypes: {};
+    policies: {};
+    middlewares: {};
+};
+export default _default;

package/dist/server/src/middlewares/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/server/src/policies/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/server/src/register.d.ts

@@ -0,0 +1,5 @@
+import type { Core } from '@strapi/strapi';
+declare const register: ({ strapi }: {
+    strapi: Core.Strapi;
+}) => void;
+export default register;

package/dist/server/src/routes/content-api.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any[];
+export default _default;

package/dist/server/src/routes/index.d.ts

@@ -0,0 +1,7 @@
+declare const routes: {
+    'content-api': {
+        type: string;
+        routes: any[];
+    };
+};
+export default routes;

package/dist/server/src/services/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    service: ({ strapi }: {
+        strapi: import("@strapi/types/dist/core").Strapi;
+    }) => {};
+};
+export default _default;

package/dist/server/src/services/service.d.ts

@@ -0,0 +1,5 @@
+import type { Core } from '@strapi/strapi';
+declare const service: ({ strapi }: {
+    strapi: Core.Strapi;
+}) => {};
+export default service;

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@tunghtml/strapi-plugin-multiselect-checkbox",
+  "version": "1.0.0",
+  "description": "A Strapi v5 custom field plugin with checkbox UI that stores selected values as an array of strings (JSON type) instead of comma-separated strings.",
+  "keywords": [
+    "strapi",
+    "strapi-plugin",
+    "plugin",
+    "multiselect",
+    "checkbox",
+    "custom-field",
+    "array",
+    "json"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "Tung Le",
+    "email": "tunghtml@gmail.com",
+    "url": "https://github.com/finnwasabi"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/finnwasabi/strapi-plugin-multiselect-checkbox.git"
+  },
+  "bugs": {
+    "url": "https://github.com/finnwasabi/strapi-plugin-multiselect-checkbox/issues"
+  },
+  "homepage": "https://github.com/finnwasabi/strapi-plugin-multiselect-checkbox#readme",
+  "type": "commonjs",
+  "exports": {
+    "./package.json": "./package.json",
+    "./strapi-admin": {
+      "types": "./dist/admin/src/index.d.ts",
+      "source": "./admin/src/index.ts",
+      "import": "./dist/admin/index.mjs",
+      "require": "./dist/admin/index.js",
+      "default": "./dist/admin/index.js"
+    },
+    "./strapi-server": {
+      "types": "./dist/server/src/index.d.ts",
+      "source": "./server/src/index.ts",
+      "import": "./dist/server/index.mjs",
+      "require": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "strapi-plugin build",
+    "test:ts:back": "run -T tsc -p server/tsconfig.json",
+    "test:ts:front": "run -T tsc -p admin/tsconfig.json",
+    "verify": "strapi-plugin verify",
+    "watch": "strapi-plugin watch",
+    "watch:link": "strapi-plugin watch:link"
+  },
+  "dependencies": {
+    "@strapi/design-system": "^2.0.0-rc.29",
+    "@strapi/icons": "^2.0.0-rc.29",
+    "react-intl": "^7.1.11"
+  },
+  "devDependencies": {
+    "@strapi/sdk-plugin": "^5.3.2",
+    "@strapi/strapi": "^5.19.0",
+    "@strapi/typescript-utils": "^5.18.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "prettier": "^3.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.1",
+    "styled-components": "^6.1.19",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "@strapi/sdk-plugin": "^5.3.2",
+    "@strapi/strapi": "^5.18.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.1",
+    "styled-components": "^6.1.19"
+  },
+  "strapi": {
+    "kind": "plugin",
+    "name": "multiselect-checkbox",
+    "displayName": "Multiselect Checkbox",
+    "description": "A custom field for Strapi that allows users to select multiple options from a predefined list and stores as array."
+  }
+}