@tunghtml/strapi-plugin-multiselect-checkbox 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/_chunks/{index-DRjsLClm.js → index-Cq8U74WF.js} +6 -6
  2. package/dist/_chunks/{index-CG0vMCYh.mjs → index-DCyhdaV9.mjs} +7 -7
  3. package/dist/admin/index.js +16 -3
  4. package/dist/admin/index.mjs +16 -3
  5. package/dist/server/index.js +6 -2
  6. package/dist/server/index.mjs +6 -2
  7. package/package.json +1 -1
package/dist/_chunks/{index-DRjsLClm.js → index-Cq8U74WF.js} RENAMED
@@ -27,7 +27,7 @@ const MultiSelect = ({
27
27
  const { formatMessage } = reactIntl.useIntl();
28
28
  const { onChange, value, error } = admin.useField(name);
29
29
  const possibleOptions = react.useMemo(() => {
30
- return (attribute["options"] || []).map((option) => {
30
+ return (attribute.options?.options || attribute["options"] || []).map((option) => {
31
31
  const [label2, value2] = [...option.split(/:(.*)/s), option];
32
32
  if (!label2 || !value2) return null;
33
33
  return { label: label2, value: value2 };
@@ -76,6 +76,7 @@ const MultiSelect = ({
76
76
  }
77
77
  });
78
78
  };
79
+ const gridCol = Math.floor(12 / (attribute.options?.columns || attribute.columns || 1));
79
80
  return /* @__PURE__ */ jsxRuntime.jsx(
80
81
  designSystem.Field.Root,
81
82
  {
@@ -85,10 +86,10 @@ const MultiSelect = ({
85
86
  required,
86
87
  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
87
88
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: intlLabel?.id ? formatMessage(intlLabel) : label }),
88
- possibleOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral400", children: "No options available. Please configure options in the field settings." }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, direction: "column", alignItems: "stretch", children: possibleOptions.map((option) => {
89
+ possibleOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral400", children: "No options available. Please configure options in the field settings." }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 2, children: possibleOptions.map((option) => {
89
90
  const isChecked = sanitizedValue.some((v) => v.value === option.value);
90
91
  const isDisabled = disabled || sanitizedValue.length >= attribute["max"] && !isChecked;
91
- return /* @__PURE__ */ jsxRuntime.jsx(
92
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: gridCol, s: 6, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
92
93
  designSystem.Checkbox,
93
94
  {
94
95
  checked: isChecked,
@@ -98,9 +99,8 @@ const MultiSelect = ({
98
99
  id: option.label,
99
100
  defaultMessage: option.label
100
101
  }) })
101
- },
102
- option.value
103
- );
102
+ }
103
+ ) }, option.value);
104
104
  }) }) }),
105
105
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
106
106
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
package/dist/_chunks/{index-CG0vMCYh.mjs → index-DCyhdaV9.mjs} RENAMED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { Field, Flex, Typography, Box, Checkbox } from "@strapi/design-system";
2
+ import { Field, Flex, Typography, Box, Grid, Checkbox } from "@strapi/design-system";
3
3
  import { useField } from "@strapi/strapi/admin";
4
4
  import { useMemo } from "react";
5
5
  import { useIntl } from "react-intl";
@@ -23,7 +23,7 @@ const MultiSelect = ({
23
23
  const { formatMessage } = useIntl();
24
24
  const { onChange, value, error } = useField(name);
25
25
  const possibleOptions = useMemo(() => {
26
- return (attribute["options"] || []).map((option) => {
26
+ return (attribute.options?.options || attribute["options"] || []).map((option) => {
27
27
  const [label2, value2] = [...option.split(/:(.*)/s), option];
28
28
  if (!label2 || !value2) return null;
29
29
  return { label: label2, value: value2 };
@@ -72,6 +72,7 @@ const MultiSelect = ({
72
72
  }
73
73
  });
74
74
  };
75
+ const gridCol = Math.floor(12 / (attribute.options?.columns || attribute.columns || 1));
75
76
  return /* @__PURE__ */ jsx(
76
77
  Field.Root,
77
78
  {
@@ -81,10 +82,10 @@ const MultiSelect = ({
81
82
  required,
82
83
  children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
83
84
  /* @__PURE__ */ jsx(Field.Label, { children: intlLabel?.id ? formatMessage(intlLabel) : label }),
84
- possibleOptions.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral400", children: "No options available. Please configure options in the field settings." }) : /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Flex, { gap: 2, direction: "column", alignItems: "stretch", children: possibleOptions.map((option) => {
85
+ possibleOptions.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral400", children: "No options available. Please configure options in the field settings." }) : /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Grid.Root, { gap: 2, children: possibleOptions.map((option) => {
85
86
  const isChecked = sanitizedValue.some((v) => v.value === option.value);
86
87
  const isDisabled = disabled || sanitizedValue.length >= attribute["max"] && !isChecked;
87
- return /* @__PURE__ */ jsx(
88
+ return /* @__PURE__ */ jsx(Grid.Item, { col: gridCol, s: 6, xs: 12, children: /* @__PURE__ */ jsx(
88
89
  Checkbox,
89
90
  {
90
91
  checked: isChecked,
@@ -94,9 +95,8 @@ const MultiSelect = ({
94
95
  id: option.label,
95
96
  defaultMessage: option.label
96
97
  }) })
97
- },
98
- option.value
99
- );
98
+ }
99
+ ) }, option.value);
100
100
  }) }) }),
101
101
  /* @__PURE__ */ jsx(Field.Hint, {}),
102
102
  /* @__PURE__ */ jsx(Field.Error, {})
package/dist/admin/index.js CHANGED
@@ -47,7 +47,7 @@ const index = {
47
47
  app.customFields.register({
48
48
  name: "multiselect-checkbox",
49
49
  pluginId: `${PLUGIN_ID}`,
50
- type: "text",
50
+ type: "json",
51
51
  icon: PluginIcon,
52
52
  intlLabel: {
53
53
  id: `${PLUGIN_ID}.label`,
@@ -58,7 +58,7 @@ const index = {
58
58
  defaultMessage: "Select multiple options using checkboxes. Data stored as JSON array."
59
59
  },
60
60
  components: {
61
- Input: async () => Promise.resolve().then(() => require("../_chunks/index-DRjsLClm.js"))
61
+ Input: async () => Promise.resolve().then(() => require("../_chunks/index-Cq8U74WF.js"))
62
62
  },
63
63
  options: {
64
64
  base: [
@@ -66,7 +66,7 @@ const index = {
66
66
  sectionTitle: null,
67
67
  items: [
68
68
  {
69
- name: "options",
69
+ name: "options.options",
70
70
  type: "textarea-enum",
71
71
  intlLabel: {
72
72
  id: prefixKey("options.available-options.label"),
@@ -81,6 +81,19 @@ const index = {
81
81
  defaultMessage: "Option 1\nOption 2\nOption 3"
82
82
  }
83
83
  },
84
+ {
85
+ name: "options.columns",
86
+ type: "number",
87
+ intlLabel: {
88
+ id: prefixKey("options.columns.label"),
89
+ defaultMessage: "Number of columns"
90
+ },
91
+ description: {
92
+ id: prefixKey("options.columns.description"),
93
+ defaultMessage: "Number of columns to display (e.g. 1, 2, 3, 4). Default is 1"
94
+ },
95
+ defaultValue: 1
96
+ },
84
97
  {
85
98
  name: "default",
86
99
  type: "json",
package/dist/admin/index.mjs CHANGED
@@ -44,7 +44,7 @@ const index = {
44
44
  app.customFields.register({
45
45
  name: "multiselect-checkbox",
46
46
  pluginId: `${PLUGIN_ID}`,
47
- type: "text",
47
+ type: "json",
48
48
  icon: PluginIcon,
49
49
  intlLabel: {
50
50
  id: `${PLUGIN_ID}.label`,
@@ -55,7 +55,7 @@ const index = {
55
55
  defaultMessage: "Select multiple options using checkboxes. Data stored as JSON array."
56
56
  },
57
57
  components: {
58
- Input: async () => import("../_chunks/index-CG0vMCYh.mjs")
58
+ Input: async () => import("../_chunks/index-DCyhdaV9.mjs")
59
59
  },
60
60
  options: {
61
61
  base: [
@@ -63,7 +63,7 @@ const index = {
63
63
  sectionTitle: null,
64
64
  items: [
65
65
  {
66
- name: "options",
66
+ name: "options.options",
67
67
  type: "textarea-enum",
68
68
  intlLabel: {
69
69
  id: prefixKey("options.available-options.label"),
@@ -78,6 +78,19 @@ const index = {
78
78
  defaultMessage: "Option 1\nOption 2\nOption 3"
79
79
  }
80
80
  },
81
+ {
82
+ name: "options.columns",
83
+ type: "number",
84
+ intlLabel: {
85
+ id: prefixKey("options.columns.label"),
86
+ defaultMessage: "Number of columns"
87
+ },
88
+ description: {
89
+ id: prefixKey("options.columns.description"),
90
+ defaultMessage: "Number of columns to display (e.g. 1, 2, 3, 4). Default is 1"
91
+ },
92
+ defaultValue: 1
93
+ },
81
94
  {
82
95
  name: "default",
83
96
  type: "json",
package/dist/server/index.js CHANGED
@@ -19,8 +19,12 @@ const register = ({ strapi }) => {
19
19
  strapi.customFields.register({
20
20
  name: "multiselect-checkbox",
21
21
  plugin: "multiselect-checkbox",
22
- // The data type stored in the database - text (serialized JSON)
23
- type: "text"
22
+ // The data type stored in the database - JSON array
23
+ type: "json",
24
+ inputSize: {
25
+ default: 12,
26
+ isResizable: true
27
+ }
24
28
  });
25
29
  };
26
30
  const contentAPIRoutes = [];
package/dist/server/index.mjs CHANGED
@@ -18,8 +18,12 @@ const register = ({ strapi }) => {
18
18
  strapi.customFields.register({
19
19
  name: "multiselect-checkbox",
20
20
  plugin: "multiselect-checkbox",
21
- // The data type stored in the database - text (serialized JSON)
22
- type: "text"
21
+ // The data type stored in the database - JSON array
22
+ type: "json",
23
+ inputSize: {
24
+ default: 12,
25
+ isResizable: true
26
+ }
23
27
  });
24
28
  };
25
29
  const contentAPIRoutes = [];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tunghtml/strapi-plugin-multiselect-checkbox",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "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.",
5
5
  "keywords": [
6
6
  "strapi",