@gem-sdk/plugin-quick-view 1.11.0 → 1.11.1-experimental-8f483e48

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 (7) hide show
  1. package/dist/cjs/components/QuickView.js +38 -130
  2. package/dist/cjs/setting/QuickView.js +1 -1
  3. package/dist/cjs/setting/index.js +1 -3
  4. package/dist/esm/components/QuickView.js +38 -130
  5. package/dist/esm/setting/QuickView.js +1 -1
  6. package/dist/esm/setting/index.js +1 -3
  7. package/package.json +4 -4
package/dist/cjs/components/QuickView.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  'use strict';
2
3
 
3
4
  Object.defineProperty(exports, '__esModule', { value: true });
@@ -7,156 +8,63 @@ var components = require('@gem-sdk/components');
7
8
  var core = require('@gem-sdk/core');
8
9
  var react = require('react');
9
10
 
10
- const ModalContent = ()=>{
11
+ const ModalContent = () => {
11
12
  const product = core.useProduct();
12
- const { data , isLoading: loading , error } = core.useProductQuery(product?.id);
13
- if (loading) return /*#__PURE__*/ jsxRuntime.jsx("div", {
14
- children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
15
- className: "mx-auto my-20 h-8 w-8 animate-spin",
16
- xmlns: "http://www.w3.org/2000/svg",
17
- fill: "none",
18
- viewBox: "0 0 24 24",
19
- children: [
20
- /*#__PURE__*/ jsxRuntime.jsx("circle", {
21
- className: "opacity-25",
22
- cx: "12",
23
- cy: "12",
24
- r: "10",
25
- stroke: "currentColor",
26
- strokeWidth: "4"
27
- }),
28
- /*#__PURE__*/ jsxRuntime.jsx("path", {
29
- className: "opacity-75",
30
- fill: "currentColor",
31
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
32
- })
33
- ]
34
- })
35
- });
36
- if (error) return /*#__PURE__*/ jsxRuntime.jsx("p", {
37
- className: "py-20 text-center font-semibold",
38
- children: "Something went wrong"
39
- });
40
- return /*#__PURE__*/ jsxRuntime.jsx(core.ProductProvider, {
41
- product: data,
42
- children: /*#__PURE__*/ jsxRuntime.jsxs(components.Row, {
43
- setting: {
13
+ const { data, isLoading: loading, error } = core.useProductQuery(product?.id);
14
+ if (loading)
15
+ return (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("svg", { className: "mx-auto my-20 h-8 w-8 animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
16
+ if (error)
17
+ return jsxRuntime.jsx("p", { className: "py-20 text-center font-semibold", children: "Something went wrong" });
18
+ return (jsxRuntime.jsx(core.ProductProvider, { product: data, children: jsxRuntime.jsxs(components.Row, { setting: {
44
19
  layout: {
45
20
  desktop: {
46
- cols: [
47
- 6,
48
- 6
49
- ],
50
- display: 'fill'
21
+ cols: [6, 6],
22
+ display: 'fill',
51
23
  },
52
24
  mobile: {
53
- cols: [
54
- 12
55
- ]
56
- }
57
- }
58
- },
59
- children: [
60
- /*#__PURE__*/ jsxRuntime.jsx(components.Col, {
61
- children: /*#__PURE__*/ jsxRuntime.jsx(components.ProductImages, {})
62
- }),
63
- /*#__PURE__*/ jsxRuntime.jsxs(components.Col, {
64
- children: [
65
- /*#__PURE__*/ jsxRuntime.jsx(components.ProductTitle, {
66
- setting: {
67
- htmlTag: 'p'
68
- },
69
- styles: {
25
+ cols: [12],
26
+ },
27
+ },
28
+ }, children: [jsxRuntime.jsx(components.Col, { children: jsxRuntime.jsx(components.ProductImages, {}) }), jsxRuntime.jsxs(components.Col, { children: [jsxRuntime.jsx(components.ProductTitle, { setting: {
29
+ htmlTag: 'p',
30
+ }, styles: {
70
31
  typography: {
71
- type: 'heading-3'
72
- }
73
- }
74
- }),
75
- /*#__PURE__*/ jsxRuntime.jsxs(components.Row, {
76
- setting: {
32
+ type: 'heading-3',
33
+ },
34
+ } }), jsxRuntime.jsxs(components.Row, { setting: {
77
35
  layout: {
78
36
  desktop: {
79
- cols: [
80
- 6,
81
- 6
82
- ],
83
- display: 'fit'
84
- }
37
+ cols: [6, 6],
38
+ display: 'fit',
39
+ },
85
40
  },
86
41
  horizontalAlign: {
87
- desktop: 'end'
88
- }
89
- },
90
- children: [
91
- /*#__PURE__*/ jsxRuntime.jsx(components.Col, {
92
- children: /*#__PURE__*/ jsxRuntime.jsx(components.ProductPrice, {
93
- styles: {
42
+ desktop: 'end',
43
+ },
44
+ }, children: [jsxRuntime.jsx(components.Col, { children: jsxRuntime.jsx(components.ProductPrice, { styles: {
94
45
  typography: {
95
- type: 'subheading-2'
96
- }
97
- },
98
- setting: {
99
- priceType: 'regular'
100
- }
101
- })
102
- }),
103
- /*#__PURE__*/ jsxRuntime.jsx(components.Col, {
104
- children: /*#__PURE__*/ jsxRuntime.jsx(components.ProductPrice, {
105
- styles: {
46
+ type: 'subheading-2',
47
+ },
48
+ }, setting: {
49
+ priceType: 'regular',
50
+ } }) }), jsxRuntime.jsx(components.Col, { children: jsxRuntime.jsx(components.ProductPrice, { styles: {
106
51
  typography: {
107
- type: 'paragraph-2'
108
- }
109
- },
110
- setting: {
111
- priceType: 'compare'
112
- }
113
- })
114
- })
115
- ]
116
- }),
117
- /*#__PURE__*/ jsxRuntime.jsx(components.ProductVariants, {}),
118
- /*#__PURE__*/ jsxRuntime.jsx(components.ProductQuantity, {}),
119
- /*#__PURE__*/ jsxRuntime.jsx(components.ProductButton, {
120
- setting: {
121
- actionEffect: 'open-cart-drawer'
122
- }
123
- })
124
- ]
125
- })
126
- ]
127
- })
128
- });
52
+ type: 'paragraph-2',
53
+ },
54
+ }, setting: {
55
+ priceType: 'compare',
56
+ } }) })] }), jsxRuntime.jsx(components.ProductVariants, {}), jsxRuntime.jsx(components.ProductQuantity, {}), jsxRuntime.jsx(components.ProductButton, { setting: { actionEffect: 'open-cart-drawer' } })] })] }) }));
129
57
  };
130
- const ProductQuickView = ({ setting })=>{
58
+ const ProductQuickView = ({ setting }) => {
131
59
  const [open, setOpen] = react.useState(false);
132
60
  const plugins = core.usePluginEnable();
133
61
  if (!plugins?.includes('quick-view')) {
134
62
  return null;
135
63
  }
136
- return /*#__PURE__*/ jsxRuntime.jsxs("div", {
137
- children: [
138
- /*#__PURE__*/ jsxRuntime.jsx("div", {
139
- "aria-hidden": true,
140
- role: "button",
141
- "aria-label": "Quick view",
142
- onClick: ()=>setOpen((prev)=>!prev),
143
- children: setting?.label
144
- }),
145
- /*#__PURE__*/ jsxRuntime.jsx(components.Modal, {
146
- setting: {
147
- open
148
- },
149
- closeOnClickOutside: true,
150
- onClose: ()=>setOpen((prev)=>!prev),
151
- children: /*#__PURE__*/ jsxRuntime.jsx(ModalContent, {})
152
- })
153
- ]
154
- });
64
+ return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { "aria-hidden": true, role: "button", "aria-label": "Quick view", onClick: () => setOpen((prev) => !prev), children: setting?.label }), jsxRuntime.jsx(components.Modal, { setting: { open }, closeOnClickOutside: true, onClose: () => setOpen((prev) => !prev), children: jsxRuntime.jsx(ModalContent, {}) })] }));
155
65
  };
156
66
  ProductQuickView.defaultProps = {
157
- setting: {
158
- label: 'Quick View'
159
- }
67
+ setting: { label: 'Quick View' },
160
68
  };
161
69
 
162
70
  exports.default = ProductQuickView;
package/dist/cjs/setting/QuickView.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const config = {
6
6
  tag: 'QuickView',
7
- label: 'Product Quick View'
7
+ label: 'Product Quick View',
8
8
  };
9
9
 
10
10
  exports.default = config;
package/dist/cjs/setting/index.js CHANGED
@@ -4,8 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var QuickView = require('./QuickView.js');
6
6
 
7
- var index = {
8
- QuickView: QuickView.default
9
- };
7
+ var index = { QuickView: QuickView.default };
10
8
 
11
9
  exports.default = index;
package/dist/esm/components/QuickView.js CHANGED
@@ -1,158 +1,66 @@
1
+ 'use client';
1
2
  import { jsxs, jsx } from 'react/jsx-runtime';
2
3
  import { Modal, Row, Col, ProductImages, ProductTitle, ProductPrice, ProductVariants, ProductQuantity, ProductButton } from '@gem-sdk/components';
3
4
  import { usePluginEnable, useProduct, useProductQuery, ProductProvider } from '@gem-sdk/core';
4
5
  import { useState } from 'react';
5
6
 
6
- const ModalContent = ()=>{
7
+ const ModalContent = () => {
7
8
  const product = useProduct();
8
- const { data , isLoading: loading , error } = useProductQuery(product?.id);
9
- if (loading) return /*#__PURE__*/ jsx("div", {
10
- children: /*#__PURE__*/ jsxs("svg", {
11
- className: "mx-auto my-20 h-8 w-8 animate-spin",
12
- xmlns: "http://www.w3.org/2000/svg",
13
- fill: "none",
14
- viewBox: "0 0 24 24",
15
- children: [
16
- /*#__PURE__*/ jsx("circle", {
17
- className: "opacity-25",
18
- cx: "12",
19
- cy: "12",
20
- r: "10",
21
- stroke: "currentColor",
22
- strokeWidth: "4"
23
- }),
24
- /*#__PURE__*/ jsx("path", {
25
- className: "opacity-75",
26
- fill: "currentColor",
27
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
28
- })
29
- ]
30
- })
31
- });
32
- if (error) return /*#__PURE__*/ jsx("p", {
33
- className: "py-20 text-center font-semibold",
34
- children: "Something went wrong"
35
- });
36
- return /*#__PURE__*/ jsx(ProductProvider, {
37
- product: data,
38
- children: /*#__PURE__*/ jsxs(Row, {
39
- setting: {
9
+ const { data, isLoading: loading, error } = useProductQuery(product?.id);
10
+ if (loading)
11
+ return (jsx("div", { children: jsxs("svg", { className: "mx-auto my-20 h-8 w-8 animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
12
+ if (error)
13
+ return jsx("p", { className: "py-20 text-center font-semibold", children: "Something went wrong" });
14
+ return (jsx(ProductProvider, { product: data, children: jsxs(Row, { setting: {
40
15
  layout: {
41
16
  desktop: {
42
- cols: [
43
- 6,
44
- 6
45
- ],
46
- display: 'fill'
17
+ cols: [6, 6],
18
+ display: 'fill',
47
19
  },
48
20
  mobile: {
49
- cols: [
50
- 12
51
- ]
52
- }
53
- }
54
- },
55
- children: [
56
- /*#__PURE__*/ jsx(Col, {
57
- children: /*#__PURE__*/ jsx(ProductImages, {})
58
- }),
59
- /*#__PURE__*/ jsxs(Col, {
60
- children: [
61
- /*#__PURE__*/ jsx(ProductTitle, {
62
- setting: {
63
- htmlTag: 'p'
64
- },
65
- styles: {
21
+ cols: [12],
22
+ },
23
+ },
24
+ }, children: [jsx(Col, { children: jsx(ProductImages, {}) }), jsxs(Col, { children: [jsx(ProductTitle, { setting: {
25
+ htmlTag: 'p',
26
+ }, styles: {
66
27
  typography: {
67
- type: 'heading-3'
68
- }
69
- }
70
- }),
71
- /*#__PURE__*/ jsxs(Row, {
72
- setting: {
28
+ type: 'heading-3',
29
+ },
30
+ } }), jsxs(Row, { setting: {
73
31
  layout: {
74
32
  desktop: {
75
- cols: [
76
- 6,
77
- 6
78
- ],
79
- display: 'fit'
80
- }
33
+ cols: [6, 6],
34
+ display: 'fit',
35
+ },
81
36
  },
82
37
  horizontalAlign: {
83
- desktop: 'end'
84
- }
85
- },
86
- children: [
87
- /*#__PURE__*/ jsx(Col, {
88
- children: /*#__PURE__*/ jsx(ProductPrice, {
89
- styles: {
38
+ desktop: 'end',
39
+ },
40
+ }, children: [jsx(Col, { children: jsx(ProductPrice, { styles: {
90
41
  typography: {
91
- type: 'subheading-2'
92
- }
93
- },
94
- setting: {
95
- priceType: 'regular'
96
- }
97
- })
98
- }),
99
- /*#__PURE__*/ jsx(Col, {
100
- children: /*#__PURE__*/ jsx(ProductPrice, {
101
- styles: {
42
+ type: 'subheading-2',
43
+ },
44
+ }, setting: {
45
+ priceType: 'regular',
46
+ } }) }), jsx(Col, { children: jsx(ProductPrice, { styles: {
102
47
  typography: {
103
- type: 'paragraph-2'
104
- }
105
- },
106
- setting: {
107
- priceType: 'compare'
108
- }
109
- })
110
- })
111
- ]
112
- }),
113
- /*#__PURE__*/ jsx(ProductVariants, {}),
114
- /*#__PURE__*/ jsx(ProductQuantity, {}),
115
- /*#__PURE__*/ jsx(ProductButton, {
116
- setting: {
117
- actionEffect: 'open-cart-drawer'
118
- }
119
- })
120
- ]
121
- })
122
- ]
123
- })
124
- });
48
+ type: 'paragraph-2',
49
+ },
50
+ }, setting: {
51
+ priceType: 'compare',
52
+ } }) })] }), jsx(ProductVariants, {}), jsx(ProductQuantity, {}), jsx(ProductButton, { setting: { actionEffect: 'open-cart-drawer' } })] })] }) }));
125
53
  };
126
- const ProductQuickView = ({ setting })=>{
54
+ const ProductQuickView = ({ setting }) => {
127
55
  const [open, setOpen] = useState(false);
128
56
  const plugins = usePluginEnable();
129
57
  if (!plugins?.includes('quick-view')) {
130
58
  return null;
131
59
  }
132
- return /*#__PURE__*/ jsxs("div", {
133
- children: [
134
- /*#__PURE__*/ jsx("div", {
135
- "aria-hidden": true,
136
- role: "button",
137
- "aria-label": "Quick view",
138
- onClick: ()=>setOpen((prev)=>!prev),
139
- children: setting?.label
140
- }),
141
- /*#__PURE__*/ jsx(Modal, {
142
- setting: {
143
- open
144
- },
145
- closeOnClickOutside: true,
146
- onClose: ()=>setOpen((prev)=>!prev),
147
- children: /*#__PURE__*/ jsx(ModalContent, {})
148
- })
149
- ]
150
- });
60
+ return (jsxs("div", { children: [jsx("div", { "aria-hidden": true, role: "button", "aria-label": "Quick view", onClick: () => setOpen((prev) => !prev), children: setting?.label }), jsx(Modal, { setting: { open }, closeOnClickOutside: true, onClose: () => setOpen((prev) => !prev), children: jsx(ModalContent, {}) })] }));
151
61
  };
152
62
  ProductQuickView.defaultProps = {
153
- setting: {
154
- label: 'Quick View'
155
- }
63
+ setting: { label: 'Quick View' },
156
64
  };
157
65
 
158
66
  export { ProductQuickView as default };
package/dist/esm/setting/QuickView.js CHANGED
@@ -1,6 +1,6 @@
1
1
  const config = {
2
2
  tag: 'QuickView',
3
- label: 'Product Quick View'
3
+ label: 'Product Quick View',
4
4
  };
5
5
 
6
6
  export { config as default };
package/dist/esm/setting/index.js CHANGED
@@ -1,7 +1,5 @@
1
1
  import config from './QuickView.js';
2
2
 
3
- var index = {
4
- QuickView: config
5
- };
3
+ var index = { QuickView: config };
6
4
 
7
5
  export { index as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/plugin-quick-view",
3
- "version": "1.11.0",
3
+ "version": "1.11.1-experimental-8f483e48",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -19,9 +19,9 @@
19
19
  "test": "jest -c ./../../helpers/jest.config.ts"
20
20
  },
21
21
  "devDependencies": {
22
- "@gem-sdk/components": "*",
23
- "@gem-sdk/core": "*",
24
- "@gem-sdk/styles": "*"
22
+ "@gem-sdk/components": "1.12.0-experimental-8f483e48",
23
+ "@gem-sdk/core": "1.12.0-experimental-8f483e48",
24
+ "@gem-sdk/styles": "1.12.0-experimental-8f483e48"
25
25
  },
26
26
  "peerDependencies": {
27
27
  "react": "^17 || ^18",