@gem-sdk/pages 1.45.0-dev.91 → 1.45.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.
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var core = require('@gem-sdk/core');
7
7
  var SwitchView = require('./SwitchView.js');
8
- var InteractionSelectOnPageHeader = require('./InteractionSelectOnPageHeader.js');
9
8
 
10
9
  const defaultMargin = {
11
10
  desktop: '16px',
@@ -22,7 +21,6 @@ const sizeCheck = {
22
21
  const Header = (props)=>{
23
22
  const { pageType, isOriginTemplate } = props;
24
23
  const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
25
- const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
26
24
  const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
27
25
  const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
28
26
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -179,8 +177,7 @@ const Header = (props)=>{
179
177
  })
180
178
  ]
181
179
  })
182
- }),
183
- isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
180
+ })
184
181
  ]
185
182
  });
186
183
  };
@@ -20,7 +20,7 @@ const PopupManager = ()=>{
20
20
  ]);
21
21
  const onSetActiveModal = react.useCallback((e)=>{
22
22
  const detail = e.detail;
23
- setModalActive(detail?.modalId, false);
23
+ setModalActive(detail?.modalId);
24
24
  }, [
25
25
  setModalActive
26
26
  ]);
@@ -379,30 +379,23 @@ const Toolbar = ()=>{
379
379
  countShowOnboarding,
380
380
  onCloseOnboarding
381
381
  ]);
382
- const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
382
+ const getSelectorComponent = ({ componentUid, productId, articleId })=>{
383
383
  if (articleId) {
384
384
  return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
385
385
  }
386
- if (marqueeKey) {
387
- return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
388
- }
389
386
  return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
390
387
  };
391
- const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 600, articleId, forceReActive, marqueeKey })=>{
388
+ const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, articleId, forceReActive })=>{
392
389
  if (!componentUid) return;
393
390
  const selector = getSelectorComponent({
394
391
  componentUid,
395
392
  productId,
396
- articleId,
397
- marqueeKey
393
+ articleId
398
394
  });
399
395
  const $component = await waitForElementToExist(selector, timeAwait);
400
396
  if (!$component) return;
401
- if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
397
+ if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId) return;
402
398
  if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || forceReActive) removeActiveComponent();
403
- if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
404
- removeActiveComponent();
405
- }
406
399
  const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
407
400
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
408
401
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
@@ -411,8 +404,7 @@ const Toolbar = ()=>{
411
404
  currentComponentActive.current = {
412
405
  componentUid,
413
406
  productId,
414
- articleId,
415
- marqueeKey
407
+ articleId
416
408
  };
417
409
  $toolbar.removeAttribute('style');
418
410
  $toolbar.setAttribute('data-toolbar-active', 'true');
@@ -431,9 +423,8 @@ const Toolbar = ()=>{
431
423
  if ($btnAddBottom) {
432
424
  $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
433
425
  }
434
- const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
435
426
  // Active same element in product list
436
- if (productId || articleId || isChildOfMarquee) {
427
+ if (productId || articleId) {
437
428
  const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
438
429
  if ($relatedElements?.length) {
439
430
  $relatedElements.forEach(($relatedElement)=>{
@@ -694,8 +685,7 @@ const Toolbar = ()=>{
694
685
  setActiveComponent({
695
686
  componentUid: detail.componentUid,
696
687
  productId: detail.productId,
697
- articleId: detail.articleId,
698
- marqueeKey: detail.marqueeKey
688
+ articleId: detail.articleId
699
689
  });
700
690
  } else {
701
691
  removeActiveComponent();
@@ -36,8 +36,6 @@ const Toolbox = ()=>{
36
36
  const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
37
37
  const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
38
38
  const clearModal = core.useModalStore((s)=>s.clearModal);
39
- const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
40
- const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
41
39
  const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
42
40
  state
43
41
  ]);
@@ -331,18 +329,6 @@ const Toolbox = ()=>{
331
329
  }, [
332
330
  setSalePageProductId
333
331
  ]);
334
- const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
335
- const isSelectOnPage = e.detail;
336
- setInteractionIsSelectOnPage(isSelectOnPage);
337
- }, [
338
- setInteractionIsSelectOnPage
339
- ]);
340
- const onUpdateInteractionItem = react.useCallback((e)=>{
341
- const interactionItem = e.detail;
342
- setInteractionItem(interactionItem);
343
- }, [
344
- setInteractionItem
345
- ]);
346
332
  react.useEffect(()=>{
347
333
  if (fonts) {
348
334
  setFontsToHead('google-font-element', fonts);
@@ -370,8 +356,6 @@ const Toolbox = ()=>{
370
356
  window.addEventListener('update-item-attribute', onUpdateItemAttribute);
371
357
  window.addEventListener('set-product-offer', onUpdateProductOffers);
372
358
  window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
373
- window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
374
- window.addEventListener('update-interaction-item', onUpdateInteractionItem);
375
359
  return ()=>{
376
360
  window.removeEventListener('update-shop-info', onChangeShopInfo);
377
361
  window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -391,8 +375,6 @@ const Toolbox = ()=>{
391
375
  window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
392
376
  window.removeEventListener('set-product-offer', onUpdateProductOffers);
393
377
  window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
394
- window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
395
- window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
396
378
  };
397
379
  }, [
398
380
  onAddEntity,
@@ -413,9 +395,7 @@ const Toolbox = ()=>{
413
395
  onUpdateItemName,
414
396
  onUpdateItemAttribute,
415
397
  onUpdateProductOffers,
416
- onUpdateSalePageProductId,
417
- onUpdateInteractionItem,
418
- onUpdateInteractionIsSelectOnPage
398
+ onUpdateSalePageProductId
419
399
  ]);
420
400
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
421
401
  className: "toolbox"
@@ -89,12 +89,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
89
89
  }),
90
90
  ACTIONS_DATA.map((action)=>{
91
91
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
92
- className: `gp-relative gp-mx-1 gp-h-[60px] mobile:gp-h-[72px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
92
+ className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
93
93
  id: action.id,
94
94
  "aria-hidden": true,
95
95
  children: [
96
96
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
97
- className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121] mobile:gp-flex-col mobile:gp-items-center mobile:gp-gap-0",
97
+ className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
98
98
  children: [
99
99
  action.title,
100
100
  action.hasAILogo && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
@@ -68,7 +68,7 @@ async function getFonts(fonts, option, isImportFontByUrl = true) {
68
68
  getFontForUA(url, IE_UA),
69
69
  getFontForUA(url, CHROME_UA)
70
70
  ]);
71
- const maxSize = 100; // 100KB
71
+ const maxSize = 50; // 50KB
72
72
  const value = ie + chrome;
73
73
  if (maxSize) {
74
74
  const textEncoder = new TextEncoder();
@@ -71,7 +71,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
71
71
  className: "builder gp-z-1 gp-relative",
72
72
  children: [
73
73
  !hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsxRuntime.jsx("div", {
74
- className: "gp-h-[40px] gp-bg-[#f4f4f4]",
74
+ className: "gp-h-[40px] gp-bg-[#ffffff] gp-border-b-[1px] gp-border-[#eeeeee]",
75
75
  children: /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {})
76
76
  }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {
77
77
  pageType: pageType,
@@ -1,7 +1,6 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
- import { useShopStore, usePageStore, cls, makeStyleResponsive } from '@gem-sdk/core';
2
+ import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
3
3
  import Devices from './SwitchView.js';
4
- import InteractionSelectOnPageHeader from './InteractionSelectOnPageHeader.js';
5
4
 
6
5
  const defaultMargin = {
7
6
  desktop: '16px',
@@ -18,7 +17,6 @@ const sizeCheck = {
18
17
  const Header = (props)=>{
19
18
  const { pageType, isOriginTemplate } = props;
20
19
  const layoutSetting = useShopStore((s)=>s.layoutSettings);
21
- const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
22
20
  const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
23
21
  const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
24
22
  return /*#__PURE__*/ jsxs(Fragment, {
@@ -175,8 +173,7 @@ const Header = (props)=>{
175
173
  })
176
174
  ]
177
175
  })
178
- }),
179
- isSelectOnPage && /*#__PURE__*/ jsx(InteractionSelectOnPageHeader, {})
176
+ })
180
177
  ]
181
178
  });
182
179
  };
@@ -16,7 +16,7 @@ const PopupManager = ()=>{
16
16
  ]);
17
17
  const onSetActiveModal = useCallback((e)=>{
18
18
  const detail = e.detail;
19
- setModalActive(detail?.modalId, false);
19
+ setModalActive(detail?.modalId);
20
20
  }, [
21
21
  setModalActive
22
22
  ]);
@@ -375,30 +375,23 @@ const Toolbar = ()=>{
375
375
  countShowOnboarding,
376
376
  onCloseOnboarding
377
377
  ]);
378
- const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
378
+ const getSelectorComponent = ({ componentUid, productId, articleId })=>{
379
379
  if (articleId) {
380
380
  return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
381
381
  }
382
- if (marqueeKey) {
383
- return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
384
- }
385
382
  return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
386
383
  };
387
- const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 600, articleId, forceReActive, marqueeKey })=>{
384
+ const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, articleId, forceReActive })=>{
388
385
  if (!componentUid) return;
389
386
  const selector = getSelectorComponent({
390
387
  componentUid,
391
388
  productId,
392
- articleId,
393
- marqueeKey
389
+ articleId
394
390
  });
395
391
  const $component = await waitForElementToExist(selector, timeAwait);
396
392
  if (!$component) return;
397
- if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
393
+ if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId) return;
398
394
  if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || forceReActive) removeActiveComponent();
399
- if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
400
- removeActiveComponent();
401
- }
402
395
  const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
403
396
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
404
397
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
@@ -407,8 +400,7 @@ const Toolbar = ()=>{
407
400
  currentComponentActive.current = {
408
401
  componentUid,
409
402
  productId,
410
- articleId,
411
- marqueeKey
403
+ articleId
412
404
  };
413
405
  $toolbar.removeAttribute('style');
414
406
  $toolbar.setAttribute('data-toolbar-active', 'true');
@@ -427,9 +419,8 @@ const Toolbar = ()=>{
427
419
  if ($btnAddBottom) {
428
420
  $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
429
421
  }
430
- const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
431
422
  // Active same element in product list
432
- if (productId || articleId || isChildOfMarquee) {
423
+ if (productId || articleId) {
433
424
  const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
434
425
  if ($relatedElements?.length) {
435
426
  $relatedElements.forEach(($relatedElement)=>{
@@ -690,8 +681,7 @@ const Toolbar = ()=>{
690
681
  setActiveComponent({
691
682
  componentUid: detail.componentUid,
692
683
  productId: detail.productId,
693
- articleId: detail.articleId,
694
- marqueeKey: detail.marqueeKey
684
+ articleId: detail.articleId
695
685
  });
696
686
  } else {
697
687
  removeActiveComponent();
@@ -32,8 +32,6 @@ const Toolbox = ()=>{
32
32
  const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
33
33
  const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
34
34
  const clearModal = useModalStore((s)=>s.clearModal);
35
- const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
36
- const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
37
35
  const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
38
36
  state
39
37
  ]);
@@ -327,18 +325,6 @@ const Toolbox = ()=>{
327
325
  }, [
328
326
  setSalePageProductId
329
327
  ]);
330
- const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
331
- const isSelectOnPage = e.detail;
332
- setInteractionIsSelectOnPage(isSelectOnPage);
333
- }, [
334
- setInteractionIsSelectOnPage
335
- ]);
336
- const onUpdateInteractionItem = useCallback((e)=>{
337
- const interactionItem = e.detail;
338
- setInteractionItem(interactionItem);
339
- }, [
340
- setInteractionItem
341
- ]);
342
328
  useEffect(()=>{
343
329
  if (fonts) {
344
330
  setFontsToHead('google-font-element', fonts);
@@ -366,8 +352,6 @@ const Toolbox = ()=>{
366
352
  window.addEventListener('update-item-attribute', onUpdateItemAttribute);
367
353
  window.addEventListener('set-product-offer', onUpdateProductOffers);
368
354
  window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
369
- window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
370
- window.addEventListener('update-interaction-item', onUpdateInteractionItem);
371
355
  return ()=>{
372
356
  window.removeEventListener('update-shop-info', onChangeShopInfo);
373
357
  window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -387,8 +371,6 @@ const Toolbox = ()=>{
387
371
  window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
388
372
  window.removeEventListener('set-product-offer', onUpdateProductOffers);
389
373
  window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
390
- window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
391
- window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
392
374
  };
393
375
  }, [
394
376
  onAddEntity,
@@ -409,9 +391,7 @@ const Toolbox = ()=>{
409
391
  onUpdateItemName,
410
392
  onUpdateItemAttribute,
411
393
  onUpdateProductOffers,
412
- onUpdateSalePageProductId,
413
- onUpdateInteractionItem,
414
- onUpdateInteractionIsSelectOnPage
394
+ onUpdateSalePageProductId
415
395
  ]);
416
396
  return /*#__PURE__*/ jsx("div", {
417
397
  className: "toolbox"
@@ -85,12 +85,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
85
85
  }),
86
86
  ACTIONS_DATA.map((action)=>{
87
87
  return /*#__PURE__*/ jsxs("div", {
88
- className: `gp-relative gp-mx-1 gp-h-[60px] mobile:gp-h-[72px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
88
+ className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
89
89
  id: action.id,
90
90
  "aria-hidden": true,
91
91
  children: [
92
92
  /*#__PURE__*/ jsxs("div", {
93
- className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121] mobile:gp-flex-col mobile:gp-items-center mobile:gp-gap-0",
93
+ className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
94
94
  children: [
95
95
  action.title,
96
96
  action.hasAILogo && /*#__PURE__*/ jsxs("svg", {
@@ -66,7 +66,7 @@ async function getFonts(fonts, option, isImportFontByUrl = true) {
66
66
  getFontForUA(url, IE_UA),
67
67
  getFontForUA(url, CHROME_UA)
68
68
  ]);
69
- const maxSize = 100; // 100KB
69
+ const maxSize = 50; // 50KB
70
70
  const value = ie + chrome;
71
71
  if (maxSize) {
72
72
  const textEncoder = new TextEncoder();
@@ -69,7 +69,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
69
69
  className: "builder gp-z-1 gp-relative",
70
70
  children: [
71
71
  !hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsx("div", {
72
- className: "gp-h-[40px] gp-bg-[#f4f4f4]",
72
+ className: "gp-h-[40px] gp-bg-[#ffffff] gp-border-b-[1px] gp-border-[#eeeeee]",
73
73
  children: /*#__PURE__*/ jsx(Devices, {})
74
74
  }) : /*#__PURE__*/ jsx(Header, {
75
75
  pageType: pageType,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.45.0-dev.91",
3
+ "version": "1.45.0",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
26
26
  "next": "latest"
27
27
  },
28
28
  "devDependencies": {
29
- "@gem-sdk/core": "1.45.0-dev.91",
30
- "@gem-sdk/plugin-cookie-bar": "1.45.0-dev.91",
31
- "@gem-sdk/plugin-quick-view": "1.45.0-dev.91",
32
- "@gem-sdk/plugin-sticky-add-to-cart": "1.45.0-dev.91"
29
+ "@gem-sdk/core": "1.45.0",
30
+ "@gem-sdk/plugin-cookie-bar": "1.45.0",
31
+ "@gem-sdk/plugin-quick-view": "1.45.0",
32
+ "@gem-sdk/plugin-sticky-add-to-cart": "1.45.0"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "next": ">=13"
@@ -1,61 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var core = require('@gem-sdk/core');
7
-
8
- const InteractionSelectOnPageHeader = ()=>{
9
- const selectType = core.usePageStore((s)=>s.interactionData?.selectType);
10
- const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
11
- const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
12
- const closeSelectOnPage = ()=>{
13
- setInteractionIsSelectOnPage(false);
14
- const event = new CustomEvent('editor:interaction:change-select-on-page', {
15
- bubbles: true,
16
- detail: false
17
- });
18
- window.dispatchEvent(event);
19
- };
20
- console.log('selectType123', selectType);
21
- return /*#__PURE__*/ jsxRuntime.jsxs("header", {
22
- className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full",
23
- children: [
24
- /*#__PURE__*/ jsxRuntime.jsx("div", {
25
- className: "gp-h-10 gp-w-10"
26
- }),
27
- /*#__PURE__*/ jsxRuntime.jsxs("section", {
28
- className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-p-1 gp-gap-1",
29
- children: [
30
- /*#__PURE__*/ jsxRuntime.jsx("button", {
31
- onClick: ()=>setInteractionSelectType('element'),
32
- className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-[6px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
33
- children: "Select an element"
34
- }),
35
- /*#__PURE__*/ jsxRuntime.jsx("button", {
36
- onClick: ()=>setInteractionSelectType('page'),
37
- className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-[6px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
38
- children: "Choose entire page"
39
- })
40
- ]
41
- }),
42
- /*#__PURE__*/ jsxRuntime.jsx("button", {
43
- onClick: closeSelectOnPage,
44
- className: "gp-h-10 gp-w-10 gp-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
45
- children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
46
- width: "20",
47
- height: "20",
48
- viewBox: "0 0 20 20",
49
- fill: "none",
50
- xmlns: "http://www.w3.org/2000/svg",
51
- children: /*#__PURE__*/ jsxRuntime.jsx("path", {
52
- d: "M3.94194 3.05806C3.69786 2.81398 3.30214 2.81398 3.05806 3.05806C2.81398 3.30214 2.81398 3.69786 3.05806 3.94194L9.11612 10L3.05806 16.0581C2.81398 16.3021 2.81398 16.6979 3.05806 16.9419C3.30214 17.186 3.69786 17.186 3.94194 16.9419L10 10.8839L16.0581 16.9419C16.3021 17.186 16.6979 17.186 16.9419 16.9419C17.186 16.6979 17.186 16.3021 16.9419 16.0581L10.8839 10L16.9419 3.94194C17.186 3.69786 17.186 3.30214 16.9419 3.05806C16.6979 2.81398 16.3021 2.81398 16.0581 3.05806L10 9.11612L3.94194 3.05806Z",
53
- fill: "#3C67FF"
54
- })
55
- })
56
- })
57
- ]
58
- });
59
- };
60
-
61
- exports.default = InteractionSelectOnPageHeader;
@@ -1,57 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { usePageStore } from '@gem-sdk/core';
3
-
4
- const InteractionSelectOnPageHeader = ()=>{
5
- const selectType = usePageStore((s)=>s.interactionData?.selectType);
6
- const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
7
- const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
8
- const closeSelectOnPage = ()=>{
9
- setInteractionIsSelectOnPage(false);
10
- const event = new CustomEvent('editor:interaction:change-select-on-page', {
11
- bubbles: true,
12
- detail: false
13
- });
14
- window.dispatchEvent(event);
15
- };
16
- console.log('selectType123', selectType);
17
- return /*#__PURE__*/ jsxs("header", {
18
- className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full",
19
- children: [
20
- /*#__PURE__*/ jsx("div", {
21
- className: "gp-h-10 gp-w-10"
22
- }),
23
- /*#__PURE__*/ jsxs("section", {
24
- className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-p-1 gp-gap-1",
25
- children: [
26
- /*#__PURE__*/ jsx("button", {
27
- onClick: ()=>setInteractionSelectType('element'),
28
- className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-[6px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
29
- children: "Select an element"
30
- }),
31
- /*#__PURE__*/ jsx("button", {
32
- onClick: ()=>setInteractionSelectType('page'),
33
- className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-[6px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
34
- children: "Choose entire page"
35
- })
36
- ]
37
- }),
38
- /*#__PURE__*/ jsx("button", {
39
- onClick: closeSelectOnPage,
40
- className: "gp-h-10 gp-w-10 gp-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
41
- children: /*#__PURE__*/ jsx("svg", {
42
- width: "20",
43
- height: "20",
44
- viewBox: "0 0 20 20",
45
- fill: "none",
46
- xmlns: "http://www.w3.org/2000/svg",
47
- children: /*#__PURE__*/ jsx("path", {
48
- d: "M3.94194 3.05806C3.69786 2.81398 3.30214 2.81398 3.05806 3.05806C2.81398 3.30214 2.81398 3.69786 3.05806 3.94194L9.11612 10L3.05806 16.0581C2.81398 16.3021 2.81398 16.6979 3.05806 16.9419C3.30214 17.186 3.69786 17.186 3.94194 16.9419L10 10.8839L16.0581 16.9419C16.3021 17.186 16.6979 17.186 16.9419 16.9419C17.186 16.6979 17.186 16.3021 16.9419 16.0581L10.8839 10L16.9419 3.94194C17.186 3.69786 17.186 3.30214 16.9419 3.05806C16.6979 2.81398 16.3021 2.81398 16.0581 3.05806L10 9.11612L3.94194 3.05806Z",
49
- fill: "#3C67FF"
50
- })
51
- })
52
- })
53
- ]
54
- });
55
- };
56
-
57
- export { InteractionSelectOnPageHeader as default };