@strapi/plugin-color-picker 0.0.0-next.fe88c7878fe2948cfdc68f4867329c1032a618b2 → 0.0.0-next.ffc36acb308febe288f1a31b62cbbb75b286585c
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.
- package/dist/admin/components/ColorPickerIcon.js +31 -0
- package/dist/admin/components/ColorPickerIcon.js.map +1 -0
- package/dist/admin/components/ColorPickerIcon.mjs +29 -0
- package/dist/admin/components/ColorPickerIcon.mjs.map +1 -0
- package/dist/admin/components/ColorPickerInput.js +199 -0
- package/dist/admin/components/ColorPickerInput.js.map +1 -0
- package/dist/admin/components/ColorPickerInput.mjs +178 -0
- package/dist/admin/components/ColorPickerInput.mjs.map +1 -0
- package/dist/admin/index.js +107 -8
- package/dist/admin/index.js.map +1 -1
- package/dist/admin/index.mjs +102 -8
- package/dist/admin/index.mjs.map +1 -1
- package/dist/admin/pluginId.js +6 -0
- package/dist/admin/pluginId.js.map +1 -0
- package/dist/admin/pluginId.mjs +4 -0
- package/dist/admin/pluginId.mjs.map +1 -0
- package/dist/admin/src/components/ColorPickerInput.d.ts +3 -28
- package/dist/admin/src/components/tests/ColorPickerInput.test.d.ts +1 -0
- package/dist/admin/src/utils/prefixPluginTranslations.d.ts +3 -0
- package/dist/admin/translations/cs.json.js +17 -0
- package/dist/admin/translations/cs.json.js.map +1 -0
- package/dist/admin/translations/cs.json.mjs +15 -0
- package/dist/admin/translations/cs.json.mjs.map +1 -0
- package/dist/admin/translations/en.json.js +20 -0
- package/dist/admin/translations/en.json.js.map +1 -0
- package/dist/admin/translations/en.json.mjs +18 -0
- package/dist/admin/translations/en.json.mjs.map +1 -0
- package/dist/admin/translations/ru.json.js +20 -0
- package/dist/admin/translations/ru.json.js.map +1 -0
- package/dist/admin/translations/ru.json.mjs +18 -0
- package/dist/admin/translations/ru.json.mjs.map +1 -0
- package/dist/admin/translations/sv.json.js +17 -0
- package/dist/admin/translations/sv.json.js.map +1 -0
- package/dist/admin/translations/sv.json.mjs +15 -0
- package/dist/admin/translations/sv.json.mjs.map +1 -0
- package/dist/admin/translations/tr.json.js +17 -0
- package/dist/admin/translations/tr.json.js.map +1 -0
- package/dist/admin/translations/tr.json.mjs +15 -0
- package/dist/admin/translations/tr.json.mjs.map +1 -0
- package/dist/admin/translations/uk.json.js +20 -0
- package/dist/admin/translations/uk.json.js.map +1 -0
- package/dist/admin/translations/uk.json.mjs +18 -0
- package/dist/admin/translations/uk.json.mjs.map +1 -0
- package/dist/admin/translations/zh.json.js +17 -0
- package/dist/admin/translations/zh.json.js.map +1 -0
- package/dist/admin/translations/zh.json.mjs +15 -0
- package/dist/admin/translations/zh.json.mjs.map +1 -0
- package/dist/admin/utils/getTrad.js +8 -0
- package/dist/admin/utils/getTrad.js.map +1 -0
- package/dist/admin/utils/getTrad.mjs +6 -0
- package/dist/admin/utils/getTrad.mjs.map +1 -0
- package/dist/admin/utils/prefixPluginTranslations.js +11 -0
- package/dist/admin/utils/prefixPluginTranslations.js.map +1 -0
- package/dist/admin/utils/prefixPluginTranslations.mjs +9 -0
- package/dist/admin/utils/prefixPluginTranslations.mjs.map +1 -0
- package/dist/server/index.js +7 -10
- package/dist/server/index.js.map +1 -1
- package/dist/server/index.mjs +6 -12
- package/dist/server/index.mjs.map +1 -1
- package/dist/server/register.js +12 -0
- package/dist/server/register.js.map +1 -0
- package/dist/server/register.mjs +10 -0
- package/dist/server/register.mjs.map +1 -0
- package/package.json +24 -24
- package/dist/_chunks/ColorPickerInput-0lOoTrf0.js +0 -206
- package/dist/_chunks/ColorPickerInput-0lOoTrf0.js.map +0 -1
- package/dist/_chunks/ColorPickerInput-fKB6YXW8.mjs +0 -185
- package/dist/_chunks/ColorPickerInput-fKB6YXW8.mjs.map +0 -1
- package/dist/_chunks/cs-4GdZY0p6.js +0 -16
- package/dist/_chunks/cs-4GdZY0p6.js.map +0 -1
- package/dist/_chunks/cs-A2xRj-2-.mjs +0 -16
- package/dist/_chunks/cs-A2xRj-2-.mjs.map +0 -1
- package/dist/_chunks/en-L6ZZWDJv.mjs +0 -19
- package/dist/_chunks/en-L6ZZWDJv.mjs.map +0 -1
- package/dist/_chunks/en-WeRHjVEB.js +0 -19
- package/dist/_chunks/en-WeRHjVEB.js.map +0 -1
- package/dist/_chunks/index-OJYEuoCq.js +0 -117
- package/dist/_chunks/index-OJYEuoCq.js.map +0 -1
- package/dist/_chunks/index-uOrtnJpz.mjs +0 -116
- package/dist/_chunks/index-uOrtnJpz.mjs.map +0 -1
- package/dist/_chunks/ru-LLXYEOwl.mjs +0 -19
- package/dist/_chunks/ru-LLXYEOwl.mjs.map +0 -1
- package/dist/_chunks/ru-UXN_ByI9.js +0 -19
- package/dist/_chunks/ru-UXN_ByI9.js.map +0 -1
- package/dist/_chunks/sv-3-Yk9bKb.js +0 -16
- package/dist/_chunks/sv-3-Yk9bKb.js.map +0 -1
- package/dist/_chunks/sv-QqRPNQLw.mjs +0 -16
- package/dist/_chunks/sv-QqRPNQLw.mjs.map +0 -1
- package/dist/_chunks/tr-AbD-f8F0.js +0 -16
- package/dist/_chunks/tr-AbD-f8F0.js.map +0 -1
- package/dist/_chunks/tr-qYGSw8gH.mjs +0 -16
- package/dist/_chunks/tr-qYGSw8gH.mjs.map +0 -1
- package/dist/_chunks/zh-c23gv_oM.js +0 -16
- package/dist/_chunks/zh-c23gv_oM.js.map +0 -1
- package/dist/_chunks/zh-fPTOIT6s.mjs +0 -16
- package/dist/_chunks/zh-fPTOIT6s.mjs.map +0 -1
- package/dist/admin/src/hooks/useComposeRefs.d.ts +0 -29
- package/strapi-server.js +0 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../server/src/
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../server/src/index.ts"],"sourcesContent":["import { register } from './register';\n\nexport default {\n register,\n};\n"],"names":["register"],"mappings":";;AAEA,YAAe;AACbA,IAAAA;AACF,CAAE;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"register.js","sources":["../../server/src/register.ts"],"sourcesContent":["export const register = ({ strapi }: any) => {\n strapi.customFields.register({\n name: 'color',\n plugin: 'color-picker',\n type: 'string',\n });\n};\n"],"names":["register","strapi","customFields","name","plugin","type"],"mappings":";;AAAaA,MAAAA,QAAAA,GAAW,CAAC,EAAEC,MAAM,EAAO,GAAA;IACtCA,MAAOC,CAAAA,YAAY,CAACF,QAAQ,CAAC;QAC3BG,IAAM,EAAA,OAAA;QACNC,MAAQ,EAAA,cAAA;QACRC,IAAM,EAAA;AACR,KAAA,CAAA;AACF;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"register.mjs","sources":["../../server/src/register.ts"],"sourcesContent":["export const register = ({ strapi }: any) => {\n strapi.customFields.register({\n name: 'color',\n plugin: 'color-picker',\n type: 'string',\n });\n};\n"],"names":["register","strapi","customFields","name","plugin","type"],"mappings":"AAAaA,MAAAA,QAAAA,GAAW,CAAC,EAAEC,MAAM,EAAO,GAAA;IACtCA,MAAOC,CAAAA,YAAY,CAACF,QAAQ,CAAC;QAC3BG,IAAM,EAAA,OAAA;QACNC,MAAQ,EAAA,cAAA;QACRC,IAAM,EAAA;AACR,KAAA,CAAA;AACF;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/plugin-color-picker",
|
|
3
|
-
"version": "0.0.0-next.
|
|
3
|
+
"version": "0.0.0-next.ffc36acb308febe288f1a31b62cbbb75b286585c",
|
|
4
4
|
"description": "Strapi maintained Custom Fields",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -38,11 +38,15 @@
|
|
|
38
38
|
"./package.json": "./package.json"
|
|
39
39
|
},
|
|
40
40
|
"files": [
|
|
41
|
-
"
|
|
41
|
+
"dist/",
|
|
42
42
|
"strapi-server.js"
|
|
43
43
|
],
|
|
44
44
|
"scripts": {
|
|
45
|
-
"build": "
|
|
45
|
+
"build": "run -T npm-run-all clean --parallel build:code build:types",
|
|
46
|
+
"build:code": "run -T rollup -c",
|
|
47
|
+
"build:types": "run -T run-p build:types:server build:types:admin",
|
|
48
|
+
"build:types:server": "run -T tsc -p server/tsconfig.build.json --emitDeclarationOnly",
|
|
49
|
+
"build:types:admin": "run -T tsc -p admin/tsconfig.build.json --emitDeclarationOnly",
|
|
46
50
|
"clean": "run -T rimraf ./dist",
|
|
47
51
|
"lint": "run -T eslint .",
|
|
48
52
|
"test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
|
|
@@ -50,36 +54,33 @@
|
|
|
50
54
|
"test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
|
|
51
55
|
"test:front:watch:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll",
|
|
52
56
|
"test:ts:front": "run -T tsc -p admin/tsconfig.json",
|
|
53
|
-
"watch": "
|
|
57
|
+
"watch": "run -T rollup -c -w"
|
|
54
58
|
},
|
|
55
59
|
"dependencies": {
|
|
56
|
-
"@strapi/design-system": "
|
|
57
|
-
"@strapi/
|
|
58
|
-
"@strapi/icons": "1.19.0",
|
|
59
|
-
"prop-types": "^15.8.1",
|
|
60
|
+
"@strapi/design-system": "2.0.0-rc.29",
|
|
61
|
+
"@strapi/icons": "2.0.0-rc.29",
|
|
60
62
|
"react-colorful": "5.6.1",
|
|
61
|
-
"react-intl": "6.
|
|
63
|
+
"react-intl": "6.6.2"
|
|
62
64
|
},
|
|
63
65
|
"devDependencies": {
|
|
64
|
-
"@strapi/strapi": "0.0.0-next.
|
|
65
|
-
"@testing-library/react": "
|
|
66
|
-
"@testing-library/user-event": "14.
|
|
67
|
-
"
|
|
68
|
-
"react": "
|
|
69
|
-
"react-dom": "
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"typescript": "5.2.2"
|
|
66
|
+
"@strapi/strapi": "0.0.0-next.ffc36acb308febe288f1a31b62cbbb75b286585c",
|
|
67
|
+
"@testing-library/react": "15.0.7",
|
|
68
|
+
"@testing-library/user-event": "14.5.2",
|
|
69
|
+
"react": "18.3.1",
|
|
70
|
+
"react-dom": "18.3.1",
|
|
71
|
+
"react-router-dom": "6.22.3",
|
|
72
|
+
"styled-components": "6.1.8",
|
|
73
|
+
"typescript": "5.4.4"
|
|
73
74
|
},
|
|
74
75
|
"peerDependencies": {
|
|
75
|
-
"@strapi/strapi": "^
|
|
76
|
+
"@strapi/strapi": "^5.0.0",
|
|
76
77
|
"react": "^17.0.0 || ^18.0.0",
|
|
77
78
|
"react-dom": "^17.0.0 || ^18.0.0",
|
|
78
|
-
"react-router-dom": "^
|
|
79
|
-
"styled-components": "^
|
|
79
|
+
"react-router-dom": "^6.0.0",
|
|
80
|
+
"styled-components": "^6.0.0"
|
|
80
81
|
},
|
|
81
82
|
"engines": {
|
|
82
|
-
"node": ">=18.0.0 <=
|
|
83
|
+
"node": ">=18.0.0 <=22.x.x",
|
|
83
84
|
"npm": ">=6.0.0"
|
|
84
85
|
},
|
|
85
86
|
"strapi": {
|
|
@@ -87,6 +88,5 @@
|
|
|
87
88
|
"description": "Color picker custom field",
|
|
88
89
|
"kind": "plugin",
|
|
89
90
|
"displayName": "Color Picker"
|
|
90
|
-
}
|
|
91
|
-
"gitHead": "fe88c7878fe2948cfdc68f4867329c1032a618b2"
|
|
91
|
+
}
|
|
92
92
|
}
|
|
@@ -1,206 +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 reactColorful = require("react-colorful");
|
|
8
|
-
const reactIntl = require("react-intl");
|
|
9
|
-
const styled = require("styled-components");
|
|
10
|
-
const index = require("./index-OJYEuoCq.js");
|
|
11
|
-
require("@strapi/helper-plugin");
|
|
12
|
-
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
13
|
-
function _interopNamespace(e) {
|
|
14
|
-
if (e && e.__esModule)
|
|
15
|
-
return e;
|
|
16
|
-
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
17
|
-
if (e) {
|
|
18
|
-
for (const k in e) {
|
|
19
|
-
if (k !== "default") {
|
|
20
|
-
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
21
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
22
|
-
enumerable: true,
|
|
23
|
-
get: () => e[k]
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
n.default = e;
|
|
29
|
-
return Object.freeze(n);
|
|
30
|
-
}
|
|
31
|
-
const React__namespace = /* @__PURE__ */ _interopNamespace(React);
|
|
32
|
-
const styled__default = /* @__PURE__ */ _interopDefault(styled);
|
|
33
|
-
function setRef(ref, value) {
|
|
34
|
-
if (typeof ref === "function") {
|
|
35
|
-
ref(value);
|
|
36
|
-
} else if (ref !== null && ref !== void 0) {
|
|
37
|
-
ref.current = value;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
function composeRefs(...refs) {
|
|
41
|
-
return (node) => refs.forEach((ref) => setRef(ref, node));
|
|
42
|
-
}
|
|
43
|
-
function useComposedRefs(...refs) {
|
|
44
|
-
return React__namespace.useCallback(composeRefs(...refs), refs);
|
|
45
|
-
}
|
|
46
|
-
const ColorPreview = styled__default.default.div`
|
|
47
|
-
border-radius: 50%;
|
|
48
|
-
width: 20px;
|
|
49
|
-
height: 20px;
|
|
50
|
-
margin-right: 10px;
|
|
51
|
-
background-color: ${(props) => props.color};
|
|
52
|
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
53
|
-
`;
|
|
54
|
-
const ColorPicker = styled__default.default(reactColorful.HexColorPicker)`
|
|
55
|
-
&& {
|
|
56
|
-
width: 100%;
|
|
57
|
-
aspect-ratio: 1.5;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.react-colorful__pointer {
|
|
61
|
-
width: ${({ theme }) => theme.spaces[3]};
|
|
62
|
-
height: ${({ theme }) => theme.spaces[3]};
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.react-colorful__saturation {
|
|
66
|
-
border-radius: ${({ theme }) => theme.spaces[1]};
|
|
67
|
-
border-bottom: none;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.react-colorful__hue {
|
|
71
|
-
border-radius: 10px;
|
|
72
|
-
height: ${({ theme }) => theme.spaces[3]};
|
|
73
|
-
margin-top: ${({ theme }) => theme.spaces[2]};
|
|
74
|
-
}
|
|
75
|
-
`;
|
|
76
|
-
const ColorPickerToggle = styled__default.default(designSystem.BaseButton)`
|
|
77
|
-
display: flex;
|
|
78
|
-
justify-content: space-between;
|
|
79
|
-
align-items: center;
|
|
80
|
-
|
|
81
|
-
svg {
|
|
82
|
-
width: ${({ theme }) => theme.spaces[2]};
|
|
83
|
-
height: ${({ theme }) => theme.spaces[2]};
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
svg > path {
|
|
87
|
-
fill: ${({ theme }) => theme.colors.neutral500};
|
|
88
|
-
justify-self: flex-end;
|
|
89
|
-
}
|
|
90
|
-
`;
|
|
91
|
-
const ColorPickerPopover = styled__default.default(designSystem.Popover)`
|
|
92
|
-
padding: ${({ theme }) => theme.spaces[2]};
|
|
93
|
-
min-height: 270px;
|
|
94
|
-
`;
|
|
95
|
-
const ColorPickerInput = React__namespace.forwardRef(
|
|
96
|
-
({
|
|
97
|
-
attribute,
|
|
98
|
-
description,
|
|
99
|
-
disabled = false,
|
|
100
|
-
error,
|
|
101
|
-
intlLabel,
|
|
102
|
-
labelAction,
|
|
103
|
-
name,
|
|
104
|
-
onChange,
|
|
105
|
-
required = false,
|
|
106
|
-
value = ""
|
|
107
|
-
}, forwardedRef) => {
|
|
108
|
-
const [showColorPicker, setShowColorPicker] = React__namespace.useState(false);
|
|
109
|
-
const colorPickerButtonRef = React__namespace.useRef(null);
|
|
110
|
-
const { formatMessage } = reactIntl.useIntl();
|
|
111
|
-
const color = value || "#000000";
|
|
112
|
-
const handleBlur = (e) => {
|
|
113
|
-
e.preventDefault();
|
|
114
|
-
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
115
|
-
setShowColorPicker(false);
|
|
116
|
-
}
|
|
117
|
-
};
|
|
118
|
-
const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
|
|
119
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
120
|
-
designSystem.Field,
|
|
121
|
-
{
|
|
122
|
-
name,
|
|
123
|
-
id: name,
|
|
124
|
-
error,
|
|
125
|
-
hint: description && formatMessage(description),
|
|
126
|
-
required,
|
|
127
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
|
128
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }),
|
|
129
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
130
|
-
ColorPickerToggle,
|
|
131
|
-
{
|
|
132
|
-
ref: composedRefs,
|
|
133
|
-
"aria-label": formatMessage({
|
|
134
|
-
id: index.getTrad("color-picker.toggle.aria-label"),
|
|
135
|
-
defaultMessage: "Color picker toggle"
|
|
136
|
-
}),
|
|
137
|
-
"aria-controls": "color-picker-value",
|
|
138
|
-
"aria-haspopup": "dialog",
|
|
139
|
-
"aria-expanded": showColorPicker,
|
|
140
|
-
"aria-disabled": disabled,
|
|
141
|
-
disabled,
|
|
142
|
-
onClick: () => setShowColorPicker(!showColorPicker),
|
|
143
|
-
children: [
|
|
144
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
|
|
145
|
-
/* @__PURE__ */ jsxRuntime.jsx(ColorPreview, { color }),
|
|
146
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
147
|
-
designSystem.Typography,
|
|
148
|
-
{
|
|
149
|
-
style: { textTransform: "uppercase" },
|
|
150
|
-
textColor: value ? void 0 : "neutral600",
|
|
151
|
-
variant: "omega",
|
|
152
|
-
children: color
|
|
153
|
-
}
|
|
154
|
-
)
|
|
155
|
-
] }),
|
|
156
|
-
/* @__PURE__ */ jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true })
|
|
157
|
-
]
|
|
158
|
-
}
|
|
159
|
-
),
|
|
160
|
-
showColorPicker && /* @__PURE__ */ jsxRuntime.jsx(
|
|
161
|
-
ColorPickerPopover,
|
|
162
|
-
{
|
|
163
|
-
onBlur: handleBlur,
|
|
164
|
-
role: "dialog",
|
|
165
|
-
source: colorPickerButtonRef,
|
|
166
|
-
spacing: 4,
|
|
167
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
|
|
168
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
169
|
-
ColorPicker,
|
|
170
|
-
{
|
|
171
|
-
color,
|
|
172
|
-
onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
|
|
173
|
-
}
|
|
174
|
-
),
|
|
175
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
|
|
176
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
|
|
177
|
-
id: index.getTrad("color-picker.input.format"),
|
|
178
|
-
defaultMessage: "HEX"
|
|
179
|
-
}) }) }),
|
|
180
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
181
|
-
designSystem.FieldInput,
|
|
182
|
-
{
|
|
183
|
-
id: "color-picker-value",
|
|
184
|
-
"aria-label": formatMessage({
|
|
185
|
-
id: index.getTrad("color-picker.input.aria-label"),
|
|
186
|
-
defaultMessage: "Color picker input"
|
|
187
|
-
}),
|
|
188
|
-
style: { textTransform: "uppercase" },
|
|
189
|
-
value,
|
|
190
|
-
placeholder: "#000000",
|
|
191
|
-
onChange
|
|
192
|
-
}
|
|
193
|
-
)
|
|
194
|
-
] })
|
|
195
|
-
] })
|
|
196
|
-
}
|
|
197
|
-
),
|
|
198
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldHint, {}),
|
|
199
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldError, {})
|
|
200
|
-
] })
|
|
201
|
-
}
|
|
202
|
-
);
|
|
203
|
-
}
|
|
204
|
-
);
|
|
205
|
-
exports.ColorPickerInput = ColorPickerInput;
|
|
206
|
-
//# sourceMappingURL=ColorPickerInput-0lOoTrf0.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerInput-0lOoTrf0.js","sources":["../../admin/src/hooks/useComposeRefs.ts","../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n *\n * Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n *\n * const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {\n * const ref = useComposedRefs(internalRef, forwardedRef);\n *\n * React.useEffect(() => {\n * ref.current.focus();\n * }, [ref]);\n *\n * return <input ref={ref} />\n * }\n * ```\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import * as React from 'react';\n\nimport {\n BaseButton,\n Box,\n Field,\n FieldError,\n FieldHint,\n FieldInput,\n FieldLabel,\n Flex,\n FocusTrap,\n Popover,\n Typography,\n} from '@strapi/design-system';\nimport { CarretDown } from '@strapi/icons';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useComposedRefs } from '../hooks/useComposeRefs';\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(BaseButton)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\n/**\n * TODO: A lot of these props should extend `FieldProps`\n */\ninterface ColorPickerInputProps {\n intlLabel: MessageDescriptor;\n /**\n * TODO: this should be extended from `FieldInputProps['onChange']\n * but that conflicts with it's secondary usage in `HexColorPicker`\n */\n onChange: (event: { target: { name: string; value: string; type: string } }) => void;\n attribute: { type: string; [key: string]: unknown };\n name: string;\n description?: MessageDescriptor;\n disabled?: boolean;\n error?: string;\n labelAction?: React.ReactNode;\n required?: boolean;\n value?: string;\n}\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n {\n attribute,\n description,\n disabled = false,\n error,\n intlLabel,\n labelAction,\n name,\n onChange,\n required = false,\n value = '',\n },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value || '#000000';\n\n const handleBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n\n if (!e.currentTarget.contains(e.relatedTarget)) {\n setShowColorPicker(false);\n }\n };\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field\n name={name}\n id={name}\n // GenericInput calls formatMessage and returns a string for the error\n error={error}\n hint={description && formatMessage(description)}\n required={required}\n >\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n onClick={() => setShowColorPicker(!showColorPicker)}\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CarretDown aria-hidden />\n </ColorPickerToggle>\n {showColorPicker && (\n <ColorPickerPopover\n onBlur={handleBlur}\n role=\"dialog\"\n source={colorPickerButtonRef}\n spacing={4}\n >\n <FocusTrap onEscape={() => setShowColorPicker(false)}>\n <ColorPicker\n color={color}\n onChange={(hexValue) =>\n onChange({ target: { name, value: hexValue, type: attribute.type } })\n }\n />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" as=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <FieldInput\n id=\"color-picker-value\"\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Flex>\n </FocusTrap>\n </ColorPickerPopover>\n )}\n <FieldHint />\n <FieldError />\n </Flex>\n </Field>\n );\n }\n);\n"],"names":["React","styled","HexColorPicker","BaseButton","Popover","useIntl","jsx","Field","Flex","FieldLabel","jsxs","getTrad","Typography","CarretDown","FocusTrap","Box","FieldInput","FieldHint","FieldError"],"mappings":"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"}
|
|
@@ -1,185 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { BaseButton, Popover, Field, Flex, FieldLabel, Typography, FocusTrap, Box, FieldInput, FieldHint, FieldError } from "@strapi/design-system";
|
|
4
|
-
import { CarretDown } from "@strapi/icons";
|
|
5
|
-
import { HexColorPicker } from "react-colorful";
|
|
6
|
-
import { useIntl } from "react-intl";
|
|
7
|
-
import styled from "styled-components";
|
|
8
|
-
import { g as getTrad } from "./index-uOrtnJpz.mjs";
|
|
9
|
-
import "@strapi/helper-plugin";
|
|
10
|
-
function setRef(ref, value) {
|
|
11
|
-
if (typeof ref === "function") {
|
|
12
|
-
ref(value);
|
|
13
|
-
} else if (ref !== null && ref !== void 0) {
|
|
14
|
-
ref.current = value;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
function composeRefs(...refs) {
|
|
18
|
-
return (node) => refs.forEach((ref) => setRef(ref, node));
|
|
19
|
-
}
|
|
20
|
-
function useComposedRefs(...refs) {
|
|
21
|
-
return React.useCallback(composeRefs(...refs), refs);
|
|
22
|
-
}
|
|
23
|
-
const ColorPreview = styled.div`
|
|
24
|
-
border-radius: 50%;
|
|
25
|
-
width: 20px;
|
|
26
|
-
height: 20px;
|
|
27
|
-
margin-right: 10px;
|
|
28
|
-
background-color: ${(props) => props.color};
|
|
29
|
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
30
|
-
`;
|
|
31
|
-
const ColorPicker = styled(HexColorPicker)`
|
|
32
|
-
&& {
|
|
33
|
-
width: 100%;
|
|
34
|
-
aspect-ratio: 1.5;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.react-colorful__pointer {
|
|
38
|
-
width: ${({ theme }) => theme.spaces[3]};
|
|
39
|
-
height: ${({ theme }) => theme.spaces[3]};
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.react-colorful__saturation {
|
|
43
|
-
border-radius: ${({ theme }) => theme.spaces[1]};
|
|
44
|
-
border-bottom: none;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.react-colorful__hue {
|
|
48
|
-
border-radius: 10px;
|
|
49
|
-
height: ${({ theme }) => theme.spaces[3]};
|
|
50
|
-
margin-top: ${({ theme }) => theme.spaces[2]};
|
|
51
|
-
}
|
|
52
|
-
`;
|
|
53
|
-
const ColorPickerToggle = styled(BaseButton)`
|
|
54
|
-
display: flex;
|
|
55
|
-
justify-content: space-between;
|
|
56
|
-
align-items: center;
|
|
57
|
-
|
|
58
|
-
svg {
|
|
59
|
-
width: ${({ theme }) => theme.spaces[2]};
|
|
60
|
-
height: ${({ theme }) => theme.spaces[2]};
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
svg > path {
|
|
64
|
-
fill: ${({ theme }) => theme.colors.neutral500};
|
|
65
|
-
justify-self: flex-end;
|
|
66
|
-
}
|
|
67
|
-
`;
|
|
68
|
-
const ColorPickerPopover = styled(Popover)`
|
|
69
|
-
padding: ${({ theme }) => theme.spaces[2]};
|
|
70
|
-
min-height: 270px;
|
|
71
|
-
`;
|
|
72
|
-
const ColorPickerInput = React.forwardRef(
|
|
73
|
-
({
|
|
74
|
-
attribute,
|
|
75
|
-
description,
|
|
76
|
-
disabled = false,
|
|
77
|
-
error,
|
|
78
|
-
intlLabel,
|
|
79
|
-
labelAction,
|
|
80
|
-
name,
|
|
81
|
-
onChange,
|
|
82
|
-
required = false,
|
|
83
|
-
value = ""
|
|
84
|
-
}, forwardedRef) => {
|
|
85
|
-
const [showColorPicker, setShowColorPicker] = React.useState(false);
|
|
86
|
-
const colorPickerButtonRef = React.useRef(null);
|
|
87
|
-
const { formatMessage } = useIntl();
|
|
88
|
-
const color = value || "#000000";
|
|
89
|
-
const handleBlur = (e) => {
|
|
90
|
-
e.preventDefault();
|
|
91
|
-
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
92
|
-
setShowColorPicker(false);
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
|
|
96
|
-
return /* @__PURE__ */ jsx(
|
|
97
|
-
Field,
|
|
98
|
-
{
|
|
99
|
-
name,
|
|
100
|
-
id: name,
|
|
101
|
-
error,
|
|
102
|
-
hint: description && formatMessage(description),
|
|
103
|
-
required,
|
|
104
|
-
children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
|
105
|
-
/* @__PURE__ */ jsx(FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }),
|
|
106
|
-
/* @__PURE__ */ jsxs(
|
|
107
|
-
ColorPickerToggle,
|
|
108
|
-
{
|
|
109
|
-
ref: composedRefs,
|
|
110
|
-
"aria-label": formatMessage({
|
|
111
|
-
id: getTrad("color-picker.toggle.aria-label"),
|
|
112
|
-
defaultMessage: "Color picker toggle"
|
|
113
|
-
}),
|
|
114
|
-
"aria-controls": "color-picker-value",
|
|
115
|
-
"aria-haspopup": "dialog",
|
|
116
|
-
"aria-expanded": showColorPicker,
|
|
117
|
-
"aria-disabled": disabled,
|
|
118
|
-
disabled,
|
|
119
|
-
onClick: () => setShowColorPicker(!showColorPicker),
|
|
120
|
-
children: [
|
|
121
|
-
/* @__PURE__ */ jsxs(Flex, { children: [
|
|
122
|
-
/* @__PURE__ */ jsx(ColorPreview, { color }),
|
|
123
|
-
/* @__PURE__ */ jsx(
|
|
124
|
-
Typography,
|
|
125
|
-
{
|
|
126
|
-
style: { textTransform: "uppercase" },
|
|
127
|
-
textColor: value ? void 0 : "neutral600",
|
|
128
|
-
variant: "omega",
|
|
129
|
-
children: color
|
|
130
|
-
}
|
|
131
|
-
)
|
|
132
|
-
] }),
|
|
133
|
-
/* @__PURE__ */ jsx(CarretDown, { "aria-hidden": true })
|
|
134
|
-
]
|
|
135
|
-
}
|
|
136
|
-
),
|
|
137
|
-
showColorPicker && /* @__PURE__ */ jsx(
|
|
138
|
-
ColorPickerPopover,
|
|
139
|
-
{
|
|
140
|
-
onBlur: handleBlur,
|
|
141
|
-
role: "dialog",
|
|
142
|
-
source: colorPickerButtonRef,
|
|
143
|
-
spacing: 4,
|
|
144
|
-
children: /* @__PURE__ */ jsxs(FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
|
|
145
|
-
/* @__PURE__ */ jsx(
|
|
146
|
-
ColorPicker,
|
|
147
|
-
{
|
|
148
|
-
color,
|
|
149
|
-
onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
|
|
150
|
-
}
|
|
151
|
-
),
|
|
152
|
-
/* @__PURE__ */ jsxs(Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
|
|
153
|
-
/* @__PURE__ */ jsx(Box, { paddingRight: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
|
|
154
|
-
id: getTrad("color-picker.input.format"),
|
|
155
|
-
defaultMessage: "HEX"
|
|
156
|
-
}) }) }),
|
|
157
|
-
/* @__PURE__ */ jsx(
|
|
158
|
-
FieldInput,
|
|
159
|
-
{
|
|
160
|
-
id: "color-picker-value",
|
|
161
|
-
"aria-label": formatMessage({
|
|
162
|
-
id: getTrad("color-picker.input.aria-label"),
|
|
163
|
-
defaultMessage: "Color picker input"
|
|
164
|
-
}),
|
|
165
|
-
style: { textTransform: "uppercase" },
|
|
166
|
-
value,
|
|
167
|
-
placeholder: "#000000",
|
|
168
|
-
onChange
|
|
169
|
-
}
|
|
170
|
-
)
|
|
171
|
-
] })
|
|
172
|
-
] })
|
|
173
|
-
}
|
|
174
|
-
),
|
|
175
|
-
/* @__PURE__ */ jsx(FieldHint, {}),
|
|
176
|
-
/* @__PURE__ */ jsx(FieldError, {})
|
|
177
|
-
] })
|
|
178
|
-
}
|
|
179
|
-
);
|
|
180
|
-
}
|
|
181
|
-
);
|
|
182
|
-
export {
|
|
183
|
-
ColorPickerInput
|
|
184
|
-
};
|
|
185
|
-
//# sourceMappingURL=ColorPickerInput-fKB6YXW8.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerInput-fKB6YXW8.mjs","sources":["../../admin/src/hooks/useComposeRefs.ts","../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n *\n * Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n *\n * const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {\n * const ref = useComposedRefs(internalRef, forwardedRef);\n *\n * React.useEffect(() => {\n * ref.current.focus();\n * }, [ref]);\n *\n * return <input ref={ref} />\n * }\n * ```\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import * as React from 'react';\n\nimport {\n BaseButton,\n Box,\n Field,\n FieldError,\n FieldHint,\n FieldInput,\n FieldLabel,\n Flex,\n FocusTrap,\n Popover,\n Typography,\n} from '@strapi/design-system';\nimport { CarretDown } from '@strapi/icons';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useComposedRefs } from '../hooks/useComposeRefs';\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(BaseButton)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\n/**\n * TODO: A lot of these props should extend `FieldProps`\n */\ninterface ColorPickerInputProps {\n intlLabel: MessageDescriptor;\n /**\n * TODO: this should be extended from `FieldInputProps['onChange']\n * but that conflicts with it's secondary usage in `HexColorPicker`\n */\n onChange: (event: { target: { name: string; value: string; type: string } }) => void;\n attribute: { type: string; [key: string]: unknown };\n name: string;\n description?: MessageDescriptor;\n disabled?: boolean;\n error?: string;\n labelAction?: React.ReactNode;\n required?: boolean;\n value?: string;\n}\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n {\n attribute,\n description,\n disabled = false,\n error,\n intlLabel,\n labelAction,\n name,\n onChange,\n required = false,\n value = '',\n },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value || '#000000';\n\n const handleBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n\n if (!e.currentTarget.contains(e.relatedTarget)) {\n setShowColorPicker(false);\n }\n };\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field\n name={name}\n id={name}\n // GenericInput calls formatMessage and returns a string for the error\n error={error}\n hint={description && formatMessage(description)}\n required={required}\n >\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n onClick={() => setShowColorPicker(!showColorPicker)}\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CarretDown aria-hidden />\n </ColorPickerToggle>\n {showColorPicker && (\n <ColorPickerPopover\n onBlur={handleBlur}\n role=\"dialog\"\n source={colorPickerButtonRef}\n spacing={4}\n >\n <FocusTrap onEscape={() => setShowColorPicker(false)}>\n <ColorPicker\n color={color}\n onChange={(hexValue) =>\n onChange({ target: { name, value: hexValue, type: attribute.type } })\n }\n />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" as=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <FieldInput\n id=\"color-picker-value\"\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Flex>\n </FocusTrap>\n </ColorPickerPopover>\n )}\n <FieldHint />\n <FieldError />\n </Flex>\n </Field>\n );\n }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -1,16 +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;
|
|
16
|
-
//# sourceMappingURL=cs-4GdZY0p6.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"cs-4GdZY0p6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
|
|
@@ -1,16 +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
|
-
};
|
|
16
|
-
//# sourceMappingURL=cs-A2xRj-2-.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"cs-A2xRj-2-.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|
|
@@ -1,19 +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
|
-
};
|
|
19
|
-
//# sourceMappingURL=en-L6ZZWDJv.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"en-L6ZZWDJv.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
|