@strapi/plugin-color-picker 0.0.0-next.d7fa025a4eacdc27490fb1629b0efb93e3cb58b9 → 0.0.0-next.dad3c50630ca4fd9eccdcbe549ee632fc572e23d
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/_chunks/ColorPickerInput-BiwD6BEw.mjs +137 -0
- package/dist/_chunks/ColorPickerInput-gD_Mb6qe.js +155 -0
- package/dist/_chunks/{cs-4GdZY0p6.js → cs-CKl0OyEH.js} +0 -1
- package/dist/_chunks/{cs-A2xRj-2-.mjs → cs-DMmE6LK7.mjs} +0 -1
- package/dist/_chunks/{en-L6ZZWDJv.mjs → en-BlDau3us.mjs} +0 -1
- package/dist/_chunks/{en-WeRHjVEB.js → en-Ct0C5cA2.js} +0 -1
- package/dist/_chunks/{index-OJYEuoCq.js → index-CNTxZbMN.js} +21 -12
- package/dist/_chunks/{index-uOrtnJpz.mjs → index-dnY2u5Dg.mjs} +21 -10
- package/dist/_chunks/{ru-UXN_ByI9.js → ru-Wrg-npZz.js} +0 -1
- package/dist/_chunks/{ru-LLXYEOwl.mjs → ru-aOnA-eym.mjs} +0 -1
- package/dist/_chunks/{sv-QqRPNQLw.mjs → sv-BaFDND79.mjs} +0 -1
- package/dist/_chunks/{sv-3-Yk9bKb.js → sv-CKY6es_6.js} +0 -1
- package/dist/_chunks/{tr-qYGSw8gH.mjs → tr-CHHW_hYI.mjs} +0 -1
- package/dist/_chunks/{tr-AbD-f8F0.js → tr-DcLzQS-J.js} +0 -1
- package/dist/_chunks/{zh-fPTOIT6s.mjs → zh-DBH6uCXb.mjs} +0 -1
- package/dist/_chunks/{zh-c23gv_oM.js → zh-T5cJzhPD.js} +0 -1
- package/dist/admin/index.js +1 -7
- package/dist/admin/index.mjs +1 -7
- package/dist/admin/src/components/ColorPickerInput.d.ts +3 -28
- package/dist/admin/src/utils/prefixPluginTranslations.d.ts +3 -0
- package/dist/server/index.js +0 -1
- package/dist/server/index.mjs +0 -1
- package/package.json +21 -23
- 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.map +0 -1
- package/dist/_chunks/cs-A2xRj-2-.mjs.map +0 -1
- package/dist/_chunks/en-L6ZZWDJv.mjs.map +0 -1
- package/dist/_chunks/en-WeRHjVEB.js.map +0 -1
- package/dist/_chunks/index-OJYEuoCq.js.map +0 -1
- package/dist/_chunks/index-uOrtnJpz.mjs.map +0 -1
- package/dist/_chunks/ru-LLXYEOwl.mjs.map +0 -1
- package/dist/_chunks/ru-UXN_ByI9.js.map +0 -1
- package/dist/_chunks/sv-3-Yk9bKb.js.map +0 -1
- package/dist/_chunks/sv-QqRPNQLw.mjs.map +0 -1
- package/dist/_chunks/tr-AbD-f8F0.js.map +0 -1
- package/dist/_chunks/tr-qYGSw8gH.mjs.map +0 -1
- package/dist/_chunks/zh-c23gv_oM.js.map +0 -1
- package/dist/_chunks/zh-fPTOIT6s.mjs.map +0 -1
- package/dist/admin/index.js.map +0 -1
- package/dist/admin/index.mjs.map +0 -1
- package/dist/admin/src/hooks/useComposeRefs.d.ts +0 -29
- package/dist/server/index.js.map +0 -1
- package/dist/server/index.mjs.map +0 -1
- package/strapi-server.js +0 -3
|
@@ -0,0 +1,137 @@
|
|
|
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
|
+
};
|
|
@@ -0,0 +1,155 @@
|
|
|
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,21 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const helperPlugin = require("@strapi/helper-plugin");
|
|
3
2
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
3
|
const designSystem = require("@strapi/design-system");
|
|
5
4
|
const icons = require("@strapi/icons");
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const styled__default = /* @__PURE__ */ _interopDefault(styled);
|
|
9
|
-
const __variableDynamicImportRuntimeHelper = (glob, path) => {
|
|
5
|
+
const styledComponents = require("styled-components");
|
|
6
|
+
const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
|
|
10
7
|
const v = glob[path];
|
|
11
8
|
if (v) {
|
|
12
9
|
return typeof v === "function" ? v() : Promise.resolve(v);
|
|
13
10
|
}
|
|
14
11
|
return new Promise((_, reject) => {
|
|
15
|
-
(typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
|
|
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
|
+
);
|
|
16
20
|
});
|
|
17
21
|
};
|
|
18
|
-
const IconBox =
|
|
22
|
+
const IconBox = styledComponents.styled(designSystem.Flex)`
|
|
19
23
|
/* Hard code color values */
|
|
20
24
|
/* to stay consistent between themes */
|
|
21
25
|
background-color: #f0f0ff; /* primary100 */
|
|
@@ -26,10 +30,16 @@ const IconBox = styled__default.default(designSystem.Flex)`
|
|
|
26
30
|
}
|
|
27
31
|
`;
|
|
28
32
|
const ColorPickerIcon = () => {
|
|
29
|
-
return /* @__PURE__ */ jsxRuntime.jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
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, {}) });
|
|
30
34
|
};
|
|
31
35
|
const pluginId = "color-picker";
|
|
32
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
|
+
};
|
|
33
43
|
const index = {
|
|
34
44
|
/**
|
|
35
45
|
* TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.
|
|
@@ -50,7 +60,7 @@ const index = {
|
|
|
50
60
|
defaultMessage: "Select any color"
|
|
51
61
|
},
|
|
52
62
|
components: {
|
|
53
|
-
Input: async () => Promise.resolve().then(() => require("./ColorPickerInput-
|
|
63
|
+
Input: async () => Promise.resolve().then(() => require("./ColorPickerInput-gD_Mb6qe.js")).then((module2) => ({
|
|
54
64
|
default: module2.ColorPickerInput
|
|
55
65
|
}))
|
|
56
66
|
},
|
|
@@ -96,9 +106,9 @@ const index = {
|
|
|
96
106
|
async registerTrads({ locales }) {
|
|
97
107
|
const importedTrads = await Promise.all(
|
|
98
108
|
locales.map((locale) => {
|
|
99
|
-
return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/cs.json": () => Promise.resolve().then(() => require("./cs-
|
|
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 }) => {
|
|
100
110
|
return {
|
|
101
|
-
data:
|
|
111
|
+
data: prefixPluginTranslations(data, pluginId),
|
|
102
112
|
locale
|
|
103
113
|
};
|
|
104
114
|
}).catch(() => {
|
|
@@ -114,4 +124,3 @@ const index = {
|
|
|
114
124
|
};
|
|
115
125
|
exports.getTrad = getTrad;
|
|
116
126
|
exports.index = index;
|
|
117
|
-
//# sourceMappingURL=index-OJYEuoCq.js.map
|
|
@@ -1,15 +1,21 @@
|
|
|
1
|
-
import { prefixPluginTranslations } from "@strapi/helper-plugin";
|
|
2
1
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Flex
|
|
4
|
-
import {
|
|
5
|
-
import styled from "styled-components";
|
|
6
|
-
const __variableDynamicImportRuntimeHelper = (glob, path) => {
|
|
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) => {
|
|
7
6
|
const v = glob[path];
|
|
8
7
|
if (v) {
|
|
9
8
|
return typeof v === "function" ? v() : Promise.resolve(v);
|
|
10
9
|
}
|
|
11
10
|
return new Promise((_, reject) => {
|
|
12
|
-
(typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
|
|
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
|
+
);
|
|
13
19
|
});
|
|
14
20
|
};
|
|
15
21
|
const IconBox = styled(Flex)`
|
|
@@ -23,10 +29,16 @@ const IconBox = styled(Flex)`
|
|
|
23
29
|
}
|
|
24
30
|
`;
|
|
25
31
|
const ColorPickerIcon = () => {
|
|
26
|
-
return /* @__PURE__ */ jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsx(
|
|
32
|
+
return /* @__PURE__ */ jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsx(PaintBrush, {}) });
|
|
27
33
|
};
|
|
28
34
|
const pluginId = "color-picker";
|
|
29
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
|
+
};
|
|
30
42
|
const index = {
|
|
31
43
|
/**
|
|
32
44
|
* TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.
|
|
@@ -47,7 +59,7 @@ const index = {
|
|
|
47
59
|
defaultMessage: "Select any color"
|
|
48
60
|
},
|
|
49
61
|
components: {
|
|
50
|
-
Input: async () => import("./ColorPickerInput-
|
|
62
|
+
Input: async () => import("./ColorPickerInput-BiwD6BEw.mjs").then((module) => ({
|
|
51
63
|
default: module.ColorPickerInput
|
|
52
64
|
}))
|
|
53
65
|
},
|
|
@@ -93,7 +105,7 @@ const index = {
|
|
|
93
105
|
async registerTrads({ locales }) {
|
|
94
106
|
const importedTrads = await Promise.all(
|
|
95
107
|
locales.map((locale) => {
|
|
96
|
-
return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/cs.json": () => import("./cs-
|
|
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 }) => {
|
|
97
109
|
return {
|
|
98
110
|
data: prefixPluginTranslations(data, pluginId),
|
|
99
111
|
locale
|
|
@@ -113,4 +125,3 @@ export {
|
|
|
113
125
|
getTrad as g,
|
|
114
126
|
index as i
|
|
115
127
|
};
|
|
116
|
-
//# sourceMappingURL=index-uOrtnJpz.mjs.map
|
package/dist/admin/index.js
CHANGED
|
@@ -1,9 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const index = require("../_chunks/index-
|
|
3
|
-
require("@strapi/helper-plugin");
|
|
4
|
-
require("react/jsx-runtime");
|
|
5
|
-
require("@strapi/design-system");
|
|
6
|
-
require("@strapi/icons");
|
|
7
|
-
require("styled-components");
|
|
2
|
+
const index = require("../_chunks/index-CNTxZbMN.js");
|
|
8
3
|
module.exports = index.index;
|
|
9
|
-
//# sourceMappingURL=index.js.map
|
package/dist/admin/index.mjs
CHANGED
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
import { i } from "../_chunks/index-
|
|
2
|
-
import "@strapi/helper-plugin";
|
|
3
|
-
import "react/jsx-runtime";
|
|
4
|
-
import "@strapi/design-system";
|
|
5
|
-
import "@strapi/icons";
|
|
6
|
-
import "styled-components";
|
|
1
|
+
import { i } from "../_chunks/index-dnY2u5Dg.mjs";
|
|
7
2
|
export {
|
|
8
3
|
i as default
|
|
9
4
|
};
|
|
10
|
-
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,32 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
* TODO: A lot of these props should extend `FieldProps`
|
|
5
|
-
*/
|
|
6
|
-
interface ColorPickerInputProps {
|
|
7
|
-
intlLabel: MessageDescriptor;
|
|
8
|
-
/**
|
|
9
|
-
* TODO: this should be extended from `FieldInputProps['onChange']
|
|
10
|
-
* but that conflicts with it's secondary usage in `HexColorPicker`
|
|
11
|
-
*/
|
|
12
|
-
onChange: (event: {
|
|
13
|
-
target: {
|
|
14
|
-
name: string;
|
|
15
|
-
value: string;
|
|
16
|
-
type: string;
|
|
17
|
-
};
|
|
18
|
-
}) => void;
|
|
19
|
-
attribute: {
|
|
20
|
-
type: string;
|
|
21
|
-
[key: string]: unknown;
|
|
22
|
-
};
|
|
23
|
-
name: string;
|
|
24
|
-
description?: MessageDescriptor;
|
|
25
|
-
disabled?: boolean;
|
|
26
|
-
error?: string;
|
|
2
|
+
import { type InputProps } from '@strapi/strapi/admin';
|
|
3
|
+
type ColorPickerInputProps = InputProps & {
|
|
27
4
|
labelAction?: React.ReactNode;
|
|
28
|
-
|
|
29
|
-
value?: string;
|
|
30
|
-
}
|
|
5
|
+
};
|
|
31
6
|
export declare const ColorPickerInput: React.ForwardRefExoticComponent<ColorPickerInputProps & React.RefAttributes<HTMLButtonElement>>;
|
|
32
7
|
export {};
|
package/dist/server/index.js
CHANGED
package/dist/server/index.mjs
CHANGED