@gem-sdk/core 1.22.31-new-feature.11 → 1.22.31-new-feature.15

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 (4) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +37 -5
  2. package/dist/esm/components/ComponentToolbarPreview.js +37 -5
  3. package/dist/types/index.d.ts +3 -2
  4. package/package.json +2 -2
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -4,8 +4,9 @@ var jsxRuntime = require('react/jsx-runtime');
4
4
  var react = require('react');
5
5
  require('zustand');
6
6
  var BuilderPreviewContext = require('../contexts/BuilderPreviewContext.js');
7
- require('swr');
7
+ var ShopContext = require('../contexts/ShopContext.js');
8
8
  require('@gem-sdk/adapter-shopify');
9
+ require('swr');
9
10
  require('swr/mutation');
10
11
  require('vanilla-lazyload');
11
12
  require('../hooks/useCartUI.js');
@@ -17,6 +18,7 @@ require('../helpers/convert.js');
17
18
  const SECTION_LIMIT = 25;
18
19
  const ComponentToolbarPreview = ({ ...props })=>{
19
20
  const isThemeSection = props.isThemeSection;
21
+ const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
20
22
  const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
21
23
  const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
22
24
  const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
@@ -126,6 +128,18 @@ const ComponentToolbarPreview = ({ ...props })=>{
126
128
  window.dispatchEvent(event);
127
129
  return false;
128
130
  };
131
+ const onZoomOut = (e)=>{
132
+ e.preventDefault();
133
+ e.stopPropagation();
134
+ const event = new CustomEvent('editor:toolbar:zoom-out-component', {
135
+ bubbles: true,
136
+ detail: {
137
+ componentUid: props.uid
138
+ }
139
+ });
140
+ window.dispatchEvent(event);
141
+ return false;
142
+ };
129
143
  const closeAddSection = ()=>{
130
144
  setActiveAddSection(null);
131
145
  window.removeEventListener('editor:close-add-section-popup', closeAddSection);
@@ -203,10 +217,10 @@ const ComponentToolbarPreview = ({ ...props })=>{
203
217
  }),
204
218
  props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
205
219
  "data-toolbar-name": true,
206
- children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}`
220
+ children: isThemeSection ? props.customLabel || props.label : `Section ${getIndexSection() + 1}${getSectionNumber() >= SECTION_LIMIT - 5 ? `/${SECTION_LIMIT}` : ''}`
207
221
  }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
208
222
  "data-toolbar-name": true,
209
- children: props.label
223
+ children: props.customLabel || props.label
210
224
  }),
211
225
  props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
212
226
  "data-toolbar-icon-parent": true,
@@ -273,9 +287,27 @@ const ComponentToolbarPreview = ({ ...props })=>{
273
287
  })
274
288
  ]
275
289
  }, parent.uid)),
276
- getSectionNumber() <= SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
290
+ editingPageType !== 'STATIC' && getSectionNumber() <= SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
277
291
  ...props
278
292
  }),
293
+ props.tag == 'Sticky' && /*#__PURE__*/ jsxRuntime.jsx("div", {
294
+ "data-toolbar-zoom-out": true,
295
+ onClick: (e)=>onZoomOut(e),
296
+ "aria-hidden": "true",
297
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
298
+ width: "16",
299
+ height: "16",
300
+ viewBox: "0 0 16 16",
301
+ fill: "none",
302
+ xmlns: "http://www.w3.org/2000/svg",
303
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
304
+ fillRule: "evenodd",
305
+ clipRule: "evenodd",
306
+ d: "M14.5 7C14.7761 7 15 6.77614 15 6.5C15 6.22386 14.7761 6 14.5 6L10.7072 6L14.8536 1.85355C15.0489 1.65829 15.0489 1.34171 14.8536 1.14645C14.6584 0.951186 14.3418 0.951185 14.1465 1.14645L10 5.29297L10 1.5C10 1.22386 9.77614 1 9.5 1C9.22386 1 9 1.22386 9 1.5L9 6.5C9 6.77614 9.22386 7 9.5 7L14.5 7ZM6 10.7073L6 14.5C6 14.7761 6.22386 15 6.5 15C6.77614 15 7 14.7761 7 14.5L7 9.5C7 9.22386 6.77614 9 6.5 9H1.5C1.22386 9 1 9.22386 1 9.5C1 9.77614 1.22386 10 1.5 10H5.29306L1.14662 14.1464C0.951353 14.3417 0.951353 14.6583 1.14662 14.8536C1.34188 15.0488 1.65846 15.0488 1.85372 14.8536L6 10.7073Z",
307
+ fill: "currentColor"
308
+ })
309
+ })
310
+ }),
279
311
  /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
280
312
  enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
281
313
  text: "Page has reached Shopify’s 25 section-limit",
@@ -316,7 +348,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
316
348
  })
317
349
  ]
318
350
  }),
319
- getSectionNumber() <= SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(ThemeSectionStatus.ThemeSectionStatus, {
351
+ editingPageType !== 'STATIC' && getSectionNumber() <= SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(ThemeSectionStatus.ThemeSectionStatus, {
320
352
  ...props
321
353
  }),
322
354
  /*#__PURE__*/ jsxRuntime.jsx("div", {
package/dist/esm/components/ComponentToolbarPreview.js CHANGED
@@ -2,8 +2,9 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { useState, useCallback, useEffect } from 'react';
3
3
  import 'zustand';
4
4
  import { useBuilderPreviewStore } from '../contexts/BuilderPreviewContext.js';
5
- import 'swr';
5
+ import { useShopStore } from '../contexts/ShopContext.js';
6
6
  import '@gem-sdk/adapter-shopify';
7
+ import 'swr';
7
8
  import 'swr/mutation';
8
9
  import 'vanilla-lazyload';
9
10
  import '../hooks/useCartUI.js';
@@ -15,6 +16,7 @@ import '../helpers/convert.js';
15
16
  const SECTION_LIMIT = 25;
16
17
  const ComponentToolbarPreview = ({ ...props })=>{
17
18
  const isThemeSection = props.isThemeSection;
19
+ const editingPageType = useShopStore((s)=>s.pageType);
18
20
  const getParents = useBuilderPreviewStore((s)=>s.getParents);
19
21
  const root = useBuilderPreviewStore((s)=>s.getItem('ROOT'));
20
22
  const isThemeSectionEditor = useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
@@ -124,6 +126,18 @@ const ComponentToolbarPreview = ({ ...props })=>{
124
126
  window.dispatchEvent(event);
125
127
  return false;
126
128
  };
129
+ const onZoomOut = (e)=>{
130
+ e.preventDefault();
131
+ e.stopPropagation();
132
+ const event = new CustomEvent('editor:toolbar:zoom-out-component', {
133
+ bubbles: true,
134
+ detail: {
135
+ componentUid: props.uid
136
+ }
137
+ });
138
+ window.dispatchEvent(event);
139
+ return false;
140
+ };
127
141
  const closeAddSection = ()=>{
128
142
  setActiveAddSection(null);
129
143
  window.removeEventListener('editor:close-add-section-popup', closeAddSection);
@@ -201,10 +215,10 @@ const ComponentToolbarPreview = ({ ...props })=>{
201
215
  }),
202
216
  props.tag == 'Section' ? /*#__PURE__*/ jsx("div", {
203
217
  "data-toolbar-name": true,
204
- children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}`
218
+ children: isThemeSection ? props.customLabel || props.label : `Section ${getIndexSection() + 1}${getSectionNumber() >= SECTION_LIMIT - 5 ? `/${SECTION_LIMIT}` : ''}`
205
219
  }) : /*#__PURE__*/ jsx("div", {
206
220
  "data-toolbar-name": true,
207
- children: props.label
221
+ children: props.customLabel || props.label
208
222
  }),
209
223
  props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsx("div", {
210
224
  "data-toolbar-icon-parent": true,
@@ -271,9 +285,27 @@ const ComponentToolbarPreview = ({ ...props })=>{
271
285
  })
272
286
  ]
273
287
  }, parent.uid)),
274
- getSectionNumber() <= SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
288
+ editingPageType !== 'STATIC' && getSectionNumber() <= SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
275
289
  ...props
276
290
  }),
291
+ props.tag == 'Sticky' && /*#__PURE__*/ jsx("div", {
292
+ "data-toolbar-zoom-out": true,
293
+ onClick: (e)=>onZoomOut(e),
294
+ "aria-hidden": "true",
295
+ children: /*#__PURE__*/ jsx("svg", {
296
+ width: "16",
297
+ height: "16",
298
+ viewBox: "0 0 16 16",
299
+ fill: "none",
300
+ xmlns: "http://www.w3.org/2000/svg",
301
+ children: /*#__PURE__*/ jsx("path", {
302
+ fillRule: "evenodd",
303
+ clipRule: "evenodd",
304
+ d: "M14.5 7C14.7761 7 15 6.77614 15 6.5C15 6.22386 14.7761 6 14.5 6L10.7072 6L14.8536 1.85355C15.0489 1.65829 15.0489 1.34171 14.8536 1.14645C14.6584 0.951186 14.3418 0.951185 14.1465 1.14645L10 5.29297L10 1.5C10 1.22386 9.77614 1 9.5 1C9.22386 1 9 1.22386 9 1.5L9 6.5C9 6.77614 9.22386 7 9.5 7L14.5 7ZM6 10.7073L6 14.5C6 14.7761 6.22386 15 6.5 15C6.77614 15 7 14.7761 7 14.5L7 9.5C7 9.22386 6.77614 9 6.5 9H1.5C1.22386 9 1 9.22386 1 9.5C1 9.77614 1.22386 10 1.5 10H5.29306L1.14662 14.1464C0.951353 14.3417 0.951353 14.6583 1.14662 14.8536C1.34188 15.0488 1.65846 15.0488 1.85372 14.8536L6 10.7073Z",
305
+ fill: "currentColor"
306
+ })
307
+ })
308
+ }),
277
309
  /*#__PURE__*/ jsx(Tooltip, {
278
310
  enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
279
311
  text: "Page has reached Shopify’s 25 section-limit",
@@ -314,7 +346,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
314
346
  })
315
347
  ]
316
348
  }),
317
- getSectionNumber() <= SECTION_LIMIT && /*#__PURE__*/ jsx(ThemeSectionStatus, {
349
+ editingPageType !== 'STATIC' && getSectionNumber() <= SECTION_LIMIT && /*#__PURE__*/ jsx(ThemeSectionStatus, {
318
350
  ...props
319
351
  }),
320
352
  /*#__PURE__*/ jsx("div", {
package/dist/types/index.d.ts CHANGED
@@ -30,6 +30,8 @@ type BlockEntity = {
30
30
  uid: string;
31
31
  tag: string;
32
32
  label?: string;
33
+ customLabel?: string;
34
+ name?: string;
33
35
  dateModified?: string | number;
34
36
  childrens?: string[];
35
37
  settings?: Record<string, any>;
@@ -37,7 +39,6 @@ type BlockEntity = {
37
39
  styles?: Record<string, any>;
38
40
  editorConfigs?: Record<string, any>;
39
41
  type?: 'component';
40
- name?: string;
41
42
  isThemeSection?: boolean;
42
43
  needPublishing?: boolean;
43
44
  };
@@ -989,7 +990,7 @@ type ControlUI = {
989
990
  };
990
991
  isMoreSetting?: boolean;
991
992
  };
992
- type PageType = 'ARTICLE' | 'BLOG' | 'COLLECTION' | 'GP_ARTICLE' | 'GP_BLOG' | 'GP_COLLECTION' | 'GP_INDEX' | 'GP_PRODUCT' | 'GP_STATIC' | 'PRODUCT' | 'STATIC';
993
+ type PageType = 'ARTICLE' | 'BLOG' | 'COLLECTION' | 'GP_ARTICLE' | 'GP_BLOG' | 'GP_COLLECTION' | 'GP_INDEX' | 'GP_PRODUCT' | 'GP_STATIC' | 'PRODUCT' | 'STATIC' | 'THEME_SECTION';
993
994
  type ComponentPreset = {
994
995
  id: string;
995
996
  name: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.22.31-new-feature.11",
3
+ "version": "1.22.31-new-feature.15",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "devDependencies": {
27
27
  "@gem-sdk/adapter-shopify": "1.22.31-staging.0",
28
- "@gem-sdk/styles": "1.22.31-new-feature.11"
28
+ "@gem-sdk/styles": "1.22.31-new-feature.15"
29
29
  },
30
30
  "dependencies": {
31
31
  "react-error-boundary": "4.0.10",