@payloadcms/next 3.44.0 → 3.45.0-canary.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/elements/DocumentHeader/Tabs/tabs/index.d.ts.map +1 -1
- package/dist/elements/DocumentHeader/Tabs/tabs/index.js +0 -23
- package/dist/elements/DocumentHeader/Tabs/tabs/index.js.map +1 -1
- package/dist/prod/styles.css +1 -1
- package/dist/views/Document/getDocumentView.d.ts.map +1 -1
- package/dist/views/Document/getDocumentView.js +0 -19
- package/dist/views/Document/getDocumentView.js.map +1 -1
- package/dist/views/Document/getMetaBySegment.d.ts.map +1 -1
- package/dist/views/Document/getMetaBySegment.js +0 -9
- package/dist/views/Document/getMetaBySegment.js.map +1 -1
- package/dist/views/Document/index.d.ts.map +1 -1
- package/dist/views/Document/index.js +46 -21
- package/dist/views/Document/index.js.map +1 -1
- package/dist/views/Root/getDocumentViewInfo.d.ts.map +1 -1
- package/dist/views/Root/getDocumentViewInfo.js +0 -5
- package/dist/views/Root/getDocumentViewInfo.js.map +1 -1
- package/dist/views/Root/getRouteData.d.ts.map +1 -1
- package/dist/views/Root/getRouteData.js +0 -2
- package/dist/views/Root/getRouteData.js.map +1 -1
- package/dist/views/Root/metadata.d.ts.map +1 -1
- package/dist/views/Root/metadata.js +0 -2
- package/dist/views/Root/metadata.js.map +1 -1
- package/package.json +6 -6
- package/dist/views/LivePreview/Context/collisionDetection.d.ts +0 -3
- package/dist/views/LivePreview/Context/collisionDetection.d.ts.map +0 -1
- package/dist/views/LivePreview/Context/collisionDetection.js +0 -29
- package/dist/views/LivePreview/Context/collisionDetection.js.map +0 -1
- package/dist/views/LivePreview/Context/context.d.ts +0 -51
- package/dist/views/LivePreview/Context/context.d.ts.map +0 -1
- package/dist/views/LivePreview/Context/context.js +0 -41
- package/dist/views/LivePreview/Context/context.js.map +0 -1
- package/dist/views/LivePreview/Context/index.d.ts +0 -19
- package/dist/views/LivePreview/Context/index.d.ts.map +0 -1
- package/dist/views/LivePreview/Context/index.js +0 -154
- package/dist/views/LivePreview/Context/index.js.map +0 -1
- package/dist/views/LivePreview/Context/sizeReducer.d.ts +0 -20
- package/dist/views/LivePreview/Context/sizeReducer.d.ts.map +0 -1
- package/dist/views/LivePreview/Context/sizeReducer.js +0 -30
- package/dist/views/LivePreview/Context/sizeReducer.js.map +0 -1
- package/dist/views/LivePreview/Device/index.d.ts +0 -5
- package/dist/views/LivePreview/Device/index.d.ts.map +0 -1
- package/dist/views/LivePreview/Device/index.js +0 -94
- package/dist/views/LivePreview/Device/index.js.map +0 -1
- package/dist/views/LivePreview/DeviceContainer/index.d.ts +0 -5
- package/dist/views/LivePreview/DeviceContainer/index.d.ts.map +0 -1
- package/dist/views/LivePreview/DeviceContainer/index.js +0 -55
- package/dist/views/LivePreview/DeviceContainer/index.js.map +0 -1
- package/dist/views/LivePreview/IFrame/index.d.ts +0 -10
- package/dist/views/LivePreview/IFrame/index.d.ts.map +0 -1
- package/dist/views/LivePreview/IFrame/index.js +0 -29
- package/dist/views/LivePreview/IFrame/index.js.map +0 -1
- package/dist/views/LivePreview/IFrame/index.scss +0 -9
- package/dist/views/LivePreview/Preview/index.d.ts +0 -5
- package/dist/views/LivePreview/Preview/index.d.ts.map +0 -1
- package/dist/views/LivePreview/Preview/index.js +0 -167
- package/dist/views/LivePreview/Preview/index.js.map +0 -1
- package/dist/views/LivePreview/Preview/index.scss +0 -43
- package/dist/views/LivePreview/Toolbar/Controls/index.d.ts +0 -5
- package/dist/views/LivePreview/Toolbar/Controls/index.d.ts.map +0 -1
- package/dist/views/LivePreview/Toolbar/Controls/index.js +0 -151
- package/dist/views/LivePreview/Toolbar/Controls/index.js.map +0 -1
- package/dist/views/LivePreview/Toolbar/Controls/index.scss +0 -61
- package/dist/views/LivePreview/Toolbar/SizeInput/index.d.ts +0 -6
- package/dist/views/LivePreview/Toolbar/SizeInput/index.d.ts.map +0 -1
- package/dist/views/LivePreview/Toolbar/SizeInput/index.js +0 -100
- package/dist/views/LivePreview/Toolbar/SizeInput/index.js.map +0 -1
- package/dist/views/LivePreview/Toolbar/SizeInput/index.scss +0 -12
- package/dist/views/LivePreview/Toolbar/index.d.ts +0 -7
- package/dist/views/LivePreview/Toolbar/index.d.ts.map +0 -1
- package/dist/views/LivePreview/Toolbar/index.js +0 -96
- package/dist/views/LivePreview/Toolbar/index.js.map +0 -1
- package/dist/views/LivePreview/Toolbar/index.scss +0 -43
- package/dist/views/LivePreview/ToolbarArea/index.d.ts +0 -6
- package/dist/views/LivePreview/ToolbarArea/index.d.ts.map +0 -1
- package/dist/views/LivePreview/ToolbarArea/index.js +0 -40
- package/dist/views/LivePreview/ToolbarArea/index.js.map +0 -1
- package/dist/views/LivePreview/ToolbarArea/index.scss +0 -6
- package/dist/views/LivePreview/index.client.d.ts +0 -9
- package/dist/views/LivePreview/index.client.d.ts.map +0 -1
- package/dist/views/LivePreview/index.client.js +0 -472
- package/dist/views/LivePreview/index.client.js.map +0 -1
- package/dist/views/LivePreview/index.d.ts +0 -5
- package/dist/views/LivePreview/index.d.ts.map +0 -1
- package/dist/views/LivePreview/index.js +0 -76
- package/dist/views/LivePreview/index.js.map +0 -1
- package/dist/views/LivePreview/index.scss +0 -68
- package/dist/views/LivePreview/metadata.d.ts +0 -3
- package/dist/views/LivePreview/metadata.d.ts.map +0 -1
- package/dist/views/LivePreview/metadata.js +0 -16
- package/dist/views/LivePreview/metadata.js.map +0 -1
- package/dist/views/LivePreview/usePopupWindow.d.ts +0 -20
- package/dist/views/LivePreview/usePopupWindow.d.ts.map +0 -1
- package/dist/views/LivePreview/usePopupWindow.js +0 -144
- package/dist/views/LivePreview/usePopupWindow.js.map +0 -1
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import { c as _c } from "react/compiler-runtime";
|
|
4
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
-
import { ChevronIcon, LinkIcon, Popup, PopupList, useTranslation, XIcon } from '@payloadcms/ui';
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import { useLivePreviewContext } from '../../Context/context.js';
|
|
8
|
-
import { PreviewFrameSizeInput } from '../SizeInput/index.js';
|
|
9
|
-
const baseClass = 'live-preview-toolbar-controls';
|
|
10
|
-
const zoomOptions = [50, 75, 100, 125, 150, 200];
|
|
11
|
-
export const ToolbarControls = () => {
|
|
12
|
-
const $ = _c(14);
|
|
13
|
-
const {
|
|
14
|
-
breakpoint,
|
|
15
|
-
breakpoints,
|
|
16
|
-
setBreakpoint,
|
|
17
|
-
setPreviewWindowType,
|
|
18
|
-
setZoom,
|
|
19
|
-
url,
|
|
20
|
-
zoom
|
|
21
|
-
} = useLivePreviewContext();
|
|
22
|
-
const {
|
|
23
|
-
t
|
|
24
|
-
} = useTranslation();
|
|
25
|
-
let t0;
|
|
26
|
-
if ($[0] !== breakpoint || $[1] !== breakpoints || $[2] !== setBreakpoint || $[3] !== setPreviewWindowType || $[4] !== setZoom || $[5] !== t || $[6] !== url || $[7] !== zoom) {
|
|
27
|
-
const customOption = {
|
|
28
|
-
label: t("general:custom"),
|
|
29
|
-
value: "custom"
|
|
30
|
-
};
|
|
31
|
-
let t2;
|
|
32
|
-
if ($[9] !== setZoom || $[10] !== zoom) {
|
|
33
|
-
t2 = t3 => {
|
|
34
|
-
const {
|
|
35
|
-
close: close_0
|
|
36
|
-
} = t3;
|
|
37
|
-
return _jsx(PopupList.ButtonGroup, {
|
|
38
|
-
children: _jsx(React.Fragment, {
|
|
39
|
-
children: zoomOptions.map(zoomValue => _jsxs(PopupList.Button, {
|
|
40
|
-
active: zoom * 100 == zoomValue,
|
|
41
|
-
onClick: () => {
|
|
42
|
-
setZoom(zoomValue / 100);
|
|
43
|
-
close_0();
|
|
44
|
-
},
|
|
45
|
-
children: [zoomValue, "%"]
|
|
46
|
-
}, zoomValue))
|
|
47
|
-
})
|
|
48
|
-
});
|
|
49
|
-
};
|
|
50
|
-
$[9] = setZoom;
|
|
51
|
-
$[10] = zoom;
|
|
52
|
-
$[11] = t2;
|
|
53
|
-
} else {
|
|
54
|
-
t2 = $[11];
|
|
55
|
-
}
|
|
56
|
-
let t3;
|
|
57
|
-
if ($[12] !== setPreviewWindowType) {
|
|
58
|
-
t3 = e => {
|
|
59
|
-
e.preventDefault();
|
|
60
|
-
setPreviewWindowType("popup");
|
|
61
|
-
};
|
|
62
|
-
$[12] = setPreviewWindowType;
|
|
63
|
-
$[13] = t3;
|
|
64
|
-
} else {
|
|
65
|
-
t3 = $[13];
|
|
66
|
-
}
|
|
67
|
-
t0 = _jsxs("div", {
|
|
68
|
-
className: baseClass,
|
|
69
|
-
children: [breakpoints?.length > 0 && _jsx(Popup, {
|
|
70
|
-
button: _jsxs(React.Fragment, {
|
|
71
|
-
children: [_jsx("span", {
|
|
72
|
-
children: breakpoints.find(bp => bp.name == breakpoint)?.label ?? customOption.label
|
|
73
|
-
}), _jsx(ChevronIcon, {
|
|
74
|
-
className: `${baseClass}__chevron`
|
|
75
|
-
})]
|
|
76
|
-
}),
|
|
77
|
-
className: `${baseClass}__breakpoint`,
|
|
78
|
-
horizontalAlign: "right",
|
|
79
|
-
render: t1 => {
|
|
80
|
-
const {
|
|
81
|
-
close
|
|
82
|
-
} = t1;
|
|
83
|
-
return _jsx(PopupList.ButtonGroup, {
|
|
84
|
-
children: _jsxs(React.Fragment, {
|
|
85
|
-
children: [breakpoints.map(bp_0 => _jsx(PopupList.Button, {
|
|
86
|
-
active: bp_0.name == breakpoint,
|
|
87
|
-
onClick: () => {
|
|
88
|
-
setBreakpoint(bp_0.name);
|
|
89
|
-
close();
|
|
90
|
-
},
|
|
91
|
-
children: bp_0.label
|
|
92
|
-
}, bp_0.name)), breakpoint === "custom" && _jsx(PopupList.Button, {
|
|
93
|
-
active: breakpoint == customOption.value,
|
|
94
|
-
onClick: () => {
|
|
95
|
-
setBreakpoint(customOption.value);
|
|
96
|
-
close();
|
|
97
|
-
},
|
|
98
|
-
children: customOption.label
|
|
99
|
-
})]
|
|
100
|
-
})
|
|
101
|
-
});
|
|
102
|
-
},
|
|
103
|
-
showScrollbar: true,
|
|
104
|
-
verticalAlign: "bottom"
|
|
105
|
-
}), _jsxs("div", {
|
|
106
|
-
className: `${baseClass}__device-size`,
|
|
107
|
-
children: [_jsx(PreviewFrameSizeInput, {
|
|
108
|
-
axis: "x"
|
|
109
|
-
}), _jsx("span", {
|
|
110
|
-
className: `${baseClass}__size-divider`,
|
|
111
|
-
children: _jsx(XIcon, {})
|
|
112
|
-
}), _jsx(PreviewFrameSizeInput, {
|
|
113
|
-
axis: "y"
|
|
114
|
-
})]
|
|
115
|
-
}), _jsx(Popup, {
|
|
116
|
-
button: _jsxs(React.Fragment, {
|
|
117
|
-
children: [_jsxs("span", {
|
|
118
|
-
children: [zoom * 100, "%"]
|
|
119
|
-
}), _jsx(ChevronIcon, {
|
|
120
|
-
className: `${baseClass}__chevron`
|
|
121
|
-
})]
|
|
122
|
-
}),
|
|
123
|
-
className: `${baseClass}__zoom`,
|
|
124
|
-
horizontalAlign: "right",
|
|
125
|
-
render: t2,
|
|
126
|
-
showScrollbar: true,
|
|
127
|
-
verticalAlign: "bottom"
|
|
128
|
-
}), _jsx("a", {
|
|
129
|
-
className: `${baseClass}__external`,
|
|
130
|
-
href: url,
|
|
131
|
-
onClick: t3,
|
|
132
|
-
target: "_blank",
|
|
133
|
-
type: "button",
|
|
134
|
-
children: _jsx(LinkIcon, {})
|
|
135
|
-
})]
|
|
136
|
-
});
|
|
137
|
-
$[0] = breakpoint;
|
|
138
|
-
$[1] = breakpoints;
|
|
139
|
-
$[2] = setBreakpoint;
|
|
140
|
-
$[3] = setPreviewWindowType;
|
|
141
|
-
$[4] = setZoom;
|
|
142
|
-
$[5] = t;
|
|
143
|
-
$[6] = url;
|
|
144
|
-
$[7] = zoom;
|
|
145
|
-
$[8] = t0;
|
|
146
|
-
} else {
|
|
147
|
-
t0 = $[8];
|
|
148
|
-
}
|
|
149
|
-
return t0;
|
|
150
|
-
};
|
|
151
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","ChevronIcon","LinkIcon","Popup","PopupList","useTranslation","XIcon","React","useLivePreviewContext","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","ButtonGroup","children","Fragment","map","zoomValue","_jsxs","Button","active","onClick","e","preventDefault","className","length","button","find","bp","name","horizontalAlign","render","t1","bp_0","axis","href","target","type"],"sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { ChevronIcon, LinkIcon, Popup, PopupList, useTranslation, XIcon } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n useLivePreviewContext()\n const { t } = useTranslation()\n\n const customOption = {\n label: t('general:custom'),\n value: 'custom',\n }\n\n return (\n <div className={baseClass}>\n {breakpoints?.length > 0 && (\n <Popup\n button={\n <React.Fragment>\n <span>\n {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n </span>\n <ChevronIcon className={`${baseClass}__chevron`} />\n </React.Fragment>\n }\n className={`${baseClass}__breakpoint`}\n horizontalAlign=\"right\"\n render={({ close }) => (\n <PopupList.ButtonGroup>\n <React.Fragment>\n {breakpoints.map((bp) => (\n <PopupList.Button\n active={bp.name == breakpoint}\n key={bp.name}\n onClick={() => {\n setBreakpoint(bp.name)\n close()\n }}\n >\n {bp.label}\n </PopupList.Button>\n ))}\n {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n {breakpoint === 'custom' && (\n <PopupList.Button\n active={breakpoint == customOption.value}\n onClick={() => {\n setBreakpoint(customOption.value)\n close()\n }}\n >\n {customOption.label}\n </PopupList.Button>\n )}\n </React.Fragment>\n </PopupList.ButtonGroup>\n )}\n showScrollbar\n verticalAlign=\"bottom\"\n />\n )}\n <div className={`${baseClass}__device-size`}>\n <PreviewFrameSizeInput axis=\"x\" />\n <span className={`${baseClass}__size-divider`}>\n <XIcon />\n </span>\n <PreviewFrameSizeInput axis=\"y\" />\n </div>\n <Popup\n button={\n <React.Fragment>\n <span>{zoom * 100}%</span>\n <ChevronIcon className={`${baseClass}__chevron`} />\n </React.Fragment>\n }\n className={`${baseClass}__zoom`}\n horizontalAlign=\"right\"\n render={({ close }) => (\n <PopupList.ButtonGroup>\n <React.Fragment>\n {zoomOptions.map((zoomValue) => (\n <PopupList.Button\n active={zoom * 100 == zoomValue}\n key={zoomValue}\n onClick={() => {\n setZoom(zoomValue / 100)\n close()\n }}\n >\n {zoomValue}%\n </PopupList.Button>\n ))}\n </React.Fragment>\n </PopupList.ButtonGroup>\n )}\n showScrollbar\n verticalAlign=\"bottom\"\n />\n <a\n className={`${baseClass}__external`}\n href={url}\n onClick={(e) => {\n e.preventDefault()\n setPreviewWindowType('popup')\n }}\n target=\"_blank\"\n type=\"button\"\n >\n <LinkIcon />\n </a>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
@import '~@payloadcms/ui/scss';
|
|
2
|
-
|
|
3
|
-
@layer payload-default {
|
|
4
|
-
.live-preview-toolbar-controls {
|
|
5
|
-
display: flex;
|
|
6
|
-
align-items: center;
|
|
7
|
-
gap: calc(var(--base) / 3);
|
|
8
|
-
|
|
9
|
-
&__breakpoint {
|
|
10
|
-
border: none;
|
|
11
|
-
background: transparent;
|
|
12
|
-
height: var(--base);
|
|
13
|
-
|
|
14
|
-
&:focus {
|
|
15
|
-
outline: none;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
&__device-size {
|
|
20
|
-
display: flex;
|
|
21
|
-
align-items: center;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&__size {
|
|
25
|
-
width: 50px;
|
|
26
|
-
height: var(--base);
|
|
27
|
-
display: flex;
|
|
28
|
-
align-items: center;
|
|
29
|
-
border: 1px solid var(--theme-elevation-200);
|
|
30
|
-
background: var(--theme-elevation-100);
|
|
31
|
-
border-radius: 2px;
|
|
32
|
-
font-size: small;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
&__zoom {
|
|
36
|
-
width: 55px;
|
|
37
|
-
border: none;
|
|
38
|
-
background: transparent;
|
|
39
|
-
height: var(--base);
|
|
40
|
-
|
|
41
|
-
&:focus {
|
|
42
|
-
outline: none;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&__external {
|
|
47
|
-
flex-shrink: 0;
|
|
48
|
-
display: flex;
|
|
49
|
-
width: var(--base);
|
|
50
|
-
height: var(--base);
|
|
51
|
-
align-items: center;
|
|
52
|
-
justify-content: center;
|
|
53
|
-
padding: 6px 0;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.popup-button {
|
|
57
|
-
display: flex;
|
|
58
|
-
align-items: center;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CA+DA,CAAA"}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import { c as _c } from "react/compiler-runtime";
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
import React, { useCallback, useEffect } from 'react';
|
|
6
|
-
import { useLivePreviewContext } from '../../Context/context.js';
|
|
7
|
-
const baseClass = 'toolbar-input';
|
|
8
|
-
export const PreviewFrameSizeInput = props => {
|
|
9
|
-
const $ = _c(18);
|
|
10
|
-
const {
|
|
11
|
-
axis
|
|
12
|
-
} = props;
|
|
13
|
-
const {
|
|
14
|
-
breakpoint,
|
|
15
|
-
measuredDeviceSize,
|
|
16
|
-
setBreakpoint,
|
|
17
|
-
setSize,
|
|
18
|
-
size,
|
|
19
|
-
zoom
|
|
20
|
-
} = useLivePreviewContext();
|
|
21
|
-
const [internalState, setInternalState] = React.useState((axis === "x" ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
|
|
22
|
-
let t0;
|
|
23
|
-
if ($[0] !== axis || $[1] !== measuredDeviceSize?.height || $[2] !== measuredDeviceSize?.width || $[3] !== setBreakpoint || $[4] !== setSize || $[5] !== zoom) {
|
|
24
|
-
t0 = e => {
|
|
25
|
-
let newValue = Number(e.target.value);
|
|
26
|
-
if (newValue < 0) {
|
|
27
|
-
newValue = 0;
|
|
28
|
-
}
|
|
29
|
-
setInternalState(newValue);
|
|
30
|
-
setBreakpoint("custom");
|
|
31
|
-
setSize({
|
|
32
|
-
type: "reset",
|
|
33
|
-
value: {
|
|
34
|
-
height: axis === "y" ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,
|
|
35
|
-
width: axis === "x" ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
};
|
|
39
|
-
$[0] = axis;
|
|
40
|
-
$[1] = measuredDeviceSize?.height;
|
|
41
|
-
$[2] = measuredDeviceSize?.width;
|
|
42
|
-
$[3] = setBreakpoint;
|
|
43
|
-
$[4] = setSize;
|
|
44
|
-
$[5] = zoom;
|
|
45
|
-
$[6] = t0;
|
|
46
|
-
} else {
|
|
47
|
-
t0 = $[6];
|
|
48
|
-
}
|
|
49
|
-
const handleChange = t0;
|
|
50
|
-
let t1;
|
|
51
|
-
let t2;
|
|
52
|
-
if ($[7] !== axis || $[8] !== breakpoint || $[9] !== measuredDeviceSize || $[10] !== size || $[11] !== zoom) {
|
|
53
|
-
t1 = () => {
|
|
54
|
-
if (breakpoint === "responsive" && measuredDeviceSize) {
|
|
55
|
-
if (axis === "x") {
|
|
56
|
-
setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom);
|
|
57
|
-
} else {
|
|
58
|
-
setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
if (breakpoint !== "responsive" && size) {
|
|
62
|
-
setInternalState(axis === "x" ? size.width : size.height);
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
t2 = [breakpoint, axis, measuredDeviceSize, size, zoom];
|
|
66
|
-
$[7] = axis;
|
|
67
|
-
$[8] = breakpoint;
|
|
68
|
-
$[9] = measuredDeviceSize;
|
|
69
|
-
$[10] = size;
|
|
70
|
-
$[11] = zoom;
|
|
71
|
-
$[12] = t1;
|
|
72
|
-
$[13] = t2;
|
|
73
|
-
} else {
|
|
74
|
-
t1 = $[12];
|
|
75
|
-
t2 = $[13];
|
|
76
|
-
}
|
|
77
|
-
useEffect(t1, t2);
|
|
78
|
-
const t3 = axis === "x" ? "live-preview-width" : "live-preview-height";
|
|
79
|
-
const t4 = internalState || 0;
|
|
80
|
-
let t5;
|
|
81
|
-
if ($[14] !== handleChange || $[15] !== t3 || $[16] !== t4) {
|
|
82
|
-
t5 = _jsx("input", {
|
|
83
|
-
className: baseClass,
|
|
84
|
-
min: 0,
|
|
85
|
-
name: t3,
|
|
86
|
-
onChange: handleChange,
|
|
87
|
-
step: 1,
|
|
88
|
-
type: "number",
|
|
89
|
-
value: t4
|
|
90
|
-
});
|
|
91
|
-
$[14] = handleChange;
|
|
92
|
-
$[15] = t3;
|
|
93
|
-
$[16] = t4;
|
|
94
|
-
$[17] = t5;
|
|
95
|
-
} else {
|
|
96
|
-
t5 = $[17];
|
|
97
|
-
}
|
|
98
|
-
return t5;
|
|
99
|
-
};
|
|
100
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","t0","e","newValue","Number","target","value","type","toFixed","handleChange","t1","t2","t3","t4","t5","_jsx","className","min","name","onChange","step"],"sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n axis?: 'x' | 'y'\n}> = (props) => {\n const { axis } = props\n\n const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n useLivePreviewContext()\n\n const [internalState, setInternalState] = React.useState<number>(\n (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n )\n\n // when the input is changed manually, we need to set the breakpoint as `custom`\n // this will then allow us to set an explicit width and height\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n let newValue = Number(e.target.value)\n\n if (newValue < 0) {\n newValue = 0\n }\n\n setInternalState(newValue)\n setBreakpoint('custom')\n\n // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n setSize({\n type: 'reset',\n value: {\n height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n },\n })\n },\n [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n )\n\n // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n useEffect(() => {\n if (breakpoint === 'responsive' && measuredDeviceSize) {\n if (axis === 'x') {\n setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n } else {\n setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n }\n }\n\n if (breakpoint !== 'responsive' && size) {\n setInternalState(axis === 'x' ? size.width : size.height)\n }\n }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n return (\n <input\n className={baseClass}\n min={0}\n name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n onChange={handleChange}\n step={1}\n type=\"number\"\n value={internalState || 0}\n />\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
@layer payload-default {
|
|
2
|
-
.toolbar-input {
|
|
3
|
-
width: 50px;
|
|
4
|
-
height: var(--base);
|
|
5
|
-
display: flex;
|
|
6
|
-
align-items: center;
|
|
7
|
-
border: 1px solid var(--theme-elevation-200);
|
|
8
|
-
background: var(--theme-elevation-100);
|
|
9
|
-
border-radius: 2px;
|
|
10
|
-
font-size: small;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAgDrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC;IACE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,aAAa,CASlB,CAAA"}
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import { c as _c } from "react/compiler-runtime";
|
|
4
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
-
import { useDraggable } from '@dnd-kit/core';
|
|
6
|
-
import { DragHandleIcon } from '@payloadcms/ui';
|
|
7
|
-
import React from 'react';
|
|
8
|
-
import { useLivePreviewContext } from '../Context/context.js';
|
|
9
|
-
import { ToolbarControls } from './Controls/index.js';
|
|
10
|
-
const baseClass = 'live-preview-toolbar';
|
|
11
|
-
const DraggableToolbar = props => {
|
|
12
|
-
const $ = _c(10);
|
|
13
|
-
const {
|
|
14
|
-
toolbarPosition
|
|
15
|
-
} = useLivePreviewContext();
|
|
16
|
-
let t0;
|
|
17
|
-
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
18
|
-
t0 = {
|
|
19
|
-
id: "live-preview-toolbar"
|
|
20
|
-
};
|
|
21
|
-
$[0] = t0;
|
|
22
|
-
} else {
|
|
23
|
-
t0 = $[0];
|
|
24
|
-
}
|
|
25
|
-
const {
|
|
26
|
-
attributes,
|
|
27
|
-
listeners,
|
|
28
|
-
setNodeRef,
|
|
29
|
-
transform
|
|
30
|
-
} = useDraggable(t0);
|
|
31
|
-
let t1;
|
|
32
|
-
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
|
|
33
|
-
t1 = [baseClass, `${baseClass}--draggable`];
|
|
34
|
-
$[1] = t1;
|
|
35
|
-
} else {
|
|
36
|
-
t1 = $[1];
|
|
37
|
-
}
|
|
38
|
-
const t2 = `${toolbarPosition.x}px`;
|
|
39
|
-
const t3 = `${toolbarPosition.y}px`;
|
|
40
|
-
let t4;
|
|
41
|
-
if ($[2] !== attributes || $[3] !== listeners || $[4] !== props || $[5] !== setNodeRef || $[6] !== t2 || $[7] !== t3 || $[8] !== transform) {
|
|
42
|
-
t4 = _jsxs("div", {
|
|
43
|
-
className: t1.join(" "),
|
|
44
|
-
style: {
|
|
45
|
-
left: t2,
|
|
46
|
-
top: t3,
|
|
47
|
-
...(transform ? {
|
|
48
|
-
transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
|
|
49
|
-
} : {})
|
|
50
|
-
},
|
|
51
|
-
children: [_jsx("button", {
|
|
52
|
-
...listeners,
|
|
53
|
-
...attributes,
|
|
54
|
-
className: `${baseClass}__drag-handle`,
|
|
55
|
-
ref: setNodeRef,
|
|
56
|
-
type: "button",
|
|
57
|
-
children: _jsx(DragHandleIcon, {})
|
|
58
|
-
}), _jsx(ToolbarControls, {
|
|
59
|
-
...props
|
|
60
|
-
})]
|
|
61
|
-
});
|
|
62
|
-
$[2] = attributes;
|
|
63
|
-
$[3] = listeners;
|
|
64
|
-
$[4] = props;
|
|
65
|
-
$[5] = setNodeRef;
|
|
66
|
-
$[6] = t2;
|
|
67
|
-
$[7] = t3;
|
|
68
|
-
$[8] = transform;
|
|
69
|
-
$[9] = t4;
|
|
70
|
-
} else {
|
|
71
|
-
t4 = $[9];
|
|
72
|
-
}
|
|
73
|
-
return t4;
|
|
74
|
-
};
|
|
75
|
-
const StaticToolbar = props => {
|
|
76
|
-
return /*#__PURE__*/_jsx("div", {
|
|
77
|
-
className: [baseClass, `${baseClass}--static`].join(' '),
|
|
78
|
-
children: /*#__PURE__*/_jsx(ToolbarControls, {
|
|
79
|
-
...props
|
|
80
|
-
})
|
|
81
|
-
});
|
|
82
|
-
};
|
|
83
|
-
export const LivePreviewToolbar = props => {
|
|
84
|
-
const {
|
|
85
|
-
draggable
|
|
86
|
-
} = props;
|
|
87
|
-
if (draggable) {
|
|
88
|
-
return /*#__PURE__*/_jsx(DraggableToolbar, {
|
|
89
|
-
...props
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
return /*#__PURE__*/_jsx(StaticToolbar, {
|
|
93
|
-
...props
|
|
94
|
-
});
|
|
95
|
-
};
|
|
96
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","useDraggable","DragHandleIcon","React","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","$","toolbarPosition","t0","Symbol","for","id","attributes","listeners","setNodeRef","transform","t1","t2","x","t3","y","t4","_jsxs","className","join","style","left","top","undefined","children","_jsx","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport { DragHandleIcon } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n const { toolbarPosition } = useLivePreviewContext()\n\n const { attributes, listeners, setNodeRef, transform } = useDraggable({\n id: 'live-preview-toolbar',\n })\n\n return (\n <div\n className={[baseClass, `${baseClass}--draggable`].join(' ')}\n style={{\n left: `${toolbarPosition.x}px`,\n top: `${toolbarPosition.y}px`,\n ...(transform\n ? {\n transform: transform\n ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n : undefined,\n }\n : {}),\n }}\n >\n <button\n {...listeners}\n {...attributes}\n className={`${baseClass}__drag-handle`}\n ref={setNodeRef}\n type=\"button\"\n >\n <DragHandleIcon />\n </button>\n <ToolbarControls {...props} />\n </div>\n )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n return (\n <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n <ToolbarControls {...props} />\n </div>\n )\n}\n\nexport const LivePreviewToolbar: React.FC<\n {\n draggable?: boolean\n } & EditViewProps\n> = (props) => {\n const { draggable } = props\n\n if (draggable) {\n return <DraggableToolbar {...props} />\n }\n\n return <StaticToolbar {...props} />\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAGhC,MAAMC,SAAA,GAAY;AAElB,MAAMC,gBAAA,GAA4CC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAChD;IAAAU;EAAA,IAA4BN,qBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAE0CF,EAAA;MAAAG,EAAA,EAChE;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC;EAAA,IAAyDjB,YAAA,CAAaU,EAEtE;EAAA,IAAAQ,EAAA;EAAA,IAAAV,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAIeM,EAAA,IAAAb,SAAA,EAAY,GAAAA,SAAA,aAAyB;IAACG,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAEzC,MAAAW,EAAA,MAAGV,eAAA,CAAAW,CAAA,IAAqB;EACzB,MAAAC,EAAA,MAAGZ,eAAA,CAAAa,CAAA,IAAqB;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAD,KAAA,IAAAC,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAS,SAAA;IAJjCM,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYP,EAAsC,CAAAQ,IAAA,CAAM;MAAAC,KAAA;QAAAC,IAAA,EAE/CT,EAAwB;QAAAU,GAAA,EACzBR,EAAwB;QAAA,IACzBJ,SAAA;UAAAA,SAAA,EAEaA,SAAA,GACP,eAAeA,SAAA,EAAAG,CAAA,KAAgB,OAAQH,SAAA,EAAAK,CAAA,KAAgB,QAAS,GAAAQ;QAChE,MAEJ;MAAA;MAAAC,QAAA,GAGRC,IAAA,CAAC;QAAA,GACKjB,SAAS;QAAA,GACTD,UAAU;QAAAW,SAAA,EACH,GAAApB,SAAA,eAA2B;QAAA4B,GAAA,EACjCjB,UAAA;QAAAkB,IAAA,EACA;QAAAH,QAAA,EAELC,IAAA,CAAA/B,cAAA,IAAC;MAAA,C,GAEH+B,IAAA,CAAA5B,eAAA;QAAA,GAAqBG;MAAK,C;;;;;;;;;;;;;SAvB5BgB,E;CA0BJ;AAEA,MAAMY,aAAA,GAA0C5B,KAAA;EAC9C,oBACEyB,IAAA,CAAC;IAAIP,SAAA,EAAW,CAACpB,SAAA,EAAW,GAAGA,SAAA,UAAmB,CAAC,CAACqB,IAAI,CAAC;cACvD,aAAAM,IAAA,CAAC5B,eAAA;MAAiB,GAAGG;;;AAG3B;AAEA,OAAO,MAAM6B,kBAAA,GAIR7B,KAAA;EACH,MAAM;IAAE8B;EAAS,CAAE,GAAG9B,KAAA;EAEtB,IAAI8B,SAAA,EAAW;IACb,oBAAOL,IAAA,CAAC1B,gBAAA;MAAkB,GAAGC;;EAC/B;EAEA,oBAAOyB,IAAA,CAACG,aAAA;IAAe,GAAG5B;;AAC5B","ignoreList":[]}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
@import '~@payloadcms/ui/scss';
|
|
2
|
-
|
|
3
|
-
@layer payload-default {
|
|
4
|
-
.live-preview-toolbar {
|
|
5
|
-
display: flex;
|
|
6
|
-
background-color: var(--theme-bg);
|
|
7
|
-
color: var(--theme-text);
|
|
8
|
-
height: calc(var(--base) * 1.75);
|
|
9
|
-
align-items: center;
|
|
10
|
-
flex-shrink: 0;
|
|
11
|
-
|
|
12
|
-
&--static {
|
|
13
|
-
position: relative;
|
|
14
|
-
width: 100%;
|
|
15
|
-
justify-content: center;
|
|
16
|
-
border-bottom: 1px solid var(--theme-elevation-100);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
&--draggable {
|
|
20
|
-
@include shadow-lg;
|
|
21
|
-
position: absolute;
|
|
22
|
-
top: 0;
|
|
23
|
-
left: 0;
|
|
24
|
-
margin: 0;
|
|
25
|
-
border-radius: 4px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
&__drag-handle {
|
|
29
|
-
background: transparent;
|
|
30
|
-
border: 0;
|
|
31
|
-
padding: 0;
|
|
32
|
-
cursor: grab;
|
|
33
|
-
|
|
34
|
-
.icon--drag-handle .fill {
|
|
35
|
-
fill: var(--theme-elevation-300);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
&:active {
|
|
39
|
-
cursor: grabbing;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/ToolbarArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAYA,CAAA"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import { c as _c } from "react/compiler-runtime";
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
import { useDroppable } from '@dnd-kit/core';
|
|
6
|
-
import React from 'react';
|
|
7
|
-
const baseClass = 'toolbar-area';
|
|
8
|
-
export const ToolbarArea = props => {
|
|
9
|
-
const $ = _c(4);
|
|
10
|
-
const {
|
|
11
|
-
children
|
|
12
|
-
} = props;
|
|
13
|
-
let t0;
|
|
14
|
-
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
15
|
-
t0 = {
|
|
16
|
-
id: "live-preview-area"
|
|
17
|
-
};
|
|
18
|
-
$[0] = t0;
|
|
19
|
-
} else {
|
|
20
|
-
t0 = $[0];
|
|
21
|
-
}
|
|
22
|
-
const {
|
|
23
|
-
setNodeRef
|
|
24
|
-
} = useDroppable(t0);
|
|
25
|
-
let t1;
|
|
26
|
-
if ($[1] !== children || $[2] !== setNodeRef) {
|
|
27
|
-
t1 = _jsx("div", {
|
|
28
|
-
className: baseClass,
|
|
29
|
-
ref: setNodeRef,
|
|
30
|
-
children
|
|
31
|
-
});
|
|
32
|
-
$[1] = children;
|
|
33
|
-
$[2] = setNodeRef;
|
|
34
|
-
$[3] = t1;
|
|
35
|
-
} else {
|
|
36
|
-
t1 = $[3];
|
|
37
|
-
}
|
|
38
|
-
return t1;
|
|
39
|
-
};
|
|
40
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","baseClass","ToolbarArea","props","$","children","t0","Symbol","for","id","setNodeRef","t1","_jsx","className","ref"],"sources":["../../../../src/views/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n children: React.ReactNode\n}> = (props) => {\n const { children } = props\n\n const { setNodeRef } = useDroppable({\n id: 'live-preview-area',\n })\n\n return (\n <div className={baseClass} ref={setNodeRef}>\n {children}\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAIlB,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO;EAAA,IAAqBF,KAAA;EAAA,IAAAG,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAEeF,EAAA;MAAAG,EAAA,EAC9B;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM;EAAA,IAAuBX,YAAA,CAAaO,EAEpC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAM,UAAA;IAGEC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,GAAA,EAA+BJ,UAAA;MAAAL;IAAA,C;;;;;;;SAAhCM,E;CAIJ","ignoreList":[]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { Data, DocumentSlots, LivePreviewConfig } from 'payload';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import './index.scss';
|
|
4
|
-
export declare const LivePreviewClient: React.FC<{
|
|
5
|
-
readonly breakpoints: LivePreviewConfig['breakpoints'];
|
|
6
|
-
readonly initialData: Data;
|
|
7
|
-
readonly url: string;
|
|
8
|
-
} & DocumentSlots>;
|
|
9
|
-
//# sourceMappingURL=index.client.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAMV,IAAI,EACJ,aAAa,EAEb,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAgChB,OAAO,KAA6D,MAAM,OAAO,CAAA;AAGjF,OAAO,cAAc,CAAA;AAogBrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CACtC;IACE,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IACtD,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAA;IAC1B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CACrB,GAAG,aAAa,CA4DlB,CAAA"}
|