@gem-sdk/plugin-quick-view 1.14.0-next.202 → 1.22.31-staging.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.
- package/dist/cjs/components/QuickView.js +158 -1
- package/dist/cjs/index.js +11 -1
- package/dist/cjs/setting/QuickView.js +10 -1
- package/dist/cjs/setting/index.js +11 -1
- package/dist/esm/components/QuickView.js +154 -1
- package/dist/esm/index.js +6 -1
- package/dist/esm/setting/QuickView.js +6 -1
- package/dist/esm/setting/index.js +7 -1
- package/package.json +4 -4
|
@@ -1 +1,158 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var components = require('@gem-sdk/components');
|
|
7
|
+
var core = require('@gem-sdk/core');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
|
|
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
|
+
priceType: 'regular'
|
|
98
|
+
}
|
|
99
|
+
})
|
|
100
|
+
}),
|
|
101
|
+
/*#__PURE__*/ jsxRuntime.jsx(components.Col, {
|
|
102
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(components.ProductPrice, {
|
|
103
|
+
styles: {
|
|
104
|
+
typography: {
|
|
105
|
+
type: 'paragraph-2'
|
|
106
|
+
},
|
|
107
|
+
priceType: 'compare'
|
|
108
|
+
}
|
|
109
|
+
})
|
|
110
|
+
})
|
|
111
|
+
]
|
|
112
|
+
}),
|
|
113
|
+
/*#__PURE__*/ jsxRuntime.jsx(components.ProductVariants, {}),
|
|
114
|
+
/*#__PURE__*/ jsxRuntime.jsx(components.ProductQuantity, {}),
|
|
115
|
+
/*#__PURE__*/ jsxRuntime.jsx(components.ProductButton, {
|
|
116
|
+
setting: {
|
|
117
|
+
actionEffect: 'open-cart-drawer'
|
|
118
|
+
}
|
|
119
|
+
})
|
|
120
|
+
]
|
|
121
|
+
})
|
|
122
|
+
]
|
|
123
|
+
})
|
|
124
|
+
});
|
|
125
|
+
};
|
|
126
|
+
const ProductQuickView = ({ setting })=>{
|
|
127
|
+
const [open, setOpen] = react.useState(false);
|
|
128
|
+
const plugins = core.usePluginEnable();
|
|
129
|
+
if (!plugins?.includes('quick-view')) {
|
|
130
|
+
return null;
|
|
131
|
+
}
|
|
132
|
+
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
133
|
+
children: [
|
|
134
|
+
/*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(components.Modal, {
|
|
142
|
+
setting: {
|
|
143
|
+
open
|
|
144
|
+
},
|
|
145
|
+
closeOnClickOutside: true,
|
|
146
|
+
onClose: ()=>setOpen((prev)=>!prev),
|
|
147
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(ModalContent, {})
|
|
148
|
+
})
|
|
149
|
+
]
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
ProductQuickView.defaultProps = {
|
|
153
|
+
setting: {
|
|
154
|
+
label: 'Quick View'
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
exports.default = ProductQuickView;
|
package/dist/cjs/index.js
CHANGED
|
@@ -1 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var QuickView = require('./components/QuickView.js');
|
|
6
|
+
var index = require('./setting/index.js');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
exports.default = QuickView.default;
|
|
11
|
+
exports.builderSetting = index.default;
|
|
@@ -1 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const config = {
|
|
6
|
+
tag: 'QuickView',
|
|
7
|
+
label: 'Product Quick View'
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
exports.default = config;
|
|
@@ -1 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var QuickView = require('./QuickView.js');
|
|
6
|
+
|
|
7
|
+
var index = {
|
|
8
|
+
QuickView: QuickView.default
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
exports.default = index;
|
|
@@ -1 +1,154 @@
|
|
|
1
|
-
import{jsxs
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Modal, Row, Col, ProductImages, ProductTitle, ProductPrice, ProductVariants, ProductQuantity, ProductButton } from '@gem-sdk/components';
|
|
3
|
+
import { usePluginEnable, useProduct, useProductQuery, ProductProvider } from '@gem-sdk/core';
|
|
4
|
+
import { useState } from 'react';
|
|
5
|
+
|
|
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
|
+
priceType: 'regular'
|
|
94
|
+
}
|
|
95
|
+
})
|
|
96
|
+
}),
|
|
97
|
+
/*#__PURE__*/ jsx(Col, {
|
|
98
|
+
children: /*#__PURE__*/ jsx(ProductPrice, {
|
|
99
|
+
styles: {
|
|
100
|
+
typography: {
|
|
101
|
+
type: 'paragraph-2'
|
|
102
|
+
},
|
|
103
|
+
priceType: 'compare'
|
|
104
|
+
}
|
|
105
|
+
})
|
|
106
|
+
})
|
|
107
|
+
]
|
|
108
|
+
}),
|
|
109
|
+
/*#__PURE__*/ jsx(ProductVariants, {}),
|
|
110
|
+
/*#__PURE__*/ jsx(ProductQuantity, {}),
|
|
111
|
+
/*#__PURE__*/ jsx(ProductButton, {
|
|
112
|
+
setting: {
|
|
113
|
+
actionEffect: 'open-cart-drawer'
|
|
114
|
+
}
|
|
115
|
+
})
|
|
116
|
+
]
|
|
117
|
+
})
|
|
118
|
+
]
|
|
119
|
+
})
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
const ProductQuickView = ({ setting })=>{
|
|
123
|
+
const [open, setOpen] = useState(false);
|
|
124
|
+
const plugins = usePluginEnable();
|
|
125
|
+
if (!plugins?.includes('quick-view')) {
|
|
126
|
+
return null;
|
|
127
|
+
}
|
|
128
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
129
|
+
children: [
|
|
130
|
+
/*#__PURE__*/ jsx("div", {
|
|
131
|
+
"aria-hidden": true,
|
|
132
|
+
role: "button",
|
|
133
|
+
"aria-label": "Quick view",
|
|
134
|
+
onClick: ()=>setOpen((prev)=>!prev),
|
|
135
|
+
children: setting?.label
|
|
136
|
+
}),
|
|
137
|
+
/*#__PURE__*/ jsx(Modal, {
|
|
138
|
+
setting: {
|
|
139
|
+
open
|
|
140
|
+
},
|
|
141
|
+
closeOnClickOutside: true,
|
|
142
|
+
onClose: ()=>setOpen((prev)=>!prev),
|
|
143
|
+
children: /*#__PURE__*/ jsx(ModalContent, {})
|
|
144
|
+
})
|
|
145
|
+
]
|
|
146
|
+
});
|
|
147
|
+
};
|
|
148
|
+
ProductQuickView.defaultProps = {
|
|
149
|
+
setting: {
|
|
150
|
+
label: 'Quick View'
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
export { ProductQuickView as default };
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import ProductQuickView from './components/QuickView.js';
|
|
2
|
+
export { default as builderSetting } from './setting/index.js';
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
export { ProductQuickView as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/plugin-quick-view",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.22.31-staging.0",
|
|
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": "1.
|
|
23
|
-
"@gem-sdk/core": "1.
|
|
24
|
-
"@gem-sdk/styles": "1.
|
|
22
|
+
"@gem-sdk/components": "1.22.31-staging.0",
|
|
23
|
+
"@gem-sdk/core": "1.22.31-staging.0",
|
|
24
|
+
"@gem-sdk/styles": "1.22.31-staging.0"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "^17 || ^18",
|