@strapi/plugin-color-picker 5.9.0 → 5.10.1

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 (58) hide show
  1. package/dist/admin/chunks/ColorPickerInput-Bcb-zEKH.mjs +178 -0
  2. package/dist/admin/chunks/ColorPickerInput-Bcb-zEKH.mjs.map +1 -0
  3. package/dist/admin/chunks/ColorPickerInput-CR8yH0F7.js +199 -0
  4. package/dist/admin/chunks/ColorPickerInput-CR8yH0F7.js.map +1 -0
  5. package/dist/admin/chunks/cs-BI5icLZ-.mjs +15 -0
  6. package/dist/admin/chunks/cs-BI5icLZ-.mjs.map +1 -0
  7. package/dist/admin/chunks/cs-DABbHfFT.js +17 -0
  8. package/dist/admin/chunks/cs-DABbHfFT.js.map +1 -0
  9. package/dist/admin/chunks/en-DhCwQ39J.js +20 -0
  10. package/dist/admin/chunks/en-DhCwQ39J.js.map +1 -0
  11. package/dist/admin/chunks/en-uI0wnpc1.mjs +18 -0
  12. package/dist/admin/chunks/en-uI0wnpc1.mjs.map +1 -0
  13. package/dist/admin/chunks/index-KD5xPsKe.mjs +136 -0
  14. package/dist/admin/chunks/index-KD5xPsKe.mjs.map +1 -0
  15. package/dist/admin/chunks/index-jpCMMLS-.js +139 -0
  16. package/dist/admin/chunks/index-jpCMMLS-.js.map +1 -0
  17. package/dist/admin/chunks/ru-DQvhmgfv.mjs +18 -0
  18. package/dist/admin/chunks/ru-DQvhmgfv.mjs.map +1 -0
  19. package/dist/admin/chunks/ru-DrsXE-1P.js +20 -0
  20. package/dist/admin/chunks/ru-DrsXE-1P.js.map +1 -0
  21. package/dist/admin/chunks/sv-BBGOioTo.js +17 -0
  22. package/dist/admin/chunks/sv-BBGOioTo.js.map +1 -0
  23. package/dist/admin/chunks/sv-soBCY9Rd.mjs +15 -0
  24. package/dist/admin/chunks/sv-soBCY9Rd.mjs.map +1 -0
  25. package/dist/admin/chunks/tr-D3HpnJJI.js +17 -0
  26. package/dist/admin/chunks/tr-D3HpnJJI.js.map +1 -0
  27. package/dist/admin/chunks/tr-pt6M-dRX.mjs +15 -0
  28. package/dist/admin/chunks/tr-pt6M-dRX.mjs.map +1 -0
  29. package/dist/admin/chunks/zh-CRS3clD4.js +17 -0
  30. package/dist/admin/chunks/zh-CRS3clD4.js.map +1 -0
  31. package/dist/admin/chunks/zh-DQMeqBK7.mjs +15 -0
  32. package/dist/admin/chunks/zh-DQMeqBK7.mjs.map +1 -0
  33. package/dist/admin/index.js +11 -2
  34. package/dist/admin/index.js.map +1 -0
  35. package/dist/admin/index.mjs +6 -4
  36. package/dist/admin/index.mjs.map +1 -0
  37. package/dist/admin/src/components/tests/ColorPickerInput.test.d.ts +1 -0
  38. package/dist/server/index.js +13 -9
  39. package/dist/server/index.js.map +1 -0
  40. package/dist/server/index.mjs +12 -11
  41. package/dist/server/index.mjs.map +1 -0
  42. package/package.json +11 -7
  43. package/dist/_chunks/ColorPickerInput-BiwD6BEw.mjs +0 -137
  44. package/dist/_chunks/ColorPickerInput-gD_Mb6qe.js +0 -155
  45. package/dist/_chunks/cs-CKl0OyEH.js +0 -15
  46. package/dist/_chunks/cs-DMmE6LK7.mjs +0 -15
  47. package/dist/_chunks/en-BlDau3us.mjs +0 -18
  48. package/dist/_chunks/en-Ct0C5cA2.js +0 -18
  49. package/dist/_chunks/index-CNTxZbMN.js +0 -126
  50. package/dist/_chunks/index-dnY2u5Dg.mjs +0 -127
  51. package/dist/_chunks/ru-Wrg-npZz.js +0 -18
  52. package/dist/_chunks/ru-aOnA-eym.mjs +0 -18
  53. package/dist/_chunks/sv-BaFDND79.mjs +0 -15
  54. package/dist/_chunks/sv-CKY6es_6.js +0 -15
  55. package/dist/_chunks/tr-CHHW_hYI.mjs +0 -15
  56. package/dist/_chunks/tr-DcLzQS-J.js +0 -15
  57. package/dist/_chunks/zh-DBH6uCXb.mjs +0 -15
  58. package/dist/_chunks/zh-T5cJzhPD.js +0 -15
@@ -1,137 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import { Button, Popover, useComposedRefs, Field, Flex, Typography, Box } from "@strapi/design-system";
4
- import { CaretDown } from "@strapi/icons";
5
- import { useField } from "@strapi/strapi/admin";
6
- import { HexColorPicker } from "react-colorful";
7
- import { useIntl } from "react-intl";
8
- import { styled } from "styled-components";
9
- import { g as getTrad } from "./index-dnY2u5Dg.mjs";
10
- const ColorPreview = styled.div`
11
- border-radius: 50%;
12
- width: 20px;
13
- height: 20px;
14
- margin-right: 10px;
15
- background-color: ${(props) => props.color};
16
- border: 1px solid rgba(0, 0, 0, 0.1);
17
- `;
18
- const ColorPicker = styled(HexColorPicker)`
19
- && {
20
- width: 100%;
21
- aspect-ratio: 1.5;
22
- }
23
-
24
- .react-colorful__pointer {
25
- width: ${({ theme }) => theme.spaces[3]};
26
- height: ${({ theme }) => theme.spaces[3]};
27
- }
28
-
29
- .react-colorful__saturation {
30
- border-radius: ${({ theme }) => theme.spaces[1]};
31
- border-bottom: none;
32
- }
33
-
34
- .react-colorful__hue {
35
- border-radius: 10px;
36
- height: ${({ theme }) => theme.spaces[3]};
37
- margin-top: ${({ theme }) => theme.spaces[2]};
38
- }
39
- `;
40
- const ColorPickerToggle = styled(Button)`
41
- & > span {
42
- display: flex;
43
- justify-content: space-between;
44
- align-items: center;
45
- width: 100%;
46
- }
47
-
48
- svg {
49
- width: ${({ theme }) => theme.spaces[2]};
50
- height: ${({ theme }) => theme.spaces[2]};
51
- }
52
-
53
- svg > path {
54
- fill: ${({ theme }) => theme.colors.neutral500};
55
- justify-self: flex-end;
56
- }
57
- `;
58
- const ColorPickerPopover = styled(Popover.Content)`
59
- padding: ${({ theme }) => theme.spaces[2]};
60
- min-height: 270px;
61
- `;
62
- const ColorPickerInput = React.forwardRef(
63
- ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {
64
- const [showColorPicker, setShowColorPicker] = React.useState(false);
65
- const colorPickerButtonRef = React.useRef(null);
66
- const { formatMessage } = useIntl();
67
- const field = useField(name);
68
- const color = field.value ?? "#000000";
69
- const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
70
- return /* @__PURE__ */ jsx(Field.Root, { name, id: name, error: field.error, hint, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
71
- /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
72
- /* @__PURE__ */ jsxs(Popover.Root, { onOpenChange: setShowColorPicker, children: [
73
- /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(
74
- ColorPickerToggle,
75
- {
76
- ref: composedRefs,
77
- "aria-label": formatMessage({
78
- id: getTrad("color-picker.toggle.aria-label"),
79
- defaultMessage: "Color picker toggle"
80
- }),
81
- "aria-controls": "color-picker-value",
82
- "aria-haspopup": "dialog",
83
- "aria-expanded": showColorPicker,
84
- "aria-disabled": disabled,
85
- disabled,
86
- variant: "tertiary",
87
- size: "L",
88
- children: [
89
- /* @__PURE__ */ jsxs(Flex, { children: [
90
- /* @__PURE__ */ jsx(ColorPreview, { color }),
91
- /* @__PURE__ */ jsx(
92
- Typography,
93
- {
94
- style: { textTransform: "uppercase" },
95
- textColor: field.value ? void 0 : "neutral600",
96
- variant: "omega",
97
- children: color
98
- }
99
- )
100
- ] }),
101
- /* @__PURE__ */ jsx(CaretDown, { "aria-hidden": true })
102
- ]
103
- }
104
- ) }),
105
- /* @__PURE__ */ jsxs(ColorPickerPopover, { sideOffset: 4, children: [
106
- /* @__PURE__ */ jsx(ColorPicker, { color, onChange: (hexValue) => field.onChange(name, hexValue) }),
107
- /* @__PURE__ */ jsxs(Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
108
- /* @__PURE__ */ jsx(Box, { paddingRight: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", tag: "label", textColor: "neutral600", children: formatMessage({
109
- id: getTrad("color-picker.input.format"),
110
- defaultMessage: "HEX"
111
- }) }) }),
112
- /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(
113
- Field.Input,
114
- {
115
- "aria-label": formatMessage({
116
- id: getTrad("color-picker.input.aria-label"),
117
- defaultMessage: "Color picker input"
118
- }),
119
- style: { textTransform: "uppercase" },
120
- name,
121
- defaultValue: color,
122
- placeholder: "#000000",
123
- onChange: field.onChange,
124
- ...props
125
- }
126
- ) })
127
- ] })
128
- ] })
129
- ] }),
130
- /* @__PURE__ */ jsx(Field.Hint, {}),
131
- /* @__PURE__ */ jsx(Field.Error, {})
132
- ] }) });
133
- }
134
- );
135
- export {
136
- ColorPickerInput
137
- };
@@ -1,155 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const React = require("react");
5
- const designSystem = require("@strapi/design-system");
6
- const icons = require("@strapi/icons");
7
- const admin = require("@strapi/strapi/admin");
8
- const reactColorful = require("react-colorful");
9
- const reactIntl = require("react-intl");
10
- const styledComponents = require("styled-components");
11
- const index = require("./index-CNTxZbMN.js");
12
- function _interopNamespace(e) {
13
- if (e && e.__esModule) return e;
14
- const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
15
- if (e) {
16
- for (const k in e) {
17
- if (k !== "default") {
18
- const d = Object.getOwnPropertyDescriptor(e, k);
19
- Object.defineProperty(n, k, d.get ? d : {
20
- enumerable: true,
21
- get: () => e[k]
22
- });
23
- }
24
- }
25
- }
26
- n.default = e;
27
- return Object.freeze(n);
28
- }
29
- const React__namespace = /* @__PURE__ */ _interopNamespace(React);
30
- const ColorPreview = styledComponents.styled.div`
31
- border-radius: 50%;
32
- width: 20px;
33
- height: 20px;
34
- margin-right: 10px;
35
- background-color: ${(props) => props.color};
36
- border: 1px solid rgba(0, 0, 0, 0.1);
37
- `;
38
- const ColorPicker = styledComponents.styled(reactColorful.HexColorPicker)`
39
- && {
40
- width: 100%;
41
- aspect-ratio: 1.5;
42
- }
43
-
44
- .react-colorful__pointer {
45
- width: ${({ theme }) => theme.spaces[3]};
46
- height: ${({ theme }) => theme.spaces[3]};
47
- }
48
-
49
- .react-colorful__saturation {
50
- border-radius: ${({ theme }) => theme.spaces[1]};
51
- border-bottom: none;
52
- }
53
-
54
- .react-colorful__hue {
55
- border-radius: 10px;
56
- height: ${({ theme }) => theme.spaces[3]};
57
- margin-top: ${({ theme }) => theme.spaces[2]};
58
- }
59
- `;
60
- const ColorPickerToggle = styledComponents.styled(designSystem.Button)`
61
- & > span {
62
- display: flex;
63
- justify-content: space-between;
64
- align-items: center;
65
- width: 100%;
66
- }
67
-
68
- svg {
69
- width: ${({ theme }) => theme.spaces[2]};
70
- height: ${({ theme }) => theme.spaces[2]};
71
- }
72
-
73
- svg > path {
74
- fill: ${({ theme }) => theme.colors.neutral500};
75
- justify-self: flex-end;
76
- }
77
- `;
78
- const ColorPickerPopover = styledComponents.styled(designSystem.Popover.Content)`
79
- padding: ${({ theme }) => theme.spaces[2]};
80
- min-height: 270px;
81
- `;
82
- const ColorPickerInput = React__namespace.forwardRef(
83
- ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {
84
- const [showColorPicker, setShowColorPicker] = React__namespace.useState(false);
85
- const colorPickerButtonRef = React__namespace.useRef(null);
86
- const { formatMessage } = reactIntl.useIntl();
87
- const field = admin.useField(name);
88
- const color = field.value ?? "#000000";
89
- const composedRefs = designSystem.useComposedRefs(forwardedRef, colorPickerButtonRef);
90
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { name, id: name, error: field.error, hint, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
91
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
92
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { onOpenChange: setShowColorPicker, children: [
93
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
94
- ColorPickerToggle,
95
- {
96
- ref: composedRefs,
97
- "aria-label": formatMessage({
98
- id: index.getTrad("color-picker.toggle.aria-label"),
99
- defaultMessage: "Color picker toggle"
100
- }),
101
- "aria-controls": "color-picker-value",
102
- "aria-haspopup": "dialog",
103
- "aria-expanded": showColorPicker,
104
- "aria-disabled": disabled,
105
- disabled,
106
- variant: "tertiary",
107
- size: "L",
108
- children: [
109
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
110
- /* @__PURE__ */ jsxRuntime.jsx(ColorPreview, { color }),
111
- /* @__PURE__ */ jsxRuntime.jsx(
112
- designSystem.Typography,
113
- {
114
- style: { textTransform: "uppercase" },
115
- textColor: field.value ? void 0 : "neutral600",
116
- variant: "omega",
117
- children: color
118
- }
119
- )
120
- ] }),
121
- /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { "aria-hidden": true })
122
- ]
123
- }
124
- ) }),
125
- /* @__PURE__ */ jsxRuntime.jsxs(ColorPickerPopover, { sideOffset: 4, children: [
126
- /* @__PURE__ */ jsxRuntime.jsx(ColorPicker, { color, onChange: (hexValue) => field.onChange(name, hexValue) }),
127
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
128
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", tag: "label", textColor: "neutral600", children: formatMessage({
129
- id: index.getTrad("color-picker.input.format"),
130
- defaultMessage: "HEX"
131
- }) }) }),
132
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(
133
- designSystem.Field.Input,
134
- {
135
- "aria-label": formatMessage({
136
- id: index.getTrad("color-picker.input.aria-label"),
137
- defaultMessage: "Color picker input"
138
- }),
139
- style: { textTransform: "uppercase" },
140
- name,
141
- defaultValue: color,
142
- placeholder: "#000000",
143
- onChange: field.onChange,
144
- ...props
145
- }
146
- ) })
147
- ] })
148
- ] })
149
- ] }),
150
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
151
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
152
- ] }) });
153
- }
154
- );
155
- exports.ColorPickerInput = ColorPickerInput;
@@ -1,15 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const cs = {
4
- "color-picker.description": "Vyberte libovolnou barvu",
5
- "color-picker.input.aria-label": "Vstup pro výběr barvy",
6
- "color-picker.input.format": "HEX",
7
- "color-picker.label": "Barva",
8
- "color-picker.options.advanced.regex": "RegExp vzor",
9
- "color-picker.options.advanced.regex.description": "Zadejte regulární výraz pro ověření hodnoty HEX",
10
- "color-picker.options.advanced.requiredField": "Povinné pole",
11
- "color-picker.options.advanced.requiredField.description": "Pokud je toto pole prázdné, nebudete moci vytvořit záznam",
12
- "color-picker.settings": "Nastavení",
13
- "color-picker.toggle.aria-label": "Přepínač výběru barvy"
14
- };
15
- exports.default = cs;
@@ -1,15 +0,0 @@
1
- const cs = {
2
- "color-picker.description": "Vyberte libovolnou barvu",
3
- "color-picker.input.aria-label": "Vstup pro výběr barvy",
4
- "color-picker.input.format": "HEX",
5
- "color-picker.label": "Barva",
6
- "color-picker.options.advanced.regex": "RegExp vzor",
7
- "color-picker.options.advanced.regex.description": "Zadejte regulární výraz pro ověření hodnoty HEX",
8
- "color-picker.options.advanced.requiredField": "Povinné pole",
9
- "color-picker.options.advanced.requiredField.description": "Pokud je toto pole prázdné, nebudete moci vytvořit záznam",
10
- "color-picker.settings": "Nastavení",
11
- "color-picker.toggle.aria-label": "Přepínač výběru barvy"
12
- };
13
- export {
14
- cs as default
15
- };
@@ -1,18 +0,0 @@
1
- const en = {
2
- "color-picker.description": "Select any color",
3
- "color-picker.input.aria-label": "Color picker input",
4
- "color-picker.input.format": "HEX",
5
- "color-picker.label": "Color",
6
- "color-picker.options.advanced.regex": "RegExp pattern",
7
- "color-picker.options.advanced.regex.description": "Provide a regular expression to validate the HEX value",
8
- "color-picker.options.advanced.requiredField": "Required field",
9
- "color-picker.options.advanced.requiredField.description": "You won't be able to create an entry if this field is empty",
10
- "color-picker.settings": "Settings",
11
- "color-picker.toggle.aria-label": "Color picker toggle",
12
- "plugin.description.long": "A Strapi-maintained color picker custom field. Use saturation and hue sliders to select a color and save the value as a HEX string.",
13
- "plugin.description.short": "A Strapi-maintained color picker custom field.",
14
- "plugin.name": "Color picker"
15
- };
16
- export {
17
- en as default
18
- };
@@ -1,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const en = {
4
- "color-picker.description": "Select any color",
5
- "color-picker.input.aria-label": "Color picker input",
6
- "color-picker.input.format": "HEX",
7
- "color-picker.label": "Color",
8
- "color-picker.options.advanced.regex": "RegExp pattern",
9
- "color-picker.options.advanced.regex.description": "Provide a regular expression to validate the HEX value",
10
- "color-picker.options.advanced.requiredField": "Required field",
11
- "color-picker.options.advanced.requiredField.description": "You won't be able to create an entry if this field is empty",
12
- "color-picker.settings": "Settings",
13
- "color-picker.toggle.aria-label": "Color picker toggle",
14
- "plugin.description.long": "A Strapi-maintained color picker custom field. Use saturation and hue sliders to select a color and save the value as a HEX string.",
15
- "plugin.description.short": "A Strapi-maintained color picker custom field.",
16
- "plugin.name": "Color picker"
17
- };
18
- exports.default = en;
@@ -1,126 +0,0 @@
1
- "use strict";
2
- const jsxRuntime = require("react/jsx-runtime");
3
- const designSystem = require("@strapi/design-system");
4
- const icons = require("@strapi/icons");
5
- const styledComponents = require("styled-components");
6
- const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
7
- const v = glob[path];
8
- if (v) {
9
- return typeof v === "function" ? v() : Promise.resolve(v);
10
- }
11
- return new Promise((_, reject) => {
12
- (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
13
- reject.bind(
14
- null,
15
- new Error(
16
- "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
17
- )
18
- )
19
- );
20
- });
21
- };
22
- const IconBox = styledComponents.styled(designSystem.Flex)`
23
- /* Hard code color values */
24
- /* to stay consistent between themes */
25
- background-color: #f0f0ff; /* primary100 */
26
- border: 1px solid #d9d8ff; /* primary200 */
27
-
28
- svg > path {
29
- fill: #4945ff; /* primary600 */
30
- }
31
- `;
32
- const ColorPickerIcon = () => {
33
- return /* @__PURE__ */ jsxRuntime.jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(icons.PaintBrush, {}) });
34
- };
35
- const pluginId = "color-picker";
36
- const getTrad = (id) => `${pluginId}.${id}`;
37
- const prefixPluginTranslations = (trad, pluginId2) => {
38
- return Object.keys(trad).reduce((acc, current) => {
39
- acc[`${pluginId2}.${current}`] = trad[current];
40
- return acc;
41
- }, {});
42
- };
43
- const index = {
44
- /**
45
- * TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.
46
- */
47
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
48
- register(app) {
49
- app.customFields.register({
50
- name: "color",
51
- pluginId: "color-picker",
52
- type: "string",
53
- icon: ColorPickerIcon,
54
- intlLabel: {
55
- id: getTrad("color-picker.label"),
56
- defaultMessage: "Color"
57
- },
58
- intlDescription: {
59
- id: getTrad("color-picker.description"),
60
- defaultMessage: "Select any color"
61
- },
62
- components: {
63
- Input: async () => Promise.resolve().then(() => require("./ColorPickerInput-gD_Mb6qe.js")).then((module2) => ({
64
- default: module2.ColorPickerInput
65
- }))
66
- },
67
- options: {
68
- advanced: [
69
- {
70
- intlLabel: {
71
- id: getTrad("color-picker.options.advanced.regex"),
72
- defaultMessage: "RegExp pattern"
73
- },
74
- name: "regex",
75
- type: "text",
76
- defaultValue: "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$",
77
- description: {
78
- id: getTrad("color-picker.options.advanced.regex.description"),
79
- defaultMessage: "The text of the regular expression"
80
- }
81
- },
82
- {
83
- sectionTitle: {
84
- id: "global.settings",
85
- defaultMessage: "Settings"
86
- },
87
- items: [
88
- {
89
- name: "required",
90
- type: "checkbox",
91
- intlLabel: {
92
- id: getTrad("color-picker.options.advanced.requiredField"),
93
- defaultMessage: "Required field"
94
- },
95
- description: {
96
- id: getTrad("color-picker.options.advanced.requiredField.description"),
97
- defaultMessage: "You won't be able to create an entry if this field is empty"
98
- }
99
- }
100
- ]
101
- }
102
- ]
103
- }
104
- });
105
- },
106
- async registerTrads({ locales }) {
107
- const importedTrads = await Promise.all(
108
- locales.map((locale) => {
109
- return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/cs.json": () => Promise.resolve().then(() => require("./cs-CKl0OyEH.js")), "./translations/en.json": () => Promise.resolve().then(() => require("./en-Ct0C5cA2.js")), "./translations/ru.json": () => Promise.resolve().then(() => require("./ru-Wrg-npZz.js")), "./translations/sv.json": () => Promise.resolve().then(() => require("./sv-CKY6es_6.js")), "./translations/tr.json": () => Promise.resolve().then(() => require("./tr-DcLzQS-J.js")), "./translations/zh.json": () => Promise.resolve().then(() => require("./zh-T5cJzhPD.js")) }), `./translations/${locale}.json`, 3).then(({ default: data }) => {
110
- return {
111
- data: prefixPluginTranslations(data, pluginId),
112
- locale
113
- };
114
- }).catch(() => {
115
- return {
116
- data: {},
117
- locale
118
- };
119
- });
120
- })
121
- );
122
- return Promise.resolve(importedTrads);
123
- }
124
- };
125
- exports.getTrad = getTrad;
126
- exports.index = index;
@@ -1,127 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { Flex } from "@strapi/design-system";
3
- import { PaintBrush } from "@strapi/icons";
4
- import { styled } from "styled-components";
5
- const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
6
- const v = glob[path];
7
- if (v) {
8
- return typeof v === "function" ? v() : Promise.resolve(v);
9
- }
10
- return new Promise((_, reject) => {
11
- (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
12
- reject.bind(
13
- null,
14
- new Error(
15
- "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
16
- )
17
- )
18
- );
19
- });
20
- };
21
- const IconBox = styled(Flex)`
22
- /* Hard code color values */
23
- /* to stay consistent between themes */
24
- background-color: #f0f0ff; /* primary100 */
25
- border: 1px solid #d9d8ff; /* primary200 */
26
-
27
- svg > path {
28
- fill: #4945ff; /* primary600 */
29
- }
30
- `;
31
- const ColorPickerIcon = () => {
32
- return /* @__PURE__ */ jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsx(PaintBrush, {}) });
33
- };
34
- const pluginId = "color-picker";
35
- const getTrad = (id) => `${pluginId}.${id}`;
36
- const prefixPluginTranslations = (trad, pluginId2) => {
37
- return Object.keys(trad).reduce((acc, current) => {
38
- acc[`${pluginId2}.${current}`] = trad[current];
39
- return acc;
40
- }, {});
41
- };
42
- const index = {
43
- /**
44
- * TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.
45
- */
46
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
47
- register(app) {
48
- app.customFields.register({
49
- name: "color",
50
- pluginId: "color-picker",
51
- type: "string",
52
- icon: ColorPickerIcon,
53
- intlLabel: {
54
- id: getTrad("color-picker.label"),
55
- defaultMessage: "Color"
56
- },
57
- intlDescription: {
58
- id: getTrad("color-picker.description"),
59
- defaultMessage: "Select any color"
60
- },
61
- components: {
62
- Input: async () => import("./ColorPickerInput-BiwD6BEw.mjs").then((module) => ({
63
- default: module.ColorPickerInput
64
- }))
65
- },
66
- options: {
67
- advanced: [
68
- {
69
- intlLabel: {
70
- id: getTrad("color-picker.options.advanced.regex"),
71
- defaultMessage: "RegExp pattern"
72
- },
73
- name: "regex",
74
- type: "text",
75
- defaultValue: "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$",
76
- description: {
77
- id: getTrad("color-picker.options.advanced.regex.description"),
78
- defaultMessage: "The text of the regular expression"
79
- }
80
- },
81
- {
82
- sectionTitle: {
83
- id: "global.settings",
84
- defaultMessage: "Settings"
85
- },
86
- items: [
87
- {
88
- name: "required",
89
- type: "checkbox",
90
- intlLabel: {
91
- id: getTrad("color-picker.options.advanced.requiredField"),
92
- defaultMessage: "Required field"
93
- },
94
- description: {
95
- id: getTrad("color-picker.options.advanced.requiredField.description"),
96
- defaultMessage: "You won't be able to create an entry if this field is empty"
97
- }
98
- }
99
- ]
100
- }
101
- ]
102
- }
103
- });
104
- },
105
- async registerTrads({ locales }) {
106
- const importedTrads = await Promise.all(
107
- locales.map((locale) => {
108
- return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/cs.json": () => import("./cs-DMmE6LK7.mjs"), "./translations/en.json": () => import("./en-BlDau3us.mjs"), "./translations/ru.json": () => import("./ru-aOnA-eym.mjs"), "./translations/sv.json": () => import("./sv-BaFDND79.mjs"), "./translations/tr.json": () => import("./tr-CHHW_hYI.mjs"), "./translations/zh.json": () => import("./zh-DBH6uCXb.mjs") }), `./translations/${locale}.json`, 3).then(({ default: data }) => {
109
- return {
110
- data: prefixPluginTranslations(data, pluginId),
111
- locale
112
- };
113
- }).catch(() => {
114
- return {
115
- data: {},
116
- locale
117
- };
118
- });
119
- })
120
- );
121
- return Promise.resolve(importedTrads);
122
- }
123
- };
124
- export {
125
- getTrad as g,
126
- index as i
127
- };
@@ -1,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const ru = {
4
- "color-picker.description": "Выбирайте любые цвета",
5
- "color-picker.input.aria-label": "Введите выбранный цвет",
6
- "color-picker.input.format": "HEX",
7
- "color-picker.label": "Цвет",
8
- "color-picker.options.advanced.regex": "Шаблон регулярного выражения (RegExp)",
9
- "color-picker.options.advanced.regex.description": "Обеспечивает проверку с помощью регулярного выражение для HEX (шестнадцатеричного) HEX значения цвета",
10
- "color-picker.options.advanced.requiredField": "Обязательное поле",
11
- "color-picker.options.advanced.requiredField.description": "Вы не сможете продолжить, если это поле пусто",
12
- "color-picker.settings": "Настройки",
13
- "color-picker.toggle.aria-label": "Переключатель средства выбора цвета",
14
- "plugin.description.long": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi. Используйте ползунки насыщенности и оттенка, чтобы выбрать цвет и сохранить его HEX (шестнадцатеричное) значение.",
15
- "plugin.description.short": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi.",
16
- "plugin.name": "Выбор цвета"
17
- };
18
- exports.default = ru;
@@ -1,18 +0,0 @@
1
- const ru = {
2
- "color-picker.description": "Выбирайте любые цвета",
3
- "color-picker.input.aria-label": "Введите выбранный цвет",
4
- "color-picker.input.format": "HEX",
5
- "color-picker.label": "Цвет",
6
- "color-picker.options.advanced.regex": "Шаблон регулярного выражения (RegExp)",
7
- "color-picker.options.advanced.regex.description": "Обеспечивает проверку с помощью регулярного выражение для HEX (шестнадцатеричного) HEX значения цвета",
8
- "color-picker.options.advanced.requiredField": "Обязательное поле",
9
- "color-picker.options.advanced.requiredField.description": "Вы не сможете продолжить, если это поле пусто",
10
- "color-picker.settings": "Настройки",
11
- "color-picker.toggle.aria-label": "Переключатель средства выбора цвета",
12
- "plugin.description.long": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi. Используйте ползунки насыщенности и оттенка, чтобы выбрать цвет и сохранить его HEX (шестнадцатеричное) значение.",
13
- "plugin.description.short": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi.",
14
- "plugin.name": "Выбор цвета"
15
- };
16
- export {
17
- ru as default
18
- };
@@ -1,15 +0,0 @@
1
- const sv = {
2
- "color-picker.description": "Välj färger",
3
- "color-picker.input.aria-label": "Färgväljarinmatning",
4
- "color-picker.input.format": "HEX",
5
- "color-picker.label": "Färgväljare",
6
- "color-picker.options.advanced.regex": "RegEx-mönster",
7
- "color-picker.options.advanced.regex.description": "Ange ett regex-mönster för att validera HEX-värdet",
8
- "color-picker.options.advanced.requiredField": "Obligatoriskt fält",
9
- "color-picker.options.advanced.requiredField.description": "Du kommer inte att kunna skapa en post om det här fältet är tomt",
10
- "color-picker.settings": "Inställningar",
11
- "color-picker.toggle.aria-label": "Växla färgväljare"
12
- };
13
- export {
14
- sv as default
15
- };