@elementor/editor-variables 0.1.0 → 0.2.0
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/CHANGELOG.md +20 -0
- package/dist/index.js +188 -41
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +198 -40
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -6
- package/src/components/color-indicator.tsx +5 -0
- package/src/components/variables-selection-popover.tsx +79 -0
- package/src/components/variables-selection.tsx +61 -9
- package/src/controls/variables-selection-control.tsx +16 -35
- package/src/hooks/use-prop-variables.ts +74 -0
- package/src/types.ts +5 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @elementor/editor-variables
|
|
2
2
|
|
|
3
|
+
## 0.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- c03f495: Popover with the list of variables
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- ca016cc: Elementor ui update to version 1.34.2, elementor icons update to 1.40.1
|
|
12
|
+
- Updated dependencies [f4deb05]
|
|
13
|
+
- Updated dependencies [9e7a3ee]
|
|
14
|
+
- Updated dependencies [ca016cc]
|
|
15
|
+
- Updated dependencies [233825c]
|
|
16
|
+
- Updated dependencies [baf662e]
|
|
17
|
+
- Updated dependencies [18741b8]
|
|
18
|
+
- Updated dependencies [ca5d620]
|
|
19
|
+
- @elementor/editor-controls@0.28.0
|
|
20
|
+
- @elementor/editor-editing-panel@1.31.0
|
|
21
|
+
- @elementor/editor-canvas@0.19.1
|
|
22
|
+
|
|
3
23
|
## 0.1.0
|
|
4
24
|
|
|
5
25
|
### Minor Changes
|
package/dist/index.js
CHANGED
|
@@ -39,61 +39,208 @@ var import_editor_canvas2 = require("@elementor/editor-canvas");
|
|
|
39
39
|
var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
|
|
40
40
|
|
|
41
41
|
// src/controls/variables-selection-control.tsx
|
|
42
|
+
var React3 = __toESM(require("react"));
|
|
43
|
+
var import_editor_controls2 = require("@elementor/editor-controls");
|
|
44
|
+
|
|
45
|
+
// src/components/variables-selection.tsx
|
|
42
46
|
var React = __toESM(require("react"));
|
|
47
|
+
var import_react2 = require("react");
|
|
43
48
|
var import_editor_controls = require("@elementor/editor-controls");
|
|
44
49
|
var import_icons = require("@elementor/icons");
|
|
45
|
-
var
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
var import_ui2 = require("@elementor/ui");
|
|
51
|
+
|
|
52
|
+
// src/hooks/use-prop-variables.ts
|
|
53
|
+
var import_react = require("react");
|
|
54
|
+
var usePropVariables = () => {
|
|
55
|
+
return (0, import_react.useMemo)(() => getVariables(), []);
|
|
56
|
+
};
|
|
57
|
+
var useVariable = (key) => {
|
|
58
|
+
if (!variables[key]) {
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
return {
|
|
62
|
+
...variables[key],
|
|
63
|
+
key
|
|
53
64
|
};
|
|
54
|
-
return /* @__PURE__ */ React.createElement(import_ui.Box, null, /* @__PURE__ */ React.createElement(
|
|
55
|
-
import_ui.UnstableTag,
|
|
56
|
-
{
|
|
57
|
-
fullWidth: true,
|
|
58
|
-
showActionsOnHover: true,
|
|
59
|
-
startIcon: /* @__PURE__ */ React.createElement(import_ui.Stack, { spacing: 1, direction: "row", alignItems: "center" }, /* @__PURE__ */ React.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React.createElement(import_icons.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
|
|
60
|
-
label: /* @__PURE__ */ React.createElement(import_ui.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React.createElement(import_ui.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
|
|
61
|
-
actions: /* @__PURE__ */ React.createElement(import_ui.IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": (0, import_i18n.__)("Unlink", "elementor") }, /* @__PURE__ */ React.createElement(import_icons.DetachIcon, { fontSize: "tiny" }))
|
|
62
|
-
}
|
|
63
|
-
));
|
|
64
65
|
};
|
|
65
|
-
var
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
66
|
+
var getVariables = () => {
|
|
67
|
+
return normalizeVariables();
|
|
68
|
+
};
|
|
69
|
+
var normalizeVariables = () => {
|
|
70
|
+
return Object.entries(variables).map(([key, { label, value }]) => ({
|
|
71
|
+
key,
|
|
72
|
+
label,
|
|
73
|
+
value
|
|
74
|
+
}));
|
|
75
|
+
};
|
|
76
|
+
var variables = {
|
|
77
|
+
"e-gc-001": {
|
|
78
|
+
value: "#ffffff",
|
|
79
|
+
label: "Main: white"
|
|
80
|
+
},
|
|
81
|
+
"e-gc-002": {
|
|
82
|
+
value: "#000000",
|
|
83
|
+
label: "Main: black"
|
|
84
|
+
},
|
|
85
|
+
"e-gc-a01": {
|
|
86
|
+
value: "#FF0000",
|
|
87
|
+
label: "Danger: red"
|
|
88
|
+
},
|
|
89
|
+
"e-gc-a02": {
|
|
90
|
+
value: "#0000FF",
|
|
91
|
+
label: "Informative: blue"
|
|
92
|
+
},
|
|
93
|
+
"e-gc-a03": {
|
|
94
|
+
value: "#FF7BE5",
|
|
95
|
+
label: "Elementor: pint"
|
|
96
|
+
},
|
|
97
|
+
"e-gc-a04": {
|
|
98
|
+
value: "#808080",
|
|
99
|
+
label: "Gray: background"
|
|
100
|
+
},
|
|
101
|
+
"e-gc-b01": {
|
|
102
|
+
value: "#213555",
|
|
103
|
+
label: "Navy: primary"
|
|
104
|
+
},
|
|
105
|
+
"e-gc-b02": {
|
|
106
|
+
value: "#3E5879",
|
|
107
|
+
label: "Navy: secondary"
|
|
108
|
+
},
|
|
109
|
+
"e-gc-b03": {
|
|
110
|
+
value: "#D8C4B6",
|
|
111
|
+
label: "Navy: light"
|
|
112
|
+
},
|
|
113
|
+
"e-gc-b04": {
|
|
114
|
+
value: "#F5EFE7",
|
|
115
|
+
label: "Navy long text variable name: background"
|
|
116
|
+
}
|
|
117
|
+
};
|
|
80
118
|
|
|
81
119
|
// src/prop-types/color-variable-prop-type.ts
|
|
82
120
|
var import_editor_props = require("@elementor/editor-props");
|
|
83
121
|
var import_schema = require("@elementor/schema");
|
|
84
122
|
var colorVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-color-variable", import_schema.z.string());
|
|
85
123
|
|
|
124
|
+
// src/components/color-indicator.tsx
|
|
125
|
+
var import_ui = require("@elementor/ui");
|
|
126
|
+
var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
|
|
127
|
+
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
128
|
+
}));
|
|
129
|
+
|
|
86
130
|
// src/components/variables-selection.tsx
|
|
87
131
|
var VariablesSelection = ({ onSelect }) => {
|
|
88
|
-
const { setValue: setVariable } = (0,
|
|
89
|
-
const
|
|
90
|
-
|
|
91
|
-
setVariable(
|
|
132
|
+
const { value: variable, setValue: setVariable } = (0, import_editor_controls.useBoundProp)(colorVariablePropTypeUtil);
|
|
133
|
+
const variables2 = usePropVariables();
|
|
134
|
+
const handleSetVariable = (newValue) => {
|
|
135
|
+
setVariable(newValue.key);
|
|
92
136
|
onSelect?.();
|
|
93
137
|
};
|
|
94
|
-
return /* @__PURE__ */
|
|
138
|
+
return /* @__PURE__ */ React.createElement(import_react2.Fragment, null, /* @__PURE__ */ React.createElement(import_ui2.Divider, null), /* @__PURE__ */ React.createElement(import_ui2.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React.createElement(import_ui2.MenuList, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React.createElement(
|
|
139
|
+
StyledMenuItem,
|
|
140
|
+
{
|
|
141
|
+
key,
|
|
142
|
+
onClick: () => handleSetVariable({ value, label, key }),
|
|
143
|
+
selected: key === variable
|
|
144
|
+
},
|
|
145
|
+
/* @__PURE__ */ React.createElement(import_ui2.ListItemIcon, null, /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", component: "span", value })),
|
|
146
|
+
/* @__PURE__ */ React.createElement(
|
|
147
|
+
import_ui2.ListItemText,
|
|
148
|
+
{
|
|
149
|
+
primary: label,
|
|
150
|
+
secondary: value,
|
|
151
|
+
primaryTypographyProps: {
|
|
152
|
+
variant: "body2",
|
|
153
|
+
color: "text.secondary",
|
|
154
|
+
style: {
|
|
155
|
+
lineHeight: 2,
|
|
156
|
+
display: "inline-block",
|
|
157
|
+
overflow: "hidden",
|
|
158
|
+
textOverflow: "ellipsis",
|
|
159
|
+
whiteSpace: "nowrap",
|
|
160
|
+
maxWidth: "81px"
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
secondaryTypographyProps: {
|
|
164
|
+
variant: "caption",
|
|
165
|
+
color: "text.tertiary",
|
|
166
|
+
style: { marginTop: "1px", lineHeight: "1" }
|
|
167
|
+
},
|
|
168
|
+
sx: { display: "flex", alignItems: "center", gap: 1 }
|
|
169
|
+
}
|
|
170
|
+
),
|
|
171
|
+
/* @__PURE__ */ React.createElement(import_icons.EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
|
|
172
|
+
)))));
|
|
173
|
+
};
|
|
174
|
+
var StyledMenuItem = (0, import_ui2.styled)(import_ui2.MenuItem)(() => ({
|
|
175
|
+
pl: 2,
|
|
176
|
+
pr: 1,
|
|
177
|
+
py: 0.5,
|
|
178
|
+
"&:hover .MuiSvgIcon-root": {
|
|
179
|
+
opacity: 1
|
|
180
|
+
}
|
|
181
|
+
}));
|
|
182
|
+
|
|
183
|
+
// src/components/variables-selection-popover.tsx
|
|
184
|
+
var React2 = __toESM(require("react"));
|
|
185
|
+
var import_react3 = require("react");
|
|
186
|
+
var import_icons2 = require("@elementor/icons");
|
|
187
|
+
var import_ui3 = require("@elementor/ui");
|
|
188
|
+
var import_i18n = require("@wordpress/i18n");
|
|
189
|
+
var VariablesSelectionPopover = ({ selectedVariable, unlinkVariable, children }) => {
|
|
190
|
+
const id = (0, import_react3.useId)();
|
|
191
|
+
const popupState = (0, import_ui3.usePopupState)({ variant: "popover", popupId: `elementor-variables-action-${id}` });
|
|
192
|
+
const closePopover = () => popupState.close();
|
|
193
|
+
const { value, label } = selectedVariable;
|
|
194
|
+
return /* @__PURE__ */ React2.createElement(import_ui3.Box, null, /* @__PURE__ */ React2.createElement(
|
|
195
|
+
import_ui3.UnstableTag,
|
|
196
|
+
{
|
|
197
|
+
fullWidth: true,
|
|
198
|
+
showActionsOnHover: true,
|
|
199
|
+
...(0, import_ui3.bindTrigger)(popupState),
|
|
200
|
+
startIcon: /* @__PURE__ */ React2.createElement(import_ui3.Stack, { spacing: 1, direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(ColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React2.createElement(import_icons2.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
|
|
201
|
+
label: /* @__PURE__ */ React2.createElement(import_ui3.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React2.createElement(import_ui3.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
|
|
202
|
+
actions: /* @__PURE__ */ React2.createElement(import_ui3.IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": (0, import_i18n.__)("Unlink", "elementor") }, /* @__PURE__ */ React2.createElement(import_icons2.DetachIcon, { fontSize: "tiny" }))
|
|
203
|
+
}
|
|
204
|
+
), /* @__PURE__ */ React2.createElement(
|
|
205
|
+
import_ui3.Popover,
|
|
206
|
+
{
|
|
207
|
+
disableScrollLock: true,
|
|
208
|
+
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
209
|
+
transformOrigin: { vertical: "top", horizontal: "center" },
|
|
210
|
+
...(0, import_ui3.bindPopover)(popupState)
|
|
211
|
+
},
|
|
212
|
+
/* @__PURE__ */ React2.createElement(import_ui3.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React2.createElement(import_icons2.ColorFilterIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React2.createElement(import_ui3.Typography, { variant: "subtitle2" }, (0, import_i18n.__)("Variables", "elementor")), /* @__PURE__ */ React2.createElement(
|
|
213
|
+
import_ui3.CloseButton,
|
|
214
|
+
{
|
|
215
|
+
slotProps: { icon: { fontSize: "tiny" } },
|
|
216
|
+
sx: { ml: "auto" },
|
|
217
|
+
onClick: closePopover
|
|
218
|
+
}
|
|
219
|
+
)),
|
|
220
|
+
children({ closePopover })
|
|
221
|
+
));
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
// src/controls/variables-selection-control.tsx
|
|
225
|
+
var VariablesSelectionControl = () => {
|
|
226
|
+
const { setValue } = (0, import_editor_controls2.useBoundProp)();
|
|
227
|
+
const { value: variableValue } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
|
|
228
|
+
const unlinkVariable = () => {
|
|
229
|
+
setValue("");
|
|
230
|
+
};
|
|
231
|
+
const selectedVariable = useVariable(variableValue);
|
|
232
|
+
if (!selectedVariable) {
|
|
233
|
+
throw new Error(`Global color variable ${variableValue} not found`);
|
|
234
|
+
}
|
|
235
|
+
return /* @__PURE__ */ React3.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React3.createElement(VariablesSelection, { onSelect: closePopover }));
|
|
95
236
|
};
|
|
96
237
|
|
|
238
|
+
// src/hooks/use-prop-variable-action.tsx
|
|
239
|
+
var React4 = __toESM(require("react"));
|
|
240
|
+
var import_editor_editing_panel = require("@elementor/editor-editing-panel");
|
|
241
|
+
var import_icons3 = require("@elementor/icons");
|
|
242
|
+
var import_i18n2 = require("@wordpress/i18n");
|
|
243
|
+
|
|
97
244
|
// src/utils.ts
|
|
98
245
|
var hasAssignedVariable = (propValue) => {
|
|
99
246
|
return !!colorVariablePropTypeUtil.isValid(propValue);
|
|
@@ -108,9 +255,9 @@ var usePropVariableAction = () => {
|
|
|
108
255
|
const visible = !!propType && supportsVariables(propType);
|
|
109
256
|
return {
|
|
110
257
|
visible,
|
|
111
|
-
icon:
|
|
112
|
-
title: (0,
|
|
113
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
258
|
+
icon: import_icons3.ColorFilterIcon,
|
|
259
|
+
title: (0, import_i18n2.__)("Variables", "elementor"),
|
|
260
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React4.createElement(VariablesSelection, { onSelect: closePopover })
|
|
114
261
|
};
|
|
115
262
|
};
|
|
116
263
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/controls/variables-selection-control.tsx","../src/hooks/use-prop-variable-action.tsx","../src/components/variables-selection.tsx","../src/prop-types/color-variable-prop-type.ts","../src/utils.ts","../src/transformers/variable-transformer.ts"],"sourcesContent":["export { init } from './init';\n","import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { VariablesSelectionControl } from './controls/variables-selection-control';\nimport { usePropVariableAction } from './hooks/use-prop-variable-action';\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function init() {\n\tregisterControlReplacement( {\n\t\tcomponent: VariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'variables',\n\t\tuseProps: usePropVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { ColorFilterIcon, DetachIcon } from '@elementor/icons';\nimport { Box, IconButton, Stack, styled, Typography, UnstableColorIndicator, UnstableTag as Tag } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const VariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\n\tconst value = '#FF7BE5';\n\tconst label = 'Light Fuchsia Pink';\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( null );\n\t};\n\n\treturn (\n\t\t<Box>\n\t\t\t<Tag\n\t\t\t\tfullWidth\n\t\t\t\tshowActionsOnHover\n\t\t\t\tstartIcon={\n\t\t\t\t\t<Stack spacing={ 1 } direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<StyledUnstableColorIndicator size=\"inherit\" component=\"span\" value={ value } />\n\t\t\t\t\t\t<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t}\n\t\t\t\tlabel={\n\t\t\t\t\t<Box sx={ { display: 'inline-grid' } }>\n\t\t\t\t\t\t<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant=\"subtitle2\">\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t\tactions={\n\t\t\t\t\t<IconButton size={ 'tiny' } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ 'tiny' } />\n\t\t\t\t\t</IconButton>\n\t\t\t\t}\n\t\t\t/>\n\t\t</Box>\n\t);\n};\n\nconst StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {\n\tborderRadius: `${ theme.shape.borderRadius / 2 }px`,\n} ) );\n","import * as React from 'react';\nimport { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\n\nimport { VariablesSelection } from '../components/variables-selection';\nimport { supportsVariables } from '../utils';\n\nexport const usePropVariableAction = (): PopoverActionProps => {\n\tconst { propType } = useBoundProp();\n\n\tconst visible = !! propType && supportsVariables( propType );\n\n\treturn {\n\t\tvisible,\n\t\ticon: ColorFilterIcon,\n\t\ttitle: __( 'Variables', 'elementor' ),\n\t\tpopoverContent: ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } />,\n\t};\n};\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { Box, MenuItem } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const VariablesSelection = ( { onSelect }: Props ) => {\n\tconst { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst handleSetVariable = () => {\n\t\tconst value = colorVariablePropTypeUtil.create( '' );\n\n\t\tsetVariable( value.value );\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t<MenuItem onClick={ handleSetVariable }>{ __( 'Variables', 'elementor' ) }</MenuItem>\n\t\t</Box>\n\t);\n};\n","import { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const colorVariablePropTypeUtil = createPropUtils( 'global-color-variable', z.string() );\n","import { type PropType, type PropValue } from '@elementor/editor-props';\n\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\n\nexport const hasAssignedVariable = ( propValue: PropValue ): boolean => {\n\treturn !! colorVariablePropTypeUtil.isValid( propValue );\n};\n\nexport const supportsVariables = ( propType: PropType ): boolean => {\n\treturn propType.kind === 'union' && colorVariablePropTypeUtil.key in propType.prop_types;\n};\n","import { createTransformer } from '@elementor/editor-canvas';\n\nexport const variableTransformer = createTransformer( ( value: string ) => {\n\tif ( ! value.trim() ) {\n\t\treturn null;\n\t}\n\n\treturn `var(--${ value })`;\n} );\n"],"mappings":"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","names":["import_editor_canvas","import_editor_editing_panel","Tag","React","import_icons","import_i18n","React","import_editor_controls","import_ui","import_i18n"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/controls/variables-selection-control.tsx","../src/components/variables-selection.tsx","../src/hooks/use-prop-variables.ts","../src/prop-types/color-variable-prop-type.ts","../src/components/color-indicator.tsx","../src/components/variables-selection-popover.tsx","../src/hooks/use-prop-variable-action.tsx","../src/utils.ts","../src/transformers/variable-transformer.ts"],"sourcesContent":["export { init } from './init';\n","import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { VariablesSelectionControl } from './controls/variables-selection-control';\nimport { usePropVariableAction } from './hooks/use-prop-variable-action';\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function init() {\n\tregisterControlReplacement( {\n\t\tcomponent: VariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'variables',\n\t\tuseProps: usePropVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\n\nimport { VariablesSelection } from '../components/variables-selection';\nimport { VariablesSelectionPopover } from '../components/variables-selection-popover';\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\nexport const VariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( '' );\n\t};\n\n\tconst selectedVariable = useVariable( variableValue );\n\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global color variable ${ variableValue } not found` );\n\t}\n\n\treturn (\n\t\t<VariablesSelectionPopover selectedVariable={ selectedVariable } unlinkVariable={ unlinkVariable }>\n\t\t\t{ ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } /> }\n\t\t</VariablesSelectionPopover>\n\t);\n};\n","import * as React from 'react';\nimport { Fragment } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { EditIcon } from '@elementor/icons';\nimport { Box, Divider, ListItemIcon, ListItemText, MenuItem, MenuList, styled } from '@elementor/ui';\n\nimport { usePropVariables } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\nimport { type Variable } from '../types';\nimport { ColorIndicator } from './color-indicator';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const VariablesSelection = ( { onSelect }: Props ) => {\n\tconst { value: variable, setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst variables = usePropVariables();\n\n\tconst handleSetVariable = ( newValue: Variable ) => {\n\t\tsetVariable( newValue.key );\n\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Divider />\n\t\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t\t<MenuList role=\"listbox\" tabIndex={ 0 }>\n\t\t\t\t\t{ variables.map( ( { value, label, key } ) => (\n\t\t\t\t\t\t<StyledMenuItem\n\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\tonClick={ () => handleSetVariable( { value, label, key } ) }\n\t\t\t\t\t\t\tselected={ key === variable }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ListItemIcon>\n\t\t\t\t\t\t\t\t<ColorIndicator size=\"inherit\" component=\"span\" value={ value } />\n\t\t\t\t\t\t\t</ListItemIcon>\n\t\t\t\t\t\t\t<ListItemText\n\t\t\t\t\t\t\t\tprimary={ label }\n\t\t\t\t\t\t\t\tsecondary={ value }\n\t\t\t\t\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'body2',\n\t\t\t\t\t\t\t\t\tcolor: 'text.secondary',\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tlineHeight: 2,\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t\t\t\t\t\tmaxWidth: '81px',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsecondaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'caption',\n\t\t\t\t\t\t\t\t\tcolor: 'text.tertiary',\n\t\t\t\t\t\t\t\t\tstyle: { marginTop: '1px', lineHeight: '1' },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsx={ { display: 'flex', alignItems: 'center', gap: 1 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<EditIcon color=\"action\" fontSize=\"inherit\" sx={ { mx: 1, opacity: '0' } } />\n\t\t\t\t\t\t</StyledMenuItem>\n\t\t\t\t\t) ) }\n\t\t\t\t</MenuList>\n\t\t\t</Box>\n\t\t</Fragment>\n\t);\n};\n\nconst StyledMenuItem = styled( MenuItem )( () => ( {\n\tpl: 2,\n\tpr: 1,\n\tpy: 0.5,\n\t'&:hover .MuiSvgIcon-root': {\n\t\topacity: 1,\n\t},\n} ) );\n","import { useMemo } from 'react';\n\nimport { type Variable } from '../types';\n\nexport const usePropVariables = () => {\n\treturn useMemo( () => getVariables(), [] );\n};\n\nexport const useVariable = ( key: string ) => {\n\tif ( ! variables[ key ] ) {\n\t\treturn null;\n\t}\n\n\treturn {\n\t\t...variables[ key ],\n\t\tkey,\n\t};\n};\n\nconst getVariables = (): Variable[] => {\n\treturn normalizeVariables();\n};\n\nconst normalizeVariables = () => {\n\treturn Object.entries( variables ).map( ( [ key, { label, value } ] ) => ( {\n\t\tkey,\n\t\tlabel,\n\t\tvalue,\n\t} ) );\n};\n\nconst variables: Record< string, { value: string; label: string } > = {\n\t'e-gc-001': {\n\t\tvalue: '#ffffff',\n\t\tlabel: 'Main: white',\n\t},\n\t'e-gc-002': {\n\t\tvalue: '#000000',\n\t\tlabel: 'Main: black',\n\t},\n\t'e-gc-a01': {\n\t\tvalue: '#FF0000',\n\t\tlabel: 'Danger: red',\n\t},\n\t'e-gc-a02': {\n\t\tvalue: '#0000FF',\n\t\tlabel: 'Informative: blue',\n\t},\n\t'e-gc-a03': {\n\t\tvalue: '#FF7BE5',\n\t\tlabel: 'Elementor: pint',\n\t},\n\t'e-gc-a04': {\n\t\tvalue: '#808080',\n\t\tlabel: 'Gray: background',\n\t},\n\n\t'e-gc-b01': {\n\t\tvalue: '#213555',\n\t\tlabel: 'Navy: primary',\n\t},\n\t'e-gc-b02': {\n\t\tvalue: '#3E5879',\n\t\tlabel: 'Navy: secondary',\n\t},\n\t'e-gc-b03': {\n\t\tvalue: '#D8C4B6',\n\t\tlabel: 'Navy: light',\n\t},\n\t'e-gc-b04': {\n\t\tvalue: '#F5EFE7',\n\t\tlabel: 'Navy long text variable name: background',\n\t},\n};\n","import { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const colorVariablePropTypeUtil = createPropUtils( 'global-color-variable', z.string() );\n","import { styled, UnstableColorIndicator } from '@elementor/ui';\n\nexport const ColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {\n\tborderRadius: `${ theme.shape.borderRadius / 2 }px`,\n} ) );\n","import * as React from 'react';\nimport { useId } from 'react';\nimport { ColorFilterIcon, DetachIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tBox,\n\tCloseButton,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTypography,\n\tUnstableTag as Tag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type Variable } from '../types';\nimport { ColorIndicator } from './color-indicator';\n\ntype Props = {\n\tselectedVariable: Variable;\n\tunlinkVariable: () => void;\n\tchildren: ( { closePopover }: { closePopover: () => void } ) => React.ReactNode;\n};\n\nexport const VariablesSelectionPopover = ( { selectedVariable, unlinkVariable, children }: Props ) => {\n\tconst id = useId();\n\tconst popupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-action-${ id }` } );\n\n\tconst closePopover = () => popupState.close();\n\n\tconst { value, label } = selectedVariable;\n\n\treturn (\n\t\t<Box>\n\t\t\t<Tag\n\t\t\t\tfullWidth\n\t\t\t\tshowActionsOnHover\n\t\t\t\t{ ...bindTrigger( popupState ) }\n\t\t\t\tstartIcon={\n\t\t\t\t\t<Stack spacing={ 1 } direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<ColorIndicator size=\"inherit\" component=\"span\" value={ value } />\n\t\t\t\t\t\t<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t}\n\t\t\t\tlabel={\n\t\t\t\t\t<Box sx={ { display: 'inline-grid' } }>\n\t\t\t\t\t\t<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant=\"subtitle2\">\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t\tactions={\n\t\t\t\t\t<IconButton size={ 'tiny' } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ 'tiny' } />\n\t\t\t\t\t</IconButton>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Popover\n\t\t\t\tdisableScrollLock\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'center' } }\n\t\t\t\t{ ...bindPopover( popupState ) }\n\t\t\t>\n\t\t\t\t<Stack direction=\"row\" alignItems=\"center\" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>\n\t\t\t\t\t<ColorFilterIcon fontSize={ 'tiny' } sx={ { mr: 0.5 } } />\n\t\t\t\t\t<Typography variant=\"subtitle2\">{ __( 'Variables', 'elementor' ) }</Typography>\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\tslotProps={ { icon: { fontSize: 'tiny' } } }\n\t\t\t\t\t\tsx={ { ml: 'auto' } }\n\t\t\t\t\t\tonClick={ closePopover }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t\t{ children( { closePopover } ) }\n\t\t\t</Popover>\n\t\t</Box>\n\t);\n};\n","import * as React from 'react';\nimport { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\n\nimport { VariablesSelection } from '../components/variables-selection';\nimport { supportsVariables } from '../utils';\n\nexport const usePropVariableAction = (): PopoverActionProps => {\n\tconst { propType } = useBoundProp();\n\n\tconst visible = !! propType && supportsVariables( propType );\n\n\treturn {\n\t\tvisible,\n\t\ticon: ColorFilterIcon,\n\t\ttitle: __( 'Variables', 'elementor' ),\n\t\tpopoverContent: ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } />,\n\t};\n};\n","import { type PropType, type PropValue } from '@elementor/editor-props';\n\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\n\nexport const hasAssignedVariable = ( propValue: PropValue ): boolean => {\n\treturn !! colorVariablePropTypeUtil.isValid( propValue );\n};\n\nexport const supportsVariables = ( propType: PropType ): boolean => {\n\treturn propType.kind === 'union' && colorVariablePropTypeUtil.key in propType.prop_types;\n};\n","import { createTransformer } from '@elementor/editor-canvas';\n\nexport const variableTransformer = createTransformer( ( value: string ) => {\n\tif ( ! value.trim() ) {\n\t\treturn null;\n\t}\n\n\treturn `var(--${ value })`;\n} );\n"],"mappings":"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","names":["import_editor_canvas","import_editor_editing_panel","React","import_editor_controls","import_react","import_ui","variables","React","import_react","import_icons","import_ui","Tag","React","import_icons","import_i18n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -3,61 +3,219 @@ import { styleTransformersRegistry } from "@elementor/editor-canvas";
|
|
|
3
3
|
import { controlActionsMenu, registerControlReplacement } from "@elementor/editor-editing-panel";
|
|
4
4
|
|
|
5
5
|
// src/controls/variables-selection-control.tsx
|
|
6
|
+
import * as React3 from "react";
|
|
7
|
+
import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
|
|
8
|
+
|
|
9
|
+
// src/components/variables-selection.tsx
|
|
6
10
|
import * as React from "react";
|
|
11
|
+
import { Fragment } from "react";
|
|
7
12
|
import { useBoundProp } from "@elementor/editor-controls";
|
|
13
|
+
import { EditIcon } from "@elementor/icons";
|
|
14
|
+
import { Box, Divider, ListItemIcon, ListItemText, MenuItem, MenuList, styled as styled2 } from "@elementor/ui";
|
|
15
|
+
|
|
16
|
+
// src/hooks/use-prop-variables.ts
|
|
17
|
+
import { useMemo } from "react";
|
|
18
|
+
var usePropVariables = () => {
|
|
19
|
+
return useMemo(() => getVariables(), []);
|
|
20
|
+
};
|
|
21
|
+
var useVariable = (key) => {
|
|
22
|
+
if (!variables[key]) {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
return {
|
|
26
|
+
...variables[key],
|
|
27
|
+
key
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
var getVariables = () => {
|
|
31
|
+
return normalizeVariables();
|
|
32
|
+
};
|
|
33
|
+
var normalizeVariables = () => {
|
|
34
|
+
return Object.entries(variables).map(([key, { label, value }]) => ({
|
|
35
|
+
key,
|
|
36
|
+
label,
|
|
37
|
+
value
|
|
38
|
+
}));
|
|
39
|
+
};
|
|
40
|
+
var variables = {
|
|
41
|
+
"e-gc-001": {
|
|
42
|
+
value: "#ffffff",
|
|
43
|
+
label: "Main: white"
|
|
44
|
+
},
|
|
45
|
+
"e-gc-002": {
|
|
46
|
+
value: "#000000",
|
|
47
|
+
label: "Main: black"
|
|
48
|
+
},
|
|
49
|
+
"e-gc-a01": {
|
|
50
|
+
value: "#FF0000",
|
|
51
|
+
label: "Danger: red"
|
|
52
|
+
},
|
|
53
|
+
"e-gc-a02": {
|
|
54
|
+
value: "#0000FF",
|
|
55
|
+
label: "Informative: blue"
|
|
56
|
+
},
|
|
57
|
+
"e-gc-a03": {
|
|
58
|
+
value: "#FF7BE5",
|
|
59
|
+
label: "Elementor: pint"
|
|
60
|
+
},
|
|
61
|
+
"e-gc-a04": {
|
|
62
|
+
value: "#808080",
|
|
63
|
+
label: "Gray: background"
|
|
64
|
+
},
|
|
65
|
+
"e-gc-b01": {
|
|
66
|
+
value: "#213555",
|
|
67
|
+
label: "Navy: primary"
|
|
68
|
+
},
|
|
69
|
+
"e-gc-b02": {
|
|
70
|
+
value: "#3E5879",
|
|
71
|
+
label: "Navy: secondary"
|
|
72
|
+
},
|
|
73
|
+
"e-gc-b03": {
|
|
74
|
+
value: "#D8C4B6",
|
|
75
|
+
label: "Navy: light"
|
|
76
|
+
},
|
|
77
|
+
"e-gc-b04": {
|
|
78
|
+
value: "#F5EFE7",
|
|
79
|
+
label: "Navy long text variable name: background"
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
// src/prop-types/color-variable-prop-type.ts
|
|
84
|
+
import { createPropUtils } from "@elementor/editor-props";
|
|
85
|
+
import { z } from "@elementor/schema";
|
|
86
|
+
var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
|
|
87
|
+
|
|
88
|
+
// src/components/color-indicator.tsx
|
|
89
|
+
import { styled, UnstableColorIndicator } from "@elementor/ui";
|
|
90
|
+
var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
|
|
91
|
+
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
92
|
+
}));
|
|
93
|
+
|
|
94
|
+
// src/components/variables-selection.tsx
|
|
95
|
+
var VariablesSelection = ({ onSelect }) => {
|
|
96
|
+
const { value: variable, setValue: setVariable } = useBoundProp(colorVariablePropTypeUtil);
|
|
97
|
+
const variables2 = usePropVariables();
|
|
98
|
+
const handleSetVariable = (newValue) => {
|
|
99
|
+
setVariable(newValue.key);
|
|
100
|
+
onSelect?.();
|
|
101
|
+
};
|
|
102
|
+
return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React.createElement(MenuList, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React.createElement(
|
|
103
|
+
StyledMenuItem,
|
|
104
|
+
{
|
|
105
|
+
key,
|
|
106
|
+
onClick: () => handleSetVariable({ value, label, key }),
|
|
107
|
+
selected: key === variable
|
|
108
|
+
},
|
|
109
|
+
/* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", component: "span", value })),
|
|
110
|
+
/* @__PURE__ */ React.createElement(
|
|
111
|
+
ListItemText,
|
|
112
|
+
{
|
|
113
|
+
primary: label,
|
|
114
|
+
secondary: value,
|
|
115
|
+
primaryTypographyProps: {
|
|
116
|
+
variant: "body2",
|
|
117
|
+
color: "text.secondary",
|
|
118
|
+
style: {
|
|
119
|
+
lineHeight: 2,
|
|
120
|
+
display: "inline-block",
|
|
121
|
+
overflow: "hidden",
|
|
122
|
+
textOverflow: "ellipsis",
|
|
123
|
+
whiteSpace: "nowrap",
|
|
124
|
+
maxWidth: "81px"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
secondaryTypographyProps: {
|
|
128
|
+
variant: "caption",
|
|
129
|
+
color: "text.tertiary",
|
|
130
|
+
style: { marginTop: "1px", lineHeight: "1" }
|
|
131
|
+
},
|
|
132
|
+
sx: { display: "flex", alignItems: "center", gap: 1 }
|
|
133
|
+
}
|
|
134
|
+
),
|
|
135
|
+
/* @__PURE__ */ React.createElement(EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
|
|
136
|
+
)))));
|
|
137
|
+
};
|
|
138
|
+
var StyledMenuItem = styled2(MenuItem)(() => ({
|
|
139
|
+
pl: 2,
|
|
140
|
+
pr: 1,
|
|
141
|
+
py: 0.5,
|
|
142
|
+
"&:hover .MuiSvgIcon-root": {
|
|
143
|
+
opacity: 1
|
|
144
|
+
}
|
|
145
|
+
}));
|
|
146
|
+
|
|
147
|
+
// src/components/variables-selection-popover.tsx
|
|
148
|
+
import * as React2 from "react";
|
|
149
|
+
import { useId } from "react";
|
|
8
150
|
import { ColorFilterIcon, DetachIcon } from "@elementor/icons";
|
|
9
|
-
import {
|
|
151
|
+
import {
|
|
152
|
+
bindPopover,
|
|
153
|
+
bindTrigger,
|
|
154
|
+
Box as Box2,
|
|
155
|
+
CloseButton,
|
|
156
|
+
IconButton,
|
|
157
|
+
Popover,
|
|
158
|
+
Stack,
|
|
159
|
+
Typography,
|
|
160
|
+
UnstableTag as Tag,
|
|
161
|
+
usePopupState
|
|
162
|
+
} from "@elementor/ui";
|
|
10
163
|
import { __ } from "@wordpress/i18n";
|
|
11
|
-
var
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
};
|
|
18
|
-
return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
|
|
164
|
+
var VariablesSelectionPopover = ({ selectedVariable, unlinkVariable, children }) => {
|
|
165
|
+
const id = useId();
|
|
166
|
+
const popupState = usePopupState({ variant: "popover", popupId: `elementor-variables-action-${id}` });
|
|
167
|
+
const closePopover = () => popupState.close();
|
|
168
|
+
const { value, label } = selectedVariable;
|
|
169
|
+
return /* @__PURE__ */ React2.createElement(Box2, null, /* @__PURE__ */ React2.createElement(
|
|
19
170
|
Tag,
|
|
20
171
|
{
|
|
21
172
|
fullWidth: true,
|
|
22
173
|
showActionsOnHover: true,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
174
|
+
...bindTrigger(popupState),
|
|
175
|
+
startIcon: /* @__PURE__ */ React2.createElement(Stack, { spacing: 1, direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(ColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React2.createElement(ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
|
|
176
|
+
label: /* @__PURE__ */ React2.createElement(Box2, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React2.createElement(Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
|
|
177
|
+
actions: /* @__PURE__ */ React2.createElement(IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": __("Unlink", "elementor") }, /* @__PURE__ */ React2.createElement(DetachIcon, { fontSize: "tiny" }))
|
|
26
178
|
}
|
|
179
|
+
), /* @__PURE__ */ React2.createElement(
|
|
180
|
+
Popover,
|
|
181
|
+
{
|
|
182
|
+
disableScrollLock: true,
|
|
183
|
+
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
184
|
+
transformOrigin: { vertical: "top", horizontal: "center" },
|
|
185
|
+
...bindPopover(popupState)
|
|
186
|
+
},
|
|
187
|
+
/* @__PURE__ */ React2.createElement(Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React2.createElement(ColorFilterIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React2.createElement(Typography, { variant: "subtitle2" }, __("Variables", "elementor")), /* @__PURE__ */ React2.createElement(
|
|
188
|
+
CloseButton,
|
|
189
|
+
{
|
|
190
|
+
slotProps: { icon: { fontSize: "tiny" } },
|
|
191
|
+
sx: { ml: "auto" },
|
|
192
|
+
onClick: closePopover
|
|
193
|
+
}
|
|
194
|
+
)),
|
|
195
|
+
children({ closePopover })
|
|
27
196
|
));
|
|
28
197
|
};
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
198
|
+
|
|
199
|
+
// src/controls/variables-selection-control.tsx
|
|
200
|
+
var VariablesSelectionControl = () => {
|
|
201
|
+
const { setValue } = useBoundProp2();
|
|
202
|
+
const { value: variableValue } = useBoundProp2(colorVariablePropTypeUtil);
|
|
203
|
+
const unlinkVariable = () => {
|
|
204
|
+
setValue("");
|
|
205
|
+
};
|
|
206
|
+
const selectedVariable = useVariable(variableValue);
|
|
207
|
+
if (!selectedVariable) {
|
|
208
|
+
throw new Error(`Global color variable ${variableValue} not found`);
|
|
209
|
+
}
|
|
210
|
+
return /* @__PURE__ */ React3.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React3.createElement(VariablesSelection, { onSelect: closePopover }));
|
|
211
|
+
};
|
|
32
212
|
|
|
33
213
|
// src/hooks/use-prop-variable-action.tsx
|
|
34
|
-
import * as
|
|
214
|
+
import * as React4 from "react";
|
|
35
215
|
import { useBoundProp as useBoundProp3 } from "@elementor/editor-editing-panel";
|
|
36
216
|
import { ColorFilterIcon as ColorFilterIcon2 } from "@elementor/icons";
|
|
37
|
-
import { __ as __3 } from "@wordpress/i18n";
|
|
38
|
-
|
|
39
|
-
// src/components/variables-selection.tsx
|
|
40
|
-
import * as React2 from "react";
|
|
41
|
-
import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
|
|
42
|
-
import { Box as Box2, MenuItem } from "@elementor/ui";
|
|
43
217
|
import { __ as __2 } from "@wordpress/i18n";
|
|
44
218
|
|
|
45
|
-
// src/prop-types/color-variable-prop-type.ts
|
|
46
|
-
import { createPropUtils } from "@elementor/editor-props";
|
|
47
|
-
import { z } from "@elementor/schema";
|
|
48
|
-
var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
|
|
49
|
-
|
|
50
|
-
// src/components/variables-selection.tsx
|
|
51
|
-
var VariablesSelection = ({ onSelect }) => {
|
|
52
|
-
const { setValue: setVariable } = useBoundProp2(colorVariablePropTypeUtil);
|
|
53
|
-
const handleSetVariable = () => {
|
|
54
|
-
const value = colorVariablePropTypeUtil.create("");
|
|
55
|
-
setVariable(value.value);
|
|
56
|
-
onSelect?.();
|
|
57
|
-
};
|
|
58
|
-
return /* @__PURE__ */ React2.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React2.createElement(MenuItem, { onClick: handleSetVariable }, __2("Variables", "elementor")));
|
|
59
|
-
};
|
|
60
|
-
|
|
61
219
|
// src/utils.ts
|
|
62
220
|
var hasAssignedVariable = (propValue) => {
|
|
63
221
|
return !!colorVariablePropTypeUtil.isValid(propValue);
|
|
@@ -73,8 +231,8 @@ var usePropVariableAction = () => {
|
|
|
73
231
|
return {
|
|
74
232
|
visible,
|
|
75
233
|
icon: ColorFilterIcon2,
|
|
76
|
-
title:
|
|
77
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
234
|
+
title: __2("Variables", "elementor"),
|
|
235
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React4.createElement(VariablesSelection, { onSelect: closePopover })
|
|
78
236
|
};
|
|
79
237
|
};
|
|
80
238
|
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/init.ts","../src/controls/variables-selection-control.tsx","../src/hooks/use-prop-variable-action.tsx","../src/components/variables-selection.tsx","../src/prop-types/color-variable-prop-type.ts","../src/utils.ts","../src/transformers/variable-transformer.ts"],"sourcesContent":["import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { VariablesSelectionControl } from './controls/variables-selection-control';\nimport { usePropVariableAction } from './hooks/use-prop-variable-action';\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function init() {\n\tregisterControlReplacement( {\n\t\tcomponent: VariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'variables',\n\t\tuseProps: usePropVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { ColorFilterIcon, DetachIcon } from '@elementor/icons';\nimport { Box, IconButton, Stack, styled, Typography, UnstableColorIndicator, UnstableTag as Tag } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const VariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\n\tconst value = '#FF7BE5';\n\tconst label = 'Light Fuchsia Pink';\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( null );\n\t};\n\n\treturn (\n\t\t<Box>\n\t\t\t<Tag\n\t\t\t\tfullWidth\n\t\t\t\tshowActionsOnHover\n\t\t\t\tstartIcon={\n\t\t\t\t\t<Stack spacing={ 1 } direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<StyledUnstableColorIndicator size=\"inherit\" component=\"span\" value={ value } />\n\t\t\t\t\t\t<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t}\n\t\t\t\tlabel={\n\t\t\t\t\t<Box sx={ { display: 'inline-grid' } }>\n\t\t\t\t\t\t<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant=\"subtitle2\">\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t\tactions={\n\t\t\t\t\t<IconButton size={ 'tiny' } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ 'tiny' } />\n\t\t\t\t\t</IconButton>\n\t\t\t\t}\n\t\t\t/>\n\t\t</Box>\n\t);\n};\n\nconst StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {\n\tborderRadius: `${ theme.shape.borderRadius / 2 }px`,\n} ) );\n","import * as React from 'react';\nimport { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\n\nimport { VariablesSelection } from '../components/variables-selection';\nimport { supportsVariables } from '../utils';\n\nexport const usePropVariableAction = (): PopoverActionProps => {\n\tconst { propType } = useBoundProp();\n\n\tconst visible = !! propType && supportsVariables( propType );\n\n\treturn {\n\t\tvisible,\n\t\ticon: ColorFilterIcon,\n\t\ttitle: __( 'Variables', 'elementor' ),\n\t\tpopoverContent: ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } />,\n\t};\n};\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { Box, MenuItem } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const VariablesSelection = ( { onSelect }: Props ) => {\n\tconst { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst handleSetVariable = () => {\n\t\tconst value = colorVariablePropTypeUtil.create( '' );\n\n\t\tsetVariable( value.value );\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t<MenuItem onClick={ handleSetVariable }>{ __( 'Variables', 'elementor' ) }</MenuItem>\n\t\t</Box>\n\t);\n};\n","import { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const colorVariablePropTypeUtil = createPropUtils( 'global-color-variable', z.string() );\n","import { type PropType, type PropValue } from '@elementor/editor-props';\n\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\n\nexport const hasAssignedVariable = ( propValue: PropValue ): boolean => {\n\treturn !! colorVariablePropTypeUtil.isValid( propValue );\n};\n\nexport const supportsVariables = ( propType: PropType ): boolean => {\n\treturn propType.kind === 'union' && colorVariablePropTypeUtil.key in propType.prop_types;\n};\n","import { createTransformer } from '@elementor/editor-canvas';\n\nexport const variableTransformer = createTransformer( ( value: string ) => {\n\tif ( ! value.trim() ) {\n\t\treturn null;\n\t}\n\n\treturn `var(--${ value })`;\n} );\n"],"mappings":"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","names":["React","useBoundProp","ColorFilterIcon","__","React","useBoundProp","Box","__","useBoundProp","Box","__","useBoundProp","ColorFilterIcon","__"]}
|
|
1
|
+
{"version":3,"sources":["../src/init.ts","../src/controls/variables-selection-control.tsx","../src/components/variables-selection.tsx","../src/hooks/use-prop-variables.ts","../src/prop-types/color-variable-prop-type.ts","../src/components/color-indicator.tsx","../src/components/variables-selection-popover.tsx","../src/hooks/use-prop-variable-action.tsx","../src/utils.ts","../src/transformers/variable-transformer.ts"],"sourcesContent":["import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { VariablesSelectionControl } from './controls/variables-selection-control';\nimport { usePropVariableAction } from './hooks/use-prop-variable-action';\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function init() {\n\tregisterControlReplacement( {\n\t\tcomponent: VariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'variables',\n\t\tuseProps: usePropVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\n\nimport { VariablesSelection } from '../components/variables-selection';\nimport { VariablesSelectionPopover } from '../components/variables-selection-popover';\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\nexport const VariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( '' );\n\t};\n\n\tconst selectedVariable = useVariable( variableValue );\n\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global color variable ${ variableValue } not found` );\n\t}\n\n\treturn (\n\t\t<VariablesSelectionPopover selectedVariable={ selectedVariable } unlinkVariable={ unlinkVariable }>\n\t\t\t{ ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } /> }\n\t\t</VariablesSelectionPopover>\n\t);\n};\n","import * as React from 'react';\nimport { Fragment } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { EditIcon } from '@elementor/icons';\nimport { Box, Divider, ListItemIcon, ListItemText, MenuItem, MenuList, styled } from '@elementor/ui';\n\nimport { usePropVariables } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\nimport { type Variable } from '../types';\nimport { ColorIndicator } from './color-indicator';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const VariablesSelection = ( { onSelect }: Props ) => {\n\tconst { value: variable, setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst variables = usePropVariables();\n\n\tconst handleSetVariable = ( newValue: Variable ) => {\n\t\tsetVariable( newValue.key );\n\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Divider />\n\t\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t\t<MenuList role=\"listbox\" tabIndex={ 0 }>\n\t\t\t\t\t{ variables.map( ( { value, label, key } ) => (\n\t\t\t\t\t\t<StyledMenuItem\n\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\tonClick={ () => handleSetVariable( { value, label, key } ) }\n\t\t\t\t\t\t\tselected={ key === variable }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ListItemIcon>\n\t\t\t\t\t\t\t\t<ColorIndicator size=\"inherit\" component=\"span\" value={ value } />\n\t\t\t\t\t\t\t</ListItemIcon>\n\t\t\t\t\t\t\t<ListItemText\n\t\t\t\t\t\t\t\tprimary={ label }\n\t\t\t\t\t\t\t\tsecondary={ value }\n\t\t\t\t\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'body2',\n\t\t\t\t\t\t\t\t\tcolor: 'text.secondary',\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tlineHeight: 2,\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t\t\t\t\t\tmaxWidth: '81px',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsecondaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'caption',\n\t\t\t\t\t\t\t\t\tcolor: 'text.tertiary',\n\t\t\t\t\t\t\t\t\tstyle: { marginTop: '1px', lineHeight: '1' },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsx={ { display: 'flex', alignItems: 'center', gap: 1 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<EditIcon color=\"action\" fontSize=\"inherit\" sx={ { mx: 1, opacity: '0' } } />\n\t\t\t\t\t\t</StyledMenuItem>\n\t\t\t\t\t) ) }\n\t\t\t\t</MenuList>\n\t\t\t</Box>\n\t\t</Fragment>\n\t);\n};\n\nconst StyledMenuItem = styled( MenuItem )( () => ( {\n\tpl: 2,\n\tpr: 1,\n\tpy: 0.5,\n\t'&:hover .MuiSvgIcon-root': {\n\t\topacity: 1,\n\t},\n} ) );\n","import { useMemo } from 'react';\n\nimport { type Variable } from '../types';\n\nexport const usePropVariables = () => {\n\treturn useMemo( () => getVariables(), [] );\n};\n\nexport const useVariable = ( key: string ) => {\n\tif ( ! variables[ key ] ) {\n\t\treturn null;\n\t}\n\n\treturn {\n\t\t...variables[ key ],\n\t\tkey,\n\t};\n};\n\nconst getVariables = (): Variable[] => {\n\treturn normalizeVariables();\n};\n\nconst normalizeVariables = () => {\n\treturn Object.entries( variables ).map( ( [ key, { label, value } ] ) => ( {\n\t\tkey,\n\t\tlabel,\n\t\tvalue,\n\t} ) );\n};\n\nconst variables: Record< string, { value: string; label: string } > = {\n\t'e-gc-001': {\n\t\tvalue: '#ffffff',\n\t\tlabel: 'Main: white',\n\t},\n\t'e-gc-002': {\n\t\tvalue: '#000000',\n\t\tlabel: 'Main: black',\n\t},\n\t'e-gc-a01': {\n\t\tvalue: '#FF0000',\n\t\tlabel: 'Danger: red',\n\t},\n\t'e-gc-a02': {\n\t\tvalue: '#0000FF',\n\t\tlabel: 'Informative: blue',\n\t},\n\t'e-gc-a03': {\n\t\tvalue: '#FF7BE5',\n\t\tlabel: 'Elementor: pint',\n\t},\n\t'e-gc-a04': {\n\t\tvalue: '#808080',\n\t\tlabel: 'Gray: background',\n\t},\n\n\t'e-gc-b01': {\n\t\tvalue: '#213555',\n\t\tlabel: 'Navy: primary',\n\t},\n\t'e-gc-b02': {\n\t\tvalue: '#3E5879',\n\t\tlabel: 'Navy: secondary',\n\t},\n\t'e-gc-b03': {\n\t\tvalue: '#D8C4B6',\n\t\tlabel: 'Navy: light',\n\t},\n\t'e-gc-b04': {\n\t\tvalue: '#F5EFE7',\n\t\tlabel: 'Navy long text variable name: background',\n\t},\n};\n","import { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const colorVariablePropTypeUtil = createPropUtils( 'global-color-variable', z.string() );\n","import { styled, UnstableColorIndicator } from '@elementor/ui';\n\nexport const ColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {\n\tborderRadius: `${ theme.shape.borderRadius / 2 }px`,\n} ) );\n","import * as React from 'react';\nimport { useId } from 'react';\nimport { ColorFilterIcon, DetachIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tBox,\n\tCloseButton,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTypography,\n\tUnstableTag as Tag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type Variable } from '../types';\nimport { ColorIndicator } from './color-indicator';\n\ntype Props = {\n\tselectedVariable: Variable;\n\tunlinkVariable: () => void;\n\tchildren: ( { closePopover }: { closePopover: () => void } ) => React.ReactNode;\n};\n\nexport const VariablesSelectionPopover = ( { selectedVariable, unlinkVariable, children }: Props ) => {\n\tconst id = useId();\n\tconst popupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-action-${ id }` } );\n\n\tconst closePopover = () => popupState.close();\n\n\tconst { value, label } = selectedVariable;\n\n\treturn (\n\t\t<Box>\n\t\t\t<Tag\n\t\t\t\tfullWidth\n\t\t\t\tshowActionsOnHover\n\t\t\t\t{ ...bindTrigger( popupState ) }\n\t\t\t\tstartIcon={\n\t\t\t\t\t<Stack spacing={ 1 } direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<ColorIndicator size=\"inherit\" component=\"span\" value={ value } />\n\t\t\t\t\t\t<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t}\n\t\t\t\tlabel={\n\t\t\t\t\t<Box sx={ { display: 'inline-grid' } }>\n\t\t\t\t\t\t<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant=\"subtitle2\">\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t\tactions={\n\t\t\t\t\t<IconButton size={ 'tiny' } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ 'tiny' } />\n\t\t\t\t\t</IconButton>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Popover\n\t\t\t\tdisableScrollLock\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'center' } }\n\t\t\t\t{ ...bindPopover( popupState ) }\n\t\t\t>\n\t\t\t\t<Stack direction=\"row\" alignItems=\"center\" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>\n\t\t\t\t\t<ColorFilterIcon fontSize={ 'tiny' } sx={ { mr: 0.5 } } />\n\t\t\t\t\t<Typography variant=\"subtitle2\">{ __( 'Variables', 'elementor' ) }</Typography>\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\tslotProps={ { icon: { fontSize: 'tiny' } } }\n\t\t\t\t\t\tsx={ { ml: 'auto' } }\n\t\t\t\t\t\tonClick={ closePopover }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t\t{ children( { closePopover } ) }\n\t\t\t</Popover>\n\t\t</Box>\n\t);\n};\n","import * as React from 'react';\nimport { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\n\nimport { VariablesSelection } from '../components/variables-selection';\nimport { supportsVariables } from '../utils';\n\nexport const usePropVariableAction = (): PopoverActionProps => {\n\tconst { propType } = useBoundProp();\n\n\tconst visible = !! propType && supportsVariables( propType );\n\n\treturn {\n\t\tvisible,\n\t\ticon: ColorFilterIcon,\n\t\ttitle: __( 'Variables', 'elementor' ),\n\t\tpopoverContent: ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } />,\n\t};\n};\n","import { type PropType, type PropValue } from '@elementor/editor-props';\n\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\n\nexport const hasAssignedVariable = ( propValue: PropValue ): boolean => {\n\treturn !! colorVariablePropTypeUtil.isValid( propValue );\n};\n\nexport const supportsVariables = ( propType: PropType ): boolean => {\n\treturn propType.kind === 'union' && colorVariablePropTypeUtil.key in propType.prop_types;\n};\n","import { createTransformer } from '@elementor/editor-canvas';\n\nexport const variableTransformer = createTransformer( ( value: string ) => {\n\tif ( ! value.trim() ) {\n\t\treturn null;\n\t}\n\n\treturn `var(--${ value })`;\n} );\n"],"mappings":";AAAA,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB,kCAAkC;;;ACD/D,YAAYA,YAAW;AACvB,SAAS,gBAAAC,qBAAoB;;;ACD7B,YAAY,WAAW;AACvB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,KAAK,SAAS,cAAc,cAAc,UAAU,UAAU,UAAAC,eAAc;;;ACJrF,SAAS,eAAe;AAIjB,IAAM,mBAAmB,MAAM;AACrC,SAAO,QAAS,MAAM,aAAa,GAAG,CAAC,CAAE;AAC1C;AAEO,IAAM,cAAc,CAAE,QAAiB;AAC7C,MAAK,CAAE,UAAW,GAAI,GAAI;AACzB,WAAO;AAAA,EACR;AAEA,SAAO;AAAA,IACN,GAAG,UAAW,GAAI;AAAA,IAClB;AAAA,EACD;AACD;AAEA,IAAM,eAAe,MAAkB;AACtC,SAAO,mBAAmB;AAC3B;AAEA,IAAM,qBAAqB,MAAM;AAChC,SAAO,OAAO,QAAS,SAAU,EAAE,IAAK,CAAE,CAAE,KAAK,EAAE,OAAO,MAAM,CAAE,OAAS;AAAA,IAC1E;AAAA,IACA;AAAA,IACA;AAAA,EACD,EAAI;AACL;AAEA,IAAM,YAAgE;AAAA,EACrE,YAAY;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AAAA,EAEA,YAAY;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AACD;;;ACzEA,SAAS,uBAAuB;AAChC,SAAS,SAAS;AAEX,IAAM,4BAA4B,gBAAiB,yBAAyB,EAAE,OAAO,CAAE;;;ACH9F,SAAS,QAAQ,8BAA8B;AAExC,IAAM,iBAAiB,OAAQ,sBAAuB,EAAG,CAAE,EAAE,MAAM,OAAS;AAAA,EAClF,cAAc,GAAI,MAAM,MAAM,eAAe,CAAE;AAChD,EAAI;;;AHWG,IAAM,qBAAqB,CAAE,EAAE,SAAS,MAAc;AAC5D,QAAM,EAAE,OAAO,UAAU,UAAU,YAAY,IAAI,aAAc,yBAA0B;AAE3F,QAAMC,aAAY,iBAAiB;AAEnC,QAAM,oBAAoB,CAAE,aAAwB;AACnD,gBAAa,SAAS,GAAI;AAE1B,eAAW;AAAA,EACZ;AAEA,SACC,oCAAC,gBACA,oCAAC,aAAQ,GACT,oCAAC,OAAI,IAAK,EAAE,WAAW,QAAQ,QAAQ,KAAK,OAAO,IAAI,KACtD,oCAAC,YAAS,MAAK,WAAU,UAAW,KACjCA,WAAU,IAAK,CAAE,EAAE,OAAO,OAAO,IAAI,MACtC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,SAAU,MAAM,kBAAmB,EAAE,OAAO,OAAO,IAAI,CAAE;AAAA,MACzD,UAAW,QAAQ;AAAA;AAAA,IAEnB,oCAAC,oBACA,oCAAC,kBAAe,MAAK,WAAU,WAAU,QAAO,OAAgB,CACjE;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAY;AAAA,QACZ,wBAAyB;AAAA,UACxB,SAAS;AAAA,UACT,OAAO;AAAA,UACP,OAAO;AAAA,YACN,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,UAAU;AAAA,YACV,cAAc;AAAA,YACd,YAAY;AAAA,YACZ,UAAU;AAAA,UACX;AAAA,QACD;AAAA,QACA,0BAA2B;AAAA,UAC1B,SAAS;AAAA,UACT,OAAO;AAAA,UACP,OAAO,EAAE,WAAW,OAAO,YAAY,IAAI;AAAA,QAC5C;AAAA,QACA,IAAK,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE;AAAA;AAAA,IACtD;AAAA,IACA,oCAAC,YAAS,OAAM,UAAS,UAAS,WAAU,IAAK,EAAE,IAAI,GAAG,SAAS,IAAI,GAAI;AAAA,EAC5E,CACC,CACH,CACD,CACD;AAEF;AAEA,IAAM,iBAAiBC,QAAQ,QAAS,EAAG,OAAQ;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,4BAA4B;AAAA,IAC3B,SAAS;AAAA,EACV;AACD,EAAI;;;AI9EJ,YAAYC,YAAW;AACvB,SAAS,aAAa;AACtB,SAAS,iBAAiB,kBAAkB;AAC5C;AAAA,EACC;AAAA,EACA;AAAA,EACA,OAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,OACM;AACP,SAAS,UAAU;AAWZ,IAAM,4BAA4B,CAAE,EAAE,kBAAkB,gBAAgB,SAAS,MAAc;AACrG,QAAM,KAAK,MAAM;AACjB,QAAM,aAAa,cAAe,EAAE,SAAS,WAAW,SAAS,8BAA+B,EAAG,GAAG,CAAE;AAExG,QAAM,eAAe,MAAM,WAAW,MAAM;AAE5C,QAAM,EAAE,OAAO,MAAM,IAAI;AAEzB,SACC,qCAACC,MAAA,MACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAS;AAAA,MACT,oBAAkB;AAAA,MAChB,GAAG,YAAa,UAAW;AAAA,MAC7B,WACC,qCAAC,SAAM,SAAU,GAAI,WAAU,OAAM,YAAW,YAC/C,qCAAC,kBAAe,MAAK,WAAU,WAAU,QAAO,OAAgB,GAChE,qCAAC,mBAAgB,UAAW,WAAY,IAAK,EAAE,IAAI,EAAE,GAAI,CAC1D;AAAA,MAED,OACC,qCAACA,MAAA,EAAI,IAAK,EAAE,SAAS,cAAc,KAClC,qCAAC,cAAW,IAAK,EAAE,cAAc,YAAY,WAAW,SAAS,GAAI,SAAQ,eAC1E,KACH,CACD;AAAA,MAED,SACC,qCAAC,cAAW,MAAO,QAAS,SAAU,gBAAiB,cAAa,GAAI,UAAU,WAAY,KAC7F,qCAAC,cAAW,UAAW,QAAS,CACjC;AAAA;AAAA,EAEF,GACA;AAAA,IAAC;AAAA;AAAA,MACA,mBAAiB;AAAA,MACjB,cAAe,EAAE,UAAU,UAAU,YAAY,SAAS;AAAA,MAC1D,iBAAkB,EAAE,UAAU,OAAO,YAAY,SAAS;AAAA,MACxD,GAAG,YAAa,UAAW;AAAA;AAAA,IAE7B,qCAAC,SAAM,WAAU,OAAM,YAAW,UAAS,IAAK,KAAM,IAAK,KAAM,IAAK,OACrE,qCAAC,mBAAgB,UAAW,QAAS,IAAK,EAAE,IAAI,IAAI,GAAI,GACxD,qCAAC,cAAW,SAAQ,eAAc,GAAI,aAAa,WAAY,CAAG,GAClE;AAAA,MAAC;AAAA;AAAA,QACA,WAAY,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE;AAAA,QACzC,IAAK,EAAE,IAAI,OAAO;AAAA,QAClB,SAAU;AAAA;AAAA,IACX,CACD;AAAA,IACE,SAAU,EAAE,aAAa,CAAE;AAAA,EAC9B,CACD;AAEF;;;ALtEO,IAAM,4BAA4B,MAAM;AAC9C,QAAM,EAAE,SAAS,IAAIC,cAAa;AAClC,QAAM,EAAE,OAAO,cAAc,IAAIA,cAAc,yBAA0B;AAEzE,QAAM,iBAAiB,MAAM;AAC5B,aAAU,EAAG;AAAA,EACd;AAEA,QAAM,mBAAmB,YAAa,aAAc;AAEpD,MAAK,CAAE,kBAAmB;AACzB,UAAM,IAAI,MAAO,yBAA0B,aAAc,YAAa;AAAA,EACvE;AAEA,SACC,qCAAC,6BAA0B,kBAAsC,kBAC9D,CAAE,EAAE,aAAa,MAAO,qCAAC,sBAAmB,UAAW,cAAe,CACzE;AAEF;;;AM3BA,YAAYC,YAAW;AACvB,SAAkC,gBAAAC,qBAAoB;AACtD,SAAS,mBAAAC,wBAAuB;AAChC,SAAS,MAAAC,WAAU;;;ACCZ,IAAM,sBAAsB,CAAE,cAAmC;AACvE,SAAO,CAAC,CAAE,0BAA0B,QAAS,SAAU;AACxD;AAEO,IAAM,oBAAoB,CAAE,aAAiC;AACnE,SAAO,SAAS,SAAS,WAAW,0BAA0B,OAAO,SAAS;AAC/E;;;ADFO,IAAM,wBAAwB,MAA0B;AAC9D,QAAM,EAAE,SAAS,IAAIC,cAAa;AAElC,QAAM,UAAU,CAAC,CAAE,YAAY,kBAAmB,QAAS;AAE3D,SAAO;AAAA,IACN;AAAA,IACA,MAAMC;AAAA,IACN,OAAOC,IAAI,aAAa,WAAY;AAAA,IACpC,gBAAgB,CAAE,EAAE,aAAa,MAAO,qCAAC,sBAAmB,UAAW,cAAe;AAAA,EACvF;AACD;;;AEnBA,SAAS,yBAAyB;AAE3B,IAAM,sBAAsB,kBAAmB,CAAE,UAAmB;AAC1E,MAAK,CAAE,MAAM,KAAK,GAAI;AACrB,WAAO;AAAA,EACR;AAEA,SAAO,SAAU,KAAM;AACxB,CAAE;;;ATCF,IAAM,EAAE,sBAAsB,IAAI;AAE3B,SAAS,OAAO;AACtB,6BAA4B;AAAA,IAC3B,WAAW;AAAA,IACX,WAAW,CAAE,EAAE,MAAM,MAAO,oBAAqB,KAAM;AAAA,EACxD,CAAE;AAEF,wBAAuB;AAAA,IACtB,IAAI;AAAA,IACJ,UAAU;AAAA,EACX,CAAE;AAEF,4BAA0B,SAAU,0BAA0B,KAAK,mBAAoB;AACxF;","names":["React","useBoundProp","styled","variables","styled","React","Box","Box","useBoundProp","React","useBoundProp","ColorFilterIcon","__","useBoundProp","ColorFilterIcon","__"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor-variables",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Elementor Team",
|
|
6
6
|
"homepage": "https://elementor.com/",
|
|
@@ -39,14 +39,14 @@
|
|
|
39
39
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@elementor/editor-editing-panel": "1.
|
|
43
|
-
"@elementor/editor-canvas": "0.19.
|
|
42
|
+
"@elementor/editor-editing-panel": "1.31.0",
|
|
43
|
+
"@elementor/editor-canvas": "0.19.1",
|
|
44
44
|
"@elementor/editor-props": "0.12.0",
|
|
45
45
|
"@elementor/schema": "0.1.2",
|
|
46
|
-
"@elementor/editor-controls": "0.
|
|
47
|
-
"@elementor/icons": "1.
|
|
46
|
+
"@elementor/editor-controls": "0.28.0",
|
|
47
|
+
"@elementor/icons": "1.40.1",
|
|
48
48
|
"@wordpress/i18n": "^5.13.0",
|
|
49
|
-
"@elementor/ui": "1.
|
|
49
|
+
"@elementor/ui": "1.34.2"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": "^18.3.1"
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useId } from 'react';
|
|
3
|
+
import { ColorFilterIcon, DetachIcon } from '@elementor/icons';
|
|
4
|
+
import {
|
|
5
|
+
bindPopover,
|
|
6
|
+
bindTrigger,
|
|
7
|
+
Box,
|
|
8
|
+
CloseButton,
|
|
9
|
+
IconButton,
|
|
10
|
+
Popover,
|
|
11
|
+
Stack,
|
|
12
|
+
Typography,
|
|
13
|
+
UnstableTag as Tag,
|
|
14
|
+
usePopupState,
|
|
15
|
+
} from '@elementor/ui';
|
|
16
|
+
import { __ } from '@wordpress/i18n';
|
|
17
|
+
|
|
18
|
+
import { type Variable } from '../types';
|
|
19
|
+
import { ColorIndicator } from './color-indicator';
|
|
20
|
+
|
|
21
|
+
type Props = {
|
|
22
|
+
selectedVariable: Variable;
|
|
23
|
+
unlinkVariable: () => void;
|
|
24
|
+
children: ( { closePopover }: { closePopover: () => void } ) => React.ReactNode;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export const VariablesSelectionPopover = ( { selectedVariable, unlinkVariable, children }: Props ) => {
|
|
28
|
+
const id = useId();
|
|
29
|
+
const popupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-action-${ id }` } );
|
|
30
|
+
|
|
31
|
+
const closePopover = () => popupState.close();
|
|
32
|
+
|
|
33
|
+
const { value, label } = selectedVariable;
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<Box>
|
|
37
|
+
<Tag
|
|
38
|
+
fullWidth
|
|
39
|
+
showActionsOnHover
|
|
40
|
+
{ ...bindTrigger( popupState ) }
|
|
41
|
+
startIcon={
|
|
42
|
+
<Stack spacing={ 1 } direction="row" alignItems="center">
|
|
43
|
+
<ColorIndicator size="inherit" component="span" value={ value } />
|
|
44
|
+
<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />
|
|
45
|
+
</Stack>
|
|
46
|
+
}
|
|
47
|
+
label={
|
|
48
|
+
<Box sx={ { display: 'inline-grid' } }>
|
|
49
|
+
<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant="subtitle2">
|
|
50
|
+
{ label }
|
|
51
|
+
</Typography>
|
|
52
|
+
</Box>
|
|
53
|
+
}
|
|
54
|
+
actions={
|
|
55
|
+
<IconButton size={ 'tiny' } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
|
|
56
|
+
<DetachIcon fontSize={ 'tiny' } />
|
|
57
|
+
</IconButton>
|
|
58
|
+
}
|
|
59
|
+
/>
|
|
60
|
+
<Popover
|
|
61
|
+
disableScrollLock
|
|
62
|
+
anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
|
|
63
|
+
transformOrigin={ { vertical: 'top', horizontal: 'center' } }
|
|
64
|
+
{ ...bindPopover( popupState ) }
|
|
65
|
+
>
|
|
66
|
+
<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
|
|
67
|
+
<ColorFilterIcon fontSize={ 'tiny' } sx={ { mr: 0.5 } } />
|
|
68
|
+
<Typography variant="subtitle2">{ __( 'Variables', 'elementor' ) }</Typography>
|
|
69
|
+
<CloseButton
|
|
70
|
+
slotProps={ { icon: { fontSize: 'tiny' } } }
|
|
71
|
+
sx={ { ml: 'auto' } }
|
|
72
|
+
onClick={ closePopover }
|
|
73
|
+
/>
|
|
74
|
+
</Stack>
|
|
75
|
+
{ children( { closePopover } ) }
|
|
76
|
+
</Popover>
|
|
77
|
+
</Box>
|
|
78
|
+
);
|
|
79
|
+
};
|
|
@@ -1,27 +1,79 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { Fragment } from 'react';
|
|
2
3
|
import { useBoundProp } from '@elementor/editor-controls';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
4
|
+
import { EditIcon } from '@elementor/icons';
|
|
5
|
+
import { Box, Divider, ListItemIcon, ListItemText, MenuItem, MenuList, styled } from '@elementor/ui';
|
|
5
6
|
|
|
7
|
+
import { usePropVariables } from '../hooks/use-prop-variables';
|
|
6
8
|
import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
|
|
9
|
+
import { type Variable } from '../types';
|
|
10
|
+
import { ColorIndicator } from './color-indicator';
|
|
7
11
|
|
|
8
12
|
type Props = {
|
|
9
13
|
onSelect?: () => void;
|
|
10
14
|
};
|
|
11
15
|
|
|
12
16
|
export const VariablesSelection = ( { onSelect }: Props ) => {
|
|
13
|
-
const { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );
|
|
17
|
+
const { value: variable, setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );
|
|
14
18
|
|
|
15
|
-
const
|
|
16
|
-
|
|
19
|
+
const variables = usePropVariables();
|
|
20
|
+
|
|
21
|
+
const handleSetVariable = ( newValue: Variable ) => {
|
|
22
|
+
setVariable( newValue.key );
|
|
17
23
|
|
|
18
|
-
setVariable( value.value );
|
|
19
24
|
onSelect?.();
|
|
20
25
|
};
|
|
21
26
|
|
|
22
27
|
return (
|
|
23
|
-
<
|
|
24
|
-
<
|
|
25
|
-
|
|
28
|
+
<Fragment>
|
|
29
|
+
<Divider />
|
|
30
|
+
<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
|
|
31
|
+
<MenuList role="listbox" tabIndex={ 0 }>
|
|
32
|
+
{ variables.map( ( { value, label, key } ) => (
|
|
33
|
+
<StyledMenuItem
|
|
34
|
+
key={ key }
|
|
35
|
+
onClick={ () => handleSetVariable( { value, label, key } ) }
|
|
36
|
+
selected={ key === variable }
|
|
37
|
+
>
|
|
38
|
+
<ListItemIcon>
|
|
39
|
+
<ColorIndicator size="inherit" component="span" value={ value } />
|
|
40
|
+
</ListItemIcon>
|
|
41
|
+
<ListItemText
|
|
42
|
+
primary={ label }
|
|
43
|
+
secondary={ value }
|
|
44
|
+
primaryTypographyProps={ {
|
|
45
|
+
variant: 'body2',
|
|
46
|
+
color: 'text.secondary',
|
|
47
|
+
style: {
|
|
48
|
+
lineHeight: 2,
|
|
49
|
+
display: 'inline-block',
|
|
50
|
+
overflow: 'hidden',
|
|
51
|
+
textOverflow: 'ellipsis',
|
|
52
|
+
whiteSpace: 'nowrap',
|
|
53
|
+
maxWidth: '81px',
|
|
54
|
+
},
|
|
55
|
+
} }
|
|
56
|
+
secondaryTypographyProps={ {
|
|
57
|
+
variant: 'caption',
|
|
58
|
+
color: 'text.tertiary',
|
|
59
|
+
style: { marginTop: '1px', lineHeight: '1' },
|
|
60
|
+
} }
|
|
61
|
+
sx={ { display: 'flex', alignItems: 'center', gap: 1 } }
|
|
62
|
+
/>
|
|
63
|
+
<EditIcon color="action" fontSize="inherit" sx={ { mx: 1, opacity: '0' } } />
|
|
64
|
+
</StyledMenuItem>
|
|
65
|
+
) ) }
|
|
66
|
+
</MenuList>
|
|
67
|
+
</Box>
|
|
68
|
+
</Fragment>
|
|
26
69
|
);
|
|
27
70
|
};
|
|
71
|
+
|
|
72
|
+
const StyledMenuItem = styled( MenuItem )( () => ( {
|
|
73
|
+
pl: 2,
|
|
74
|
+
pr: 1,
|
|
75
|
+
py: 0.5,
|
|
76
|
+
'&:hover .MuiSvgIcon-root': {
|
|
77
|
+
opacity: 1,
|
|
78
|
+
},
|
|
79
|
+
} ) );
|
|
@@ -1,47 +1,28 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useBoundProp } from '@elementor/editor-controls';
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
3
|
+
|
|
4
|
+
import { VariablesSelection } from '../components/variables-selection';
|
|
5
|
+
import { VariablesSelectionPopover } from '../components/variables-selection-popover';
|
|
6
|
+
import { useVariable } from '../hooks/use-prop-variables';
|
|
7
|
+
import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
|
|
6
8
|
|
|
7
9
|
export const VariablesSelectionControl = () => {
|
|
8
10
|
const { setValue } = useBoundProp();
|
|
9
|
-
|
|
10
|
-
const value = '#FF7BE5';
|
|
11
|
-
const label = 'Light Fuchsia Pink';
|
|
11
|
+
const { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );
|
|
12
12
|
|
|
13
13
|
const unlinkVariable = () => {
|
|
14
|
-
setValue(
|
|
14
|
+
setValue( '' );
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
+
const selectedVariable = useVariable( variableValue );
|
|
18
|
+
|
|
19
|
+
if ( ! selectedVariable ) {
|
|
20
|
+
throw new Error( `Global color variable ${ variableValue } not found` );
|
|
21
|
+
}
|
|
22
|
+
|
|
17
23
|
return (
|
|
18
|
-
<
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
showActionsOnHover
|
|
22
|
-
startIcon={
|
|
23
|
-
<Stack spacing={ 1 } direction="row" alignItems="center">
|
|
24
|
-
<StyledUnstableColorIndicator size="inherit" component="span" value={ value } />
|
|
25
|
-
<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />
|
|
26
|
-
</Stack>
|
|
27
|
-
}
|
|
28
|
-
label={
|
|
29
|
-
<Box sx={ { display: 'inline-grid' } }>
|
|
30
|
-
<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant="subtitle2">
|
|
31
|
-
{ label }
|
|
32
|
-
</Typography>
|
|
33
|
-
</Box>
|
|
34
|
-
}
|
|
35
|
-
actions={
|
|
36
|
-
<IconButton size={ 'tiny' } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
|
|
37
|
-
<DetachIcon fontSize={ 'tiny' } />
|
|
38
|
-
</IconButton>
|
|
39
|
-
}
|
|
40
|
-
/>
|
|
41
|
-
</Box>
|
|
24
|
+
<VariablesSelectionPopover selectedVariable={ selectedVariable } unlinkVariable={ unlinkVariable }>
|
|
25
|
+
{ ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } /> }
|
|
26
|
+
</VariablesSelectionPopover>
|
|
42
27
|
);
|
|
43
28
|
};
|
|
44
|
-
|
|
45
|
-
const StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
|
|
46
|
-
borderRadius: `${ theme.shape.borderRadius / 2 }px`,
|
|
47
|
-
} ) );
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
|
|
3
|
+
import { type Variable } from '../types';
|
|
4
|
+
|
|
5
|
+
export const usePropVariables = () => {
|
|
6
|
+
return useMemo( () => getVariables(), [] );
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export const useVariable = ( key: string ) => {
|
|
10
|
+
if ( ! variables[ key ] ) {
|
|
11
|
+
return null;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
return {
|
|
15
|
+
...variables[ key ],
|
|
16
|
+
key,
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
const getVariables = (): Variable[] => {
|
|
21
|
+
return normalizeVariables();
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const normalizeVariables = () => {
|
|
25
|
+
return Object.entries( variables ).map( ( [ key, { label, value } ] ) => ( {
|
|
26
|
+
key,
|
|
27
|
+
label,
|
|
28
|
+
value,
|
|
29
|
+
} ) );
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const variables: Record< string, { value: string; label: string } > = {
|
|
33
|
+
'e-gc-001': {
|
|
34
|
+
value: '#ffffff',
|
|
35
|
+
label: 'Main: white',
|
|
36
|
+
},
|
|
37
|
+
'e-gc-002': {
|
|
38
|
+
value: '#000000',
|
|
39
|
+
label: 'Main: black',
|
|
40
|
+
},
|
|
41
|
+
'e-gc-a01': {
|
|
42
|
+
value: '#FF0000',
|
|
43
|
+
label: 'Danger: red',
|
|
44
|
+
},
|
|
45
|
+
'e-gc-a02': {
|
|
46
|
+
value: '#0000FF',
|
|
47
|
+
label: 'Informative: blue',
|
|
48
|
+
},
|
|
49
|
+
'e-gc-a03': {
|
|
50
|
+
value: '#FF7BE5',
|
|
51
|
+
label: 'Elementor: pint',
|
|
52
|
+
},
|
|
53
|
+
'e-gc-a04': {
|
|
54
|
+
value: '#808080',
|
|
55
|
+
label: 'Gray: background',
|
|
56
|
+
},
|
|
57
|
+
|
|
58
|
+
'e-gc-b01': {
|
|
59
|
+
value: '#213555',
|
|
60
|
+
label: 'Navy: primary',
|
|
61
|
+
},
|
|
62
|
+
'e-gc-b02': {
|
|
63
|
+
value: '#3E5879',
|
|
64
|
+
label: 'Navy: secondary',
|
|
65
|
+
},
|
|
66
|
+
'e-gc-b03': {
|
|
67
|
+
value: '#D8C4B6',
|
|
68
|
+
label: 'Navy: light',
|
|
69
|
+
},
|
|
70
|
+
'e-gc-b04': {
|
|
71
|
+
value: '#F5EFE7',
|
|
72
|
+
label: 'Navy long text variable name: background',
|
|
73
|
+
},
|
|
74
|
+
};
|