@gem-sdk/pages 1.23.0-staging.131 → 1.23.0-staging.153

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/builder/Toolbar.js +37 -18
  2. package/dist/cjs/libs/helpers/gen-fonts.js +6 -1
  3. package/dist/esm/components/builder/Toolbar.js +37 -18
  4. package/dist/esm/libs/helpers/gen-fonts.js +6 -1
  5. package/package.json +2 -2
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -40,7 +40,7 @@ const Toolbar = ()=>{
40
40
  }
41
41
  }
42
42
  };
43
- const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
43
+ const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection })=>{
44
44
  if (!$component && !componentUid) return;
45
45
  if (!$component) {
46
46
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -62,9 +62,7 @@ const Toolbar = ()=>{
62
62
  }
63
63
  if ($toolbar) {
64
64
  $toolbar.removeAttribute('style');
65
- if (!isParent) {
66
- $toolbar.setAttribute('data-toolbar-hover', 'true');
67
- }
65
+ $toolbar.setAttribute('data-toolbar-hover', 'true');
68
66
  if (focus) {
69
67
  $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
70
68
  }
@@ -76,9 +74,6 @@ const Toolbar = ()=>{
76
74
  }
77
75
  if ($outline) {
78
76
  $outline.setAttribute('data-outline-hover', 'true');
79
- if (isParent) {
80
- $outline.setAttribute('data-outline-parent-hover', 'true');
81
- }
82
77
  if (isThemeSection) {
83
78
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
84
79
  }
@@ -87,14 +82,10 @@ const Toolbar = ()=>{
87
82
  }
88
83
  }
89
84
  if ($btnAddTop) {
90
- if (!isParent) {
91
- $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
92
- }
85
+ $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
93
86
  }
94
87
  if ($btnAddBottom) {
95
- if (!isParent) {
96
- $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
97
- }
88
+ $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
98
89
  }
99
90
  }, []);
100
91
  const setHoverComponentParents = react.useCallback(({ $component, componentUid })=>{
@@ -103,13 +94,12 @@ const Toolbar = ()=>{
103
94
  if (!$c) return;
104
95
  $component = $c;
105
96
  }
106
- const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
97
+ const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
107
98
  if ($parents.length) {
108
99
  for (const $parent of $parents){
109
100
  if ($parent) {
110
101
  setHoverComponent({
111
- $component: $parent,
112
- isParent: true
102
+ $component: $parent
113
103
  });
114
104
  }
115
105
  }
@@ -187,8 +177,6 @@ const Toolbar = ()=>{
187
177
  'data-toolbar-hover-inside',
188
178
  'data-outline-hover',
189
179
  'data-toolbar-add-hover',
190
- 'data-column-visible',
191
- 'data-outline-parent-hover',
192
180
  'data-toolbar-hover-overflow'
193
181
  ];
194
182
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
@@ -262,6 +250,35 @@ const Toolbar = ()=>{
262
250
  }
263
251
  }
264
252
  }, []);
253
+ const setActiveComponentForceHoverSection = react.useCallback(($component, value)=>{
254
+ const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
255
+ if ($section) {
256
+ if (value) {
257
+ const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
258
+ const $outline = getChildrenByAttrSelector($section, 'data-outline');
259
+ if ($toolbar) {
260
+ $toolbar.setAttribute('data-toolbar-force-hover', 'true');
261
+ changePositionToolbar({
262
+ $toolbar,
263
+ $component,
264
+ state: 'hover'
265
+ });
266
+ }
267
+ if ($outline) {
268
+ $outline.setAttribute('data-outline-force-hover', 'true');
269
+ }
270
+ } else {
271
+ const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
272
+ const $outline = getChildrenByAttrSelector($section, 'data-outline');
273
+ if ($toolbar) {
274
+ $toolbar.removeAttribute('data-toolbar-force-hover');
275
+ }
276
+ if ($outline) {
277
+ $outline.removeAttribute('data-outline-force-hover');
278
+ }
279
+ }
280
+ }
281
+ }, []);
265
282
  const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
266
283
  if (!componentUid) return;
267
284
  let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
@@ -322,6 +339,7 @@ const Toolbar = ()=>{
322
339
  setActiveComponentSpacing({
323
340
  $component
324
341
  });
342
+ setActiveComponentForceHoverSection($component, true);
325
343
  removeHoverComponent();
326
344
  // Reactive when component re-render
327
345
  watchComponentReRender($component, ()=>{
@@ -335,6 +353,7 @@ const Toolbar = ()=>{
335
353
  }, [
336
354
  removeActiveComponent,
337
355
  removeHoverComponent,
356
+ setActiveComponentForceHoverSection,
338
357
  setActiveComponentSpacing
339
358
  ]);
340
359
  const setFocusTextEditor = async (value)=>{
package/dist/cjs/libs/helpers/gen-fonts.js CHANGED
@@ -19,7 +19,12 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
19
19
  const value = groupSetting[attr];
20
20
  if (value) {
21
21
  const customFontFamily = value.custom?.fontFamily;
22
- const customFontVariants = value.custom?.fontVariants;
22
+ let customFontVariants = value.custom?.fontVariants;
23
+ if (!customFontVariants?.length) {
24
+ customFontVariants = [
25
+ value.custom?.fontWeight
26
+ ];
27
+ }
23
28
  if (customFontFamily && customFontVariants?.length) {
24
29
  const variants = customFontVariants.map((item)=>{
25
30
  switch(item){
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -36,7 +36,7 @@ const Toolbar = ()=>{
36
36
  }
37
37
  }
38
38
  };
39
- const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
39
+ const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection })=>{
40
40
  if (!$component && !componentUid) return;
41
41
  if (!$component) {
42
42
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -58,9 +58,7 @@ const Toolbar = ()=>{
58
58
  }
59
59
  if ($toolbar) {
60
60
  $toolbar.removeAttribute('style');
61
- if (!isParent) {
62
- $toolbar.setAttribute('data-toolbar-hover', 'true');
63
- }
61
+ $toolbar.setAttribute('data-toolbar-hover', 'true');
64
62
  if (focus) {
65
63
  $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
66
64
  }
@@ -72,9 +70,6 @@ const Toolbar = ()=>{
72
70
  }
73
71
  if ($outline) {
74
72
  $outline.setAttribute('data-outline-hover', 'true');
75
- if (isParent) {
76
- $outline.setAttribute('data-outline-parent-hover', 'true');
77
- }
78
73
  if (isThemeSection) {
79
74
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
80
75
  }
@@ -83,14 +78,10 @@ const Toolbar = ()=>{
83
78
  }
84
79
  }
85
80
  if ($btnAddTop) {
86
- if (!isParent) {
87
- $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
88
- }
81
+ $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
89
82
  }
90
83
  if ($btnAddBottom) {
91
- if (!isParent) {
92
- $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
93
- }
84
+ $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
94
85
  }
95
86
  }, []);
96
87
  const setHoverComponentParents = useCallback(({ $component, componentUid })=>{
@@ -99,13 +90,12 @@ const Toolbar = ()=>{
99
90
  if (!$c) return;
100
91
  $component = $c;
101
92
  }
102
- const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
93
+ const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
103
94
  if ($parents.length) {
104
95
  for (const $parent of $parents){
105
96
  if ($parent) {
106
97
  setHoverComponent({
107
- $component: $parent,
108
- isParent: true
98
+ $component: $parent
109
99
  });
110
100
  }
111
101
  }
@@ -183,8 +173,6 @@ const Toolbar = ()=>{
183
173
  'data-toolbar-hover-inside',
184
174
  'data-outline-hover',
185
175
  'data-toolbar-add-hover',
186
- 'data-column-visible',
187
- 'data-outline-parent-hover',
188
176
  'data-toolbar-hover-overflow'
189
177
  ];
190
178
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
@@ -258,6 +246,35 @@ const Toolbar = ()=>{
258
246
  }
259
247
  }
260
248
  }, []);
249
+ const setActiveComponentForceHoverSection = useCallback(($component, value)=>{
250
+ const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
251
+ if ($section) {
252
+ if (value) {
253
+ const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
254
+ const $outline = getChildrenByAttrSelector($section, 'data-outline');
255
+ if ($toolbar) {
256
+ $toolbar.setAttribute('data-toolbar-force-hover', 'true');
257
+ changePositionToolbar({
258
+ $toolbar,
259
+ $component,
260
+ state: 'hover'
261
+ });
262
+ }
263
+ if ($outline) {
264
+ $outline.setAttribute('data-outline-force-hover', 'true');
265
+ }
266
+ } else {
267
+ const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
268
+ const $outline = getChildrenByAttrSelector($section, 'data-outline');
269
+ if ($toolbar) {
270
+ $toolbar.removeAttribute('data-toolbar-force-hover');
271
+ }
272
+ if ($outline) {
273
+ $outline.removeAttribute('data-outline-force-hover');
274
+ }
275
+ }
276
+ }
277
+ }, []);
261
278
  const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
262
279
  if (!componentUid) return;
263
280
  let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
@@ -318,6 +335,7 @@ const Toolbar = ()=>{
318
335
  setActiveComponentSpacing({
319
336
  $component
320
337
  });
338
+ setActiveComponentForceHoverSection($component, true);
321
339
  removeHoverComponent();
322
340
  // Reactive when component re-render
323
341
  watchComponentReRender($component, ()=>{
@@ -331,6 +349,7 @@ const Toolbar = ()=>{
331
349
  }, [
332
350
  removeActiveComponent,
333
351
  removeHoverComponent,
352
+ setActiveComponentForceHoverSection,
334
353
  setActiveComponentSpacing
335
354
  ]);
336
355
  const setFocusTextEditor = async (value)=>{
package/dist/esm/libs/helpers/gen-fonts.js CHANGED
@@ -17,7 +17,12 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
17
17
  const value = groupSetting[attr];
18
18
  if (value) {
19
19
  const customFontFamily = value.custom?.fontFamily;
20
- const customFontVariants = value.custom?.fontVariants;
20
+ let customFontVariants = value.custom?.fontVariants;
21
+ if (!customFontVariants?.length) {
22
+ customFontVariants = [
23
+ value.custom?.fontWeight
24
+ ];
25
+ }
21
26
  if (customFontFamily && customFontVariants?.length) {
22
27
  const variants = customFontVariants.map((item)=>{
23
28
  switch(item){
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.23.0-staging.131",
3
+ "version": "1.23.0-staging.153",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  "next-seo": "^6.0.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@gem-sdk/core": "1.23.0-staging.131",
28
+ "@gem-sdk/core": "1.23.0-staging.147",
29
29
  "@gem-sdk/plugin-cookie-bar": "1.23.0-staging.26",
30
30
  "@gem-sdk/plugin-quick-view": "1.23.0-staging.26",
31
31
  "@gem-sdk/plugin-sticky-add-to-cart": "1.23.0-staging.26"