@elementor/editor-editing-panel 0.9.0 → 0.10.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 +10 -0
- package/dist/index.js +134 -64
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +125 -55
- package/dist/index.mjs.map +1 -1
- package/package.json +8 -6
- package/src/components/{editing-panel/editing-panel-hooks.tsx → editing-panel-hooks.tsx} +1 -1
- package/src/components/{editing-panel/editing-panel-tabs.tsx → editing-panel-tabs.tsx} +1 -1
- package/src/components/{editing-panel/editing-panel.tsx → editing-panel.tsx} +3 -3
- package/src/components/{editing-panel/settings-tab.tsx → settings-tab.tsx} +5 -5
- package/src/components/{editing-panel/style-tab/sections/size.tsx → style-sections/size-section.tsx} +3 -3
- package/src/components/{editing-panel/style-tab/style-tab.tsx → style-tab.tsx} +4 -4
- package/src/controls/control-types/attachment-control.tsx +101 -0
- package/src/{components/controls → controls}/control-types/select-control.tsx +2 -2
- package/src/{components/controls → controls}/control-types/size-control.tsx +2 -2
- package/src/{components/controls → controls}/control-types/text-area-control.tsx +1 -1
- package/src/{components/controls → controls}/control-types/text-control.tsx +1 -1
- package/src/{components/controls → controls}/get-control-by-type.ts +2 -0
- package/src/{components/controls → controls}/settings-control.tsx +5 -5
- package/src/{components/controls → controls}/style-control.tsx +6 -6
- package/src/init.ts +1 -1
- package/src/panel.ts +1 -1
- package/src/types.ts +1 -1
- /package/src/components/{controls/collapsible-section.tsx → collapsible-section.tsx} +0 -0
- /package/src/{contexts → controls}/control-context.tsx +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.10.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.9.1...@elementor/editor-editing-panel@0.10.0) (2024-08-14)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **editor-editing-panel:** init attachment control [EDS-320] ([#239](https://github.com/elementor/elementor-packages/issues/239)) ([9871e10](https://github.com/elementor/elementor-packages/commit/9871e105c98b8c4502289cf8cf99d75b4074e0a9))
|
|
11
|
+
|
|
12
|
+
## [0.9.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.9.0...@elementor/editor-editing-panel@0.9.1) (2024-08-06)
|
|
13
|
+
|
|
14
|
+
**Note:** Version bump only for package @elementor/editor-editing-panel
|
|
15
|
+
|
|
6
16
|
# [0.9.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.8.0...@elementor/editor-editing-panel@0.9.0) (2024-08-06)
|
|
7
17
|
|
|
8
18
|
### Features
|
package/dist/index.js
CHANGED
|
@@ -25,9 +25,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
25
25
|
// src/panel.ts
|
|
26
26
|
var import_editor_panels2 = require("@elementor/editor-panels");
|
|
27
27
|
|
|
28
|
-
// src/components/editing-panel
|
|
29
|
-
var
|
|
30
|
-
var
|
|
28
|
+
// src/components/editing-panel.tsx
|
|
29
|
+
var React15 = __toESM(require("react"));
|
|
30
|
+
var import_i18n4 = require("@wordpress/i18n");
|
|
31
31
|
|
|
32
32
|
// src/hooks/use-selected-elements.ts
|
|
33
33
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
@@ -88,7 +88,7 @@ function useElementType(type) {
|
|
|
88
88
|
);
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
// src/components/editing-panel
|
|
91
|
+
// src/components/editing-panel.tsx
|
|
92
92
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
93
93
|
|
|
94
94
|
// src/contexts/element-context.tsx
|
|
@@ -106,19 +106,19 @@ function useElementContext() {
|
|
|
106
106
|
return context;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
// src/components/editing-panel
|
|
110
|
-
var
|
|
111
|
-
var
|
|
112
|
-
var
|
|
109
|
+
// src/components/editing-panel-tabs.tsx
|
|
110
|
+
var import_ui12 = require("@elementor/ui");
|
|
111
|
+
var React14 = __toESM(require("react"));
|
|
112
|
+
var import_i18n3 = require("@wordpress/i18n");
|
|
113
113
|
|
|
114
|
-
// src/components/
|
|
115
|
-
var
|
|
116
|
-
var
|
|
114
|
+
// src/components/settings-tab.tsx
|
|
115
|
+
var React8 = __toESM(require("react"));
|
|
116
|
+
var import_ui7 = require("@elementor/ui");
|
|
117
117
|
|
|
118
|
-
// src/
|
|
118
|
+
// src/controls/settings-control.tsx
|
|
119
119
|
var React2 = __toESM(require("react"));
|
|
120
120
|
|
|
121
|
-
// src/
|
|
121
|
+
// src/controls/control-context.tsx
|
|
122
122
|
var import_react2 = require("react");
|
|
123
123
|
var ControlContext = (0, import_react2.createContext)(null);
|
|
124
124
|
function useControl(defaultValue) {
|
|
@@ -129,7 +129,7 @@ function useControl(defaultValue) {
|
|
|
129
129
|
return { ...controlContext, value: controlContext.value ?? defaultValue };
|
|
130
130
|
}
|
|
131
131
|
|
|
132
|
-
// src/
|
|
132
|
+
// src/controls/settings-control.tsx
|
|
133
133
|
var import_ui = require("@elementor/ui");
|
|
134
134
|
|
|
135
135
|
// src/hooks/use-widget-settings.ts
|
|
@@ -167,7 +167,7 @@ var updateSettings = ({ id, props }) => {
|
|
|
167
167
|
});
|
|
168
168
|
};
|
|
169
169
|
|
|
170
|
-
// src/
|
|
170
|
+
// src/controls/settings-control.tsx
|
|
171
171
|
var SettingsControlProvider = ({ bind, children }) => {
|
|
172
172
|
const { element } = useElementContext();
|
|
173
173
|
const value = useWidgetSettings({ id: element.id, bind });
|
|
@@ -196,7 +196,7 @@ var Label = ({ children }) => {
|
|
|
196
196
|
};
|
|
197
197
|
SettingsControl.Label = Label;
|
|
198
198
|
|
|
199
|
-
// src/components/
|
|
199
|
+
// src/components/collapsible-section.tsx
|
|
200
200
|
var React3 = __toESM(require("react"));
|
|
201
201
|
var import_react3 = require("react");
|
|
202
202
|
var import_ui2 = require("@elementor/ui");
|
|
@@ -207,7 +207,7 @@ var CollapsibleSection = ({ title, children }) => {
|
|
|
207
207
|
return /* @__PURE__ */ React3.createElement(import_ui2.Accordion, { disableGutters: true, defaultExpanded: true }, /* @__PURE__ */ React3.createElement(import_ui2.AccordionSummary, { "aria-controls": contentId, id: labelId }, /* @__PURE__ */ React3.createElement(import_ui2.AccordionSummaryText, { primaryTypographyProps: { variant: "caption" } }, title)), /* @__PURE__ */ React3.createElement(import_ui2.AccordionDetails, { id: contentId, "aria-labelledby": labelId }, /* @__PURE__ */ React3.createElement(import_ui2.Stack, { gap: 2.5 }, children)));
|
|
208
208
|
};
|
|
209
209
|
|
|
210
|
-
// src/
|
|
210
|
+
// src/controls/control-types/select-control.tsx
|
|
211
211
|
var React4 = __toESM(require("react"));
|
|
212
212
|
var import_ui3 = require("@elementor/ui");
|
|
213
213
|
var SelectControl = ({ options }) => {
|
|
@@ -218,7 +218,7 @@ var SelectControl = ({ options }) => {
|
|
|
218
218
|
return /* @__PURE__ */ React4.createElement(import_ui3.Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options.map(({ label, ...props }) => /* @__PURE__ */ React4.createElement(import_ui3.MenuItem, { key: props.value, ...props }, label)));
|
|
219
219
|
};
|
|
220
220
|
|
|
221
|
-
// src/
|
|
221
|
+
// src/controls/control-types/text-area-control.tsx
|
|
222
222
|
var React5 = __toESM(require("react"));
|
|
223
223
|
var import_ui4 = require("@elementor/ui");
|
|
224
224
|
var TextAreaControl = ({ placeholder }) => {
|
|
@@ -240,7 +240,7 @@ var TextAreaControl = ({ placeholder }) => {
|
|
|
240
240
|
);
|
|
241
241
|
};
|
|
242
242
|
|
|
243
|
-
// src/
|
|
243
|
+
// src/controls/control-types/text-control.tsx
|
|
244
244
|
var React6 = __toESM(require("react"));
|
|
245
245
|
var import_ui5 = require("@elementor/ui");
|
|
246
246
|
var TextControl = ({ placeholder }) => {
|
|
@@ -249,8 +249,78 @@ var TextControl = ({ placeholder }) => {
|
|
|
249
249
|
return /* @__PURE__ */ React6.createElement(import_ui5.TextField, { type: "text", size: "tiny", value, onChange: handleChange, placeholder });
|
|
250
250
|
};
|
|
251
251
|
|
|
252
|
-
// src/
|
|
252
|
+
// src/controls/control-types/attachment-control.tsx
|
|
253
|
+
var React7 = __toESM(require("react"));
|
|
254
|
+
var import_ui6 = require("@elementor/ui");
|
|
255
|
+
var import_icons = require("@elementor/icons");
|
|
256
|
+
var import_i18n = require("@wordpress/i18n");
|
|
257
|
+
var import_wp_media = require("@elementor/wp-media");
|
|
258
|
+
var isImageAttachment = (value) => {
|
|
259
|
+
return value.$$type === "image-attachment";
|
|
260
|
+
};
|
|
261
|
+
var isImageUrl = (value) => {
|
|
262
|
+
return value.$$type === "image-url";
|
|
263
|
+
};
|
|
264
|
+
var defaultState = {
|
|
265
|
+
$$type: "image-url",
|
|
266
|
+
value: {
|
|
267
|
+
url: "/wp-content/plugins/elementor/assets/images/placeholder.png"
|
|
268
|
+
}
|
|
269
|
+
};
|
|
270
|
+
var AttachmentControl = (props) => {
|
|
271
|
+
const { value, setValue } = useControl(defaultState);
|
|
272
|
+
const { data: attachment } = (0, import_wp_media.useWpMediaAttachment)(isImageAttachment(value) ? value.value.id : void 0);
|
|
273
|
+
const getImageSrc = () => {
|
|
274
|
+
if (attachment?.url) {
|
|
275
|
+
return attachment.url;
|
|
276
|
+
}
|
|
277
|
+
if (isImageUrl(value)) {
|
|
278
|
+
return value.value.url;
|
|
279
|
+
}
|
|
280
|
+
return defaultState.value.url;
|
|
281
|
+
};
|
|
282
|
+
const { open } = (0, import_wp_media.useWpMediaFrame)({
|
|
283
|
+
types: props.mediaTypes,
|
|
284
|
+
multiple: false,
|
|
285
|
+
selected: isImageAttachment(value) ? value.value?.id : void 0,
|
|
286
|
+
onSelect: (val) => {
|
|
287
|
+
setValue({
|
|
288
|
+
$$type: "image-attachment",
|
|
289
|
+
value: {
|
|
290
|
+
id: val.id
|
|
291
|
+
}
|
|
292
|
+
});
|
|
293
|
+
}
|
|
294
|
+
});
|
|
295
|
+
return /* @__PURE__ */ React7.createElement(import_ui6.Card, { variant: "outlined" }, /* @__PURE__ */ React7.createElement(import_ui6.CardMedia, { image: getImageSrc(), sx: { height: 150 } }), /* @__PURE__ */ React7.createElement(import_ui6.CardOverlay, null, /* @__PURE__ */ React7.createElement(
|
|
296
|
+
import_ui6.Button,
|
|
297
|
+
{
|
|
298
|
+
color: "inherit",
|
|
299
|
+
size: "small",
|
|
300
|
+
variant: "outlined",
|
|
301
|
+
onClick: () => {
|
|
302
|
+
open({ mode: "browse" });
|
|
303
|
+
}
|
|
304
|
+
},
|
|
305
|
+
(0, import_i18n.__)("Select Image", "elementor")
|
|
306
|
+
), /* @__PURE__ */ React7.createElement(
|
|
307
|
+
import_ui6.Button,
|
|
308
|
+
{
|
|
309
|
+
color: "inherit",
|
|
310
|
+
size: "small",
|
|
311
|
+
variant: "text",
|
|
312
|
+
startIcon: /* @__PURE__ */ React7.createElement(import_icons.UploadIcon, null),
|
|
313
|
+
onClick: () => {
|
|
314
|
+
open({ mode: "upload" });
|
|
315
|
+
}
|
|
316
|
+
},
|
|
317
|
+
(0, import_i18n.__)("Upload Image", "elementor")
|
|
318
|
+
)));
|
|
319
|
+
};
|
|
320
|
+
|
|
321
|
+
// src/controls/get-control-by-type.ts
|
|
253
322
|
var controlTypes = {
|
|
323
|
+
attachment: AttachmentControl,
|
|
254
324
|
select: SelectControl,
|
|
255
325
|
text: TextControl,
|
|
256
326
|
textarea: TextAreaControl
|
|
@@ -259,21 +329,21 @@ var getControlByType = (type) => {
|
|
|
259
329
|
return controlTypes[type] ?? null;
|
|
260
330
|
};
|
|
261
331
|
|
|
262
|
-
// src/components/
|
|
332
|
+
// src/components/settings-tab.tsx
|
|
263
333
|
var SettingsTab = () => {
|
|
264
334
|
const { element } = useElementContext();
|
|
265
335
|
const elementType = useElementType(element?.type);
|
|
266
336
|
if (!elementType) {
|
|
267
337
|
return null;
|
|
268
338
|
}
|
|
269
|
-
return /* @__PURE__ */
|
|
339
|
+
return /* @__PURE__ */ React8.createElement(import_ui7.Stack, null, elementType.controls.map(({ type, value }, index) => {
|
|
270
340
|
if (type === "control") {
|
|
271
|
-
return /* @__PURE__ */
|
|
341
|
+
return /* @__PURE__ */ React8.createElement(Control, { key: value.bind, control: value });
|
|
272
342
|
}
|
|
273
343
|
if (type === "section") {
|
|
274
|
-
return /* @__PURE__ */
|
|
344
|
+
return /* @__PURE__ */ React8.createElement(CollapsibleSection, { key: type + "." + index, title: value.label }, value.items?.map((item) => {
|
|
275
345
|
if (item.type === "control") {
|
|
276
|
-
return /* @__PURE__ */
|
|
346
|
+
return /* @__PURE__ */ React8.createElement(Control, { key: item.value.bind, control: item.value });
|
|
277
347
|
}
|
|
278
348
|
return null;
|
|
279
349
|
}));
|
|
@@ -286,7 +356,7 @@ var Control = ({ control }) => {
|
|
|
286
356
|
if (!ControlComponent) {
|
|
287
357
|
return null;
|
|
288
358
|
}
|
|
289
|
-
return /* @__PURE__ */
|
|
359
|
+
return /* @__PURE__ */ React8.createElement(SettingsControl, { bind: control.bind }, control.label ? /* @__PURE__ */ React8.createElement(SettingsControl.Label, null, control.label) : null, /* @__PURE__ */ React8.createElement(
|
|
290
360
|
ControlComponent,
|
|
291
361
|
{
|
|
292
362
|
...control.props
|
|
@@ -294,18 +364,18 @@ var Control = ({ control }) => {
|
|
|
294
364
|
));
|
|
295
365
|
};
|
|
296
366
|
|
|
297
|
-
// src/components/
|
|
298
|
-
var
|
|
367
|
+
// src/components/style-tab.tsx
|
|
368
|
+
var React13 = __toESM(require("react"));
|
|
299
369
|
|
|
300
370
|
// src/contexts/style-context.tsx
|
|
301
|
-
var
|
|
371
|
+
var React9 = __toESM(require("react"));
|
|
302
372
|
var import_react4 = require("react");
|
|
303
373
|
var import_editor_responsive = require("@elementor/editor-responsive");
|
|
304
374
|
var Context2 = (0, import_react4.createContext)(null);
|
|
305
375
|
function StyleContext({ children, selectedStyleDef }) {
|
|
306
376
|
const breakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
|
|
307
377
|
const selectedMeta = { breakpoint, state: null };
|
|
308
|
-
return /* @__PURE__ */
|
|
378
|
+
return /* @__PURE__ */ React9.createElement(Context2.Provider, { value: { selectedStyleDef, selectedMeta } }, children);
|
|
309
379
|
}
|
|
310
380
|
function useStyleContext() {
|
|
311
381
|
const context = (0, import_react4.useContext)(Context2);
|
|
@@ -335,14 +405,14 @@ var useElementStyles = (elementID) => {
|
|
|
335
405
|
);
|
|
336
406
|
};
|
|
337
407
|
|
|
338
|
-
// src/components/
|
|
339
|
-
var
|
|
408
|
+
// src/components/style-tab.tsx
|
|
409
|
+
var import_ui11 = require("@elementor/ui");
|
|
340
410
|
|
|
341
|
-
// src/components/
|
|
342
|
-
var
|
|
411
|
+
// src/components/style-sections/size-section.tsx
|
|
412
|
+
var React12 = __toESM(require("react"));
|
|
343
413
|
|
|
344
|
-
// src/
|
|
345
|
-
var
|
|
414
|
+
// src/controls/style-control.tsx
|
|
415
|
+
var React10 = __toESM(require("react"));
|
|
346
416
|
|
|
347
417
|
// src/sync/update-style.ts
|
|
348
418
|
var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
|
|
@@ -387,8 +457,8 @@ function getVariantByMeta(styleDef, meta) {
|
|
|
387
457
|
});
|
|
388
458
|
}
|
|
389
459
|
|
|
390
|
-
// src/
|
|
391
|
-
var
|
|
460
|
+
// src/controls/style-control.tsx
|
|
461
|
+
var import_ui8 = require("@elementor/ui");
|
|
392
462
|
var StyleControl = ({ bind, children }) => {
|
|
393
463
|
const { element } = useElementContext();
|
|
394
464
|
const { selectedStyleDef, selectedMeta } = useStyleContext();
|
|
@@ -406,18 +476,18 @@ var StyleControl = ({ bind, children }) => {
|
|
|
406
476
|
meta: selectedMeta,
|
|
407
477
|
propName: bind
|
|
408
478
|
});
|
|
409
|
-
return /* @__PURE__ */
|
|
479
|
+
return /* @__PURE__ */ React10.createElement(ControlContext.Provider, { value: { bind, value, setValue } }, children);
|
|
410
480
|
};
|
|
411
481
|
var Label2 = ({ children }) => {
|
|
412
|
-
return /* @__PURE__ */
|
|
482
|
+
return /* @__PURE__ */ React10.createElement(import_ui8.Typography, { component: "label", variant: "caption", color: "text.secondary" }, children);
|
|
413
483
|
};
|
|
414
484
|
StyleControl.Label = Label2;
|
|
415
485
|
|
|
416
|
-
// src/
|
|
417
|
-
var
|
|
418
|
-
var
|
|
486
|
+
// src/controls/control-types/size-control.tsx
|
|
487
|
+
var React11 = __toESM(require("react"));
|
|
488
|
+
var import_ui9 = require("@elementor/ui");
|
|
419
489
|
var SizeControl = ({ units: units2, placeholder }) => {
|
|
420
|
-
const { value, setValue } = useControl(
|
|
490
|
+
const { value, setValue } = useControl(defaultState2);
|
|
421
491
|
const propValue = value.value;
|
|
422
492
|
const handleUnitChange = (event) => {
|
|
423
493
|
const unit = event.target.value;
|
|
@@ -430,8 +500,8 @@ var SizeControl = ({ units: units2, placeholder }) => {
|
|
|
430
500
|
}
|
|
431
501
|
setValue({ $$type: "size", value: { ...propValue, size } });
|
|
432
502
|
};
|
|
433
|
-
return /* @__PURE__ */
|
|
434
|
-
|
|
503
|
+
return /* @__PURE__ */ React11.createElement(import_ui9.Stack, { direction: "row" }, /* @__PURE__ */ React11.createElement(
|
|
504
|
+
import_ui9.TextField,
|
|
435
505
|
{
|
|
436
506
|
size: "tiny",
|
|
437
507
|
type: "number",
|
|
@@ -439,8 +509,8 @@ var SizeControl = ({ units: units2, placeholder }) => {
|
|
|
439
509
|
onChange: handleSizeChange,
|
|
440
510
|
placeholder
|
|
441
511
|
}
|
|
442
|
-
), /* @__PURE__ */
|
|
443
|
-
|
|
512
|
+
), /* @__PURE__ */ React11.createElement(
|
|
513
|
+
import_ui9.Select,
|
|
444
514
|
{
|
|
445
515
|
size: "tiny",
|
|
446
516
|
value: propValue.unit,
|
|
@@ -450,40 +520,40 @@ var SizeControl = ({ units: units2, placeholder }) => {
|
|
|
450
520
|
transformOrigin: { vertical: "top", horizontal: "right" }
|
|
451
521
|
}
|
|
452
522
|
},
|
|
453
|
-
units2.map((unit) => /* @__PURE__ */
|
|
523
|
+
units2.map((unit) => /* @__PURE__ */ React11.createElement(import_ui9.MenuItem, { key: unit, value: unit }, unit.toUpperCase()))
|
|
454
524
|
));
|
|
455
525
|
};
|
|
456
|
-
var
|
|
526
|
+
var defaultState2 = {
|
|
457
527
|
$$type: "size",
|
|
458
528
|
value: { unit: "px", size: 0 }
|
|
459
529
|
};
|
|
460
530
|
|
|
461
|
-
// src/components/
|
|
462
|
-
var
|
|
463
|
-
var
|
|
531
|
+
// src/components/style-sections/size-section.tsx
|
|
532
|
+
var import_ui10 = require("@elementor/ui");
|
|
533
|
+
var import_i18n2 = require("@wordpress/i18n");
|
|
464
534
|
var SizeSection = () => {
|
|
465
|
-
return /* @__PURE__ */
|
|
535
|
+
return /* @__PURE__ */ React12.createElement(CollapsibleSection, { title: (0, import_i18n2.__)("Size", "elementor") }, /* @__PURE__ */ React12.createElement(import_ui10.Stack, { gap: 1.5 }, /* @__PURE__ */ React12.createElement(import_ui10.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React12.createElement(Control2, { bind: "width", label: (0, import_i18n2.__)("Width", "elementor") }), /* @__PURE__ */ React12.createElement(Control2, { bind: "height", label: (0, import_i18n2.__)("Height", "elementor") })), /* @__PURE__ */ React12.createElement(import_ui10.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React12.createElement(Control2, { bind: "min-width", label: (0, import_i18n2.__)("Min. Width", "elementor") }), /* @__PURE__ */ React12.createElement(Control2, { bind: "min-height", label: (0, import_i18n2.__)("Min. Height", "elementor") })), /* @__PURE__ */ React12.createElement(import_ui10.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React12.createElement(Control2, { bind: "max-width", label: (0, import_i18n2.__)("Max. Width", "elementor") }), /* @__PURE__ */ React12.createElement(Control2, { bind: "max-height", label: (0, import_i18n2.__)("Max. Height", "elementor") }))));
|
|
466
536
|
};
|
|
467
537
|
var units = ["px", "%", "em", "rem", "vw"];
|
|
468
538
|
var Control2 = ({ label, bind }) => {
|
|
469
|
-
return /* @__PURE__ */
|
|
539
|
+
return /* @__PURE__ */ React12.createElement(StyleControl, { bind }, /* @__PURE__ */ React12.createElement(import_ui10.Stack, { gap: 1, sx: { flex: "0 1 50%" } }, /* @__PURE__ */ React12.createElement(StyleControl.Label, null, label), /* @__PURE__ */ React12.createElement(SizeControl, { units })));
|
|
470
540
|
};
|
|
471
541
|
|
|
472
|
-
// src/components/
|
|
542
|
+
// src/components/style-tab.tsx
|
|
473
543
|
var StyleTab = () => {
|
|
474
544
|
const { element } = useElementContext();
|
|
475
545
|
const elementStyles = useElementStyles(element.id);
|
|
476
546
|
const [selectedStyleDef = null] = Object.values(elementStyles || {});
|
|
477
|
-
return /* @__PURE__ */
|
|
547
|
+
return /* @__PURE__ */ React13.createElement(StyleContext, { selectedStyleDef }, /* @__PURE__ */ React13.createElement(import_ui11.Stack, null, /* @__PURE__ */ React13.createElement(SizeSection, null)));
|
|
478
548
|
};
|
|
479
549
|
|
|
480
|
-
// src/components/editing-panel
|
|
550
|
+
// src/components/editing-panel-tabs.tsx
|
|
481
551
|
var EditingPanelTabs = () => {
|
|
482
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
483
|
-
return /* @__PURE__ */
|
|
552
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui12.useTabs)("settings");
|
|
553
|
+
return /* @__PURE__ */ React14.createElement(import_ui12.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React14.createElement(import_ui12.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React14.createElement(import_ui12.Tab, { label: (0, import_i18n3.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React14.createElement(import_ui12.Tab, { label: (0, import_i18n3.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React14.createElement(import_ui12.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React14.createElement(SettingsTab, null)), /* @__PURE__ */ React14.createElement(import_ui12.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React14.createElement(StyleTab, null)));
|
|
484
554
|
};
|
|
485
555
|
|
|
486
|
-
// src/components/editing-panel
|
|
556
|
+
// src/components/editing-panel.tsx
|
|
487
557
|
var EditingPanel = () => {
|
|
488
558
|
const elements = useSelectedElements();
|
|
489
559
|
const [selectedElement] = elements;
|
|
@@ -491,8 +561,8 @@ var EditingPanel = () => {
|
|
|
491
561
|
if (elements.length !== 1 || !elementType) {
|
|
492
562
|
return null;
|
|
493
563
|
}
|
|
494
|
-
const panelTitle = (0,
|
|
495
|
-
return /* @__PURE__ */
|
|
564
|
+
const panelTitle = (0, import_i18n4.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
565
|
+
return /* @__PURE__ */ React15.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React15.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React15.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React15.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React15.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React15.createElement(EditingPanelTabs, null))));
|
|
496
566
|
};
|
|
497
567
|
|
|
498
568
|
// src/panel.ts
|
|
@@ -528,7 +598,7 @@ var useOpenEditorPanel = () => {
|
|
|
528
598
|
}, []);
|
|
529
599
|
};
|
|
530
600
|
|
|
531
|
-
// src/components/editing-panel
|
|
601
|
+
// src/components/editing-panel-hooks.tsx
|
|
532
602
|
var EditingPanelHooks = () => {
|
|
533
603
|
useOpenEditorPanel();
|
|
534
604
|
return null;
|