@gem-sdk/plugin-quick-view 1.0.0 → 1.11.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.
Files changed (9) hide show
  1. package/dist/cjs/components/QuickView.js +150 -46
  2. package/dist/cjs/setting/QuickView.js +3 -3
  3. package/dist/cjs/setting/index.js +3 -1
  4. package/dist/esm/components/QuickView.js +150 -46
  5. package/dist/esm/index.js +4 -1
  6. package/dist/esm/setting/QuickView.js +3 -3
  7. package/dist/esm/setting/index.js +3 -1
  8. package/dist/types/index.d.ts +5 -5
  9. package/package.json +1 -1
package/dist/cjs/components/QuickView.js CHANGED
@@ -7,52 +7,156 @@ var components = require('@gem-sdk/components');
7
7
  var core = require('@gem-sdk/core');
8
8
  var react = require('react');
9
9
 
10
- const ModalContent = () => {
11
- const product = core.useProduct();
12
- const { data, isLoading: loading, error } = core.useProductQuery(product?.id);
13
- if (loading)
14
- return (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("svg", { className: "my-20 mx-auto 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" })] }) }));
15
- if (error)
16
- return jsxRuntime.jsx("p", { className: "py-20 text-center font-semibold", children: "Something went wrong" });
17
- return (jsxRuntime.jsx(core.ProductProvider, { product: data, children: jsxRuntime.jsxs(components.Row, { setting: {
18
- responsive: {
19
- desktop: '50fr 50fr',
20
- mobile: '100fr',
21
- },
22
- }, children: [jsxRuntime.jsx(components.Col, { children: jsxRuntime.jsx(components.ProductImages, {}) }), jsxRuntime.jsxs(components.Col, { children: [jsxRuntime.jsx(components.ProductTitle, { setting: {
23
- htmlTag: 'p',
24
- }, styles: {
25
- typography: {
26
- type: 'heading-3',
27
- },
28
- } }), jsxRuntime.jsxs(components.Row, { setting: {
29
- responsive: {
30
- desktop: 'minmax(max-content, auto) 1fr',
31
- },
32
- }, children: [jsxRuntime.jsx(components.Col, { children: jsxRuntime.jsx(components.ProductPrice, { styles: {
33
- typography: {
34
- type: 'subheading-2',
35
- },
36
- }, setting: {
37
- priceType: 'regular',
38
- } }) }), jsxRuntime.jsx(components.Col, { children: jsxRuntime.jsx(components.ProductPrice, { styles: {
39
- typography: {
40
- type: 'paragraph-2',
41
- },
42
- }, setting: {
43
- priceType: 'compare',
44
- } }) })] }), jsxRuntime.jsx(components.ProductVariants, {}), jsxRuntime.jsx(components.ProductQuantity, {}), jsxRuntime.jsx(components.ProductButton, { setting: { actionEffect: 'open-cart-drawer' } })] })] }) }));
45
- };
46
- const ProductQuickView = ({ setting }) => {
47
- const [open, setOpen] = react.useState(false);
48
- const plugins = core.usePluginEnable();
49
- if (!plugins?.includes('quick-view')) {
50
- return null;
51
- }
52
- 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, {}) })] }));
53
- };
54
- ProductQuickView.defaultProps = {
55
- setting: { label: 'Quick View' },
10
+ const ModalContent = ()=>{
11
+ 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: {
44
+ layout: {
45
+ desktop: {
46
+ cols: [
47
+ 6,
48
+ 6
49
+ ],
50
+ display: 'fill'
51
+ },
52
+ 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: {
70
+ typography: {
71
+ type: 'heading-3'
72
+ }
73
+ }
74
+ }),
75
+ /*#__PURE__*/ jsxRuntime.jsxs(components.Row, {
76
+ setting: {
77
+ layout: {
78
+ desktop: {
79
+ cols: [
80
+ 6,
81
+ 6
82
+ ],
83
+ display: 'fit'
84
+ }
85
+ },
86
+ horizontalAlign: {
87
+ desktop: 'end'
88
+ }
89
+ },
90
+ children: [
91
+ /*#__PURE__*/ jsxRuntime.jsx(components.Col, {
92
+ children: /*#__PURE__*/ jsxRuntime.jsx(components.ProductPrice, {
93
+ styles: {
94
+ 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: {
106
+ 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
+ });
129
+ };
130
+ const ProductQuickView = ({ setting })=>{
131
+ const [open, setOpen] = react.useState(false);
132
+ const plugins = core.usePluginEnable();
133
+ if (!plugins?.includes('quick-view')) {
134
+ return null;
135
+ }
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
+ });
155
+ };
156
+ ProductQuickView.defaultProps = {
157
+ setting: {
158
+ label: 'Quick View'
159
+ }
56
160
  };
57
161
 
58
162
  exports.default = ProductQuickView;
package/dist/cjs/setting/QuickView.js CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const config = {
6
- tag: 'QuickView',
7
- label: 'Product Quick View',
5
+ const config = {
6
+ tag: 'QuickView',
7
+ label: 'Product Quick View'
8
8
  };
9
9
 
10
10
  exports.default = config;
package/dist/cjs/setting/index.js CHANGED
@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var QuickView = require('./QuickView.js');
6
6
 
7
- var index = { QuickView: QuickView.default };
7
+ var index = {
8
+ QuickView: QuickView.default
9
+ };
8
10
 
9
11
  exports.default = index;
package/dist/esm/components/QuickView.js CHANGED
@@ -3,52 +3,156 @@ import { Modal, Row, Col, ProductImages, ProductTitle, ProductPrice, ProductVari
3
3
  import { usePluginEnable, useProduct, useProductQuery, ProductProvider } from '@gem-sdk/core';
4
4
  import { useState } from 'react';
5
5
 
6
- const ModalContent = () => {
7
- const product = useProduct();
8
- const { data, isLoading: loading, error } = useProductQuery(product?.id);
9
- if (loading)
10
- return (jsx("div", { children: jsxs("svg", { className: "my-20 mx-auto 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" })] }) }));
11
- if (error)
12
- return jsx("p", { className: "py-20 text-center font-semibold", children: "Something went wrong" });
13
- return (jsx(ProductProvider, { product: data, children: jsxs(Row, { setting: {
14
- responsive: {
15
- desktop: '50fr 50fr',
16
- mobile: '100fr',
17
- },
18
- }, children: [jsx(Col, { children: jsx(ProductImages, {}) }), jsxs(Col, { children: [jsx(ProductTitle, { setting: {
19
- htmlTag: 'p',
20
- }, styles: {
21
- typography: {
22
- type: 'heading-3',
23
- },
24
- } }), jsxs(Row, { setting: {
25
- responsive: {
26
- desktop: 'minmax(max-content, auto) 1fr',
27
- },
28
- }, children: [jsx(Col, { children: jsx(ProductPrice, { styles: {
29
- typography: {
30
- type: 'subheading-2',
31
- },
32
- }, setting: {
33
- priceType: 'regular',
34
- } }) }), jsx(Col, { children: jsx(ProductPrice, { styles: {
35
- typography: {
36
- type: 'paragraph-2',
37
- },
38
- }, setting: {
39
- priceType: 'compare',
40
- } }) })] }), jsx(ProductVariants, {}), jsx(ProductQuantity, {}), jsx(ProductButton, { setting: { actionEffect: 'open-cart-drawer' } })] })] }) }));
41
- };
42
- const ProductQuickView = ({ setting }) => {
43
- const [open, setOpen] = useState(false);
44
- const plugins = usePluginEnable();
45
- if (!plugins?.includes('quick-view')) {
46
- return null;
47
- }
48
- 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, {}) })] }));
49
- };
50
- ProductQuickView.defaultProps = {
51
- setting: { label: 'Quick View' },
6
+ const ModalContent = ()=>{
7
+ 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: {
40
+ layout: {
41
+ desktop: {
42
+ cols: [
43
+ 6,
44
+ 6
45
+ ],
46
+ display: 'fill'
47
+ },
48
+ 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: {
66
+ typography: {
67
+ type: 'heading-3'
68
+ }
69
+ }
70
+ }),
71
+ /*#__PURE__*/ jsxs(Row, {
72
+ setting: {
73
+ layout: {
74
+ desktop: {
75
+ cols: [
76
+ 6,
77
+ 6
78
+ ],
79
+ display: 'fit'
80
+ }
81
+ },
82
+ horizontalAlign: {
83
+ desktop: 'end'
84
+ }
85
+ },
86
+ children: [
87
+ /*#__PURE__*/ jsx(Col, {
88
+ children: /*#__PURE__*/ jsx(ProductPrice, {
89
+ styles: {
90
+ 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: {
102
+ 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
+ });
125
+ };
126
+ const ProductQuickView = ({ setting })=>{
127
+ const [open, setOpen] = useState(false);
128
+ const plugins = usePluginEnable();
129
+ if (!plugins?.includes('quick-view')) {
130
+ return null;
131
+ }
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
+ });
151
+ };
152
+ ProductQuickView.defaultProps = {
153
+ setting: {
154
+ label: 'Quick View'
155
+ }
52
156
  };
53
157
 
54
158
  export { ProductQuickView as default };
package/dist/esm/index.js CHANGED
@@ -1,3 +1,6 @@
1
1
  import ProductQuickView from './components/QuickView.js';
2
- export { default } from './components/QuickView.js';
3
2
  export { default as builderSetting } from './setting/index.js';
3
+
4
+
5
+
6
+ export { ProductQuickView as default };
package/dist/esm/setting/QuickView.js CHANGED
@@ -1,6 +1,6 @@
1
- const config = {
2
- tag: 'QuickView',
3
- label: 'Product Quick View',
1
+ const config = {
2
+ tag: 'QuickView',
3
+ label: 'Product Quick View'
4
4
  };
5
5
 
6
6
  export { config as default };
package/dist/esm/setting/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import config from './QuickView.js';
2
2
 
3
- var index = { QuickView: config };
3
+ var index = {
4
+ QuickView: config
5
+ };
4
6
 
5
7
  export { index as default };
package/dist/types/index.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  import * as _gem_sdk_core from '@gem-sdk/core';
2
2
  import { BaseProps } from '@gem-sdk/core';
3
3
 
4
- type ProductQuickViewProps = BaseProps<{
5
- label?: React.ReactNode;
6
- }>;
4
+ type ProductQuickViewProps = BaseProps<{
5
+ label?: React.ReactNode;
6
+ }>;
7
7
  declare const ProductQuickView: React.FC<ProductQuickViewProps>;
8
8
 
9
- declare const _default: {
10
- QuickView: _gem_sdk_core.ComponentSetting<ProductQuickViewProps>;
9
+ declare const _default: {
10
+ QuickView: _gem_sdk_core.ComponentSetting<ProductQuickViewProps>;
11
11
  };
12
12
 
13
13
  export { _default as builderSetting, ProductQuickView as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/plugin-quick-view",
3
- "version": "1.0.0",
3
+ "version": "1.11.0",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",