@fumadocs/base-ui 16.8.5 → 16.8.6
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/css/generated/shared.css +9 -9
- package/dist/components/image-zoom.d.ts +1 -1
- package/dist/components/image-zoom.js +1 -1
- package/dist/components/toc/clerk.js +56 -55
- package/dist/node_modules/.pnpm/{react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Controlled.d.ts → react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/controlled.d.ts} +2 -7
- package/dist/node_modules/.pnpm/{react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Controlled.js → react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/controlled.js} +32 -8
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/index.d.ts +2 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/uncontrolled.d.ts +7 -0
- package/dist/node_modules/.pnpm/{react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Uncontrolled.js → react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/uncontrolled.js} +2 -2
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/adjust-svg-ids.js +53 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/compute-positioned-style.js +25 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/element-tests.js +12 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-div-img-style.js +45 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-img-alt.js +8 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-img-object-fit-style.js +55 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-img-regular-style.js +21 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-img-src.js +14 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-modal-img-transform.js +22 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-scale.js +27 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-style-ghost.js +31 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-style-modal-img.js +75 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-target-dimension.js +4 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/parse-position.js +7 -0
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/test-has-scalable-src.js +5 -0
- package/dist/style.css +20 -13
- package/package.json +9 -9
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Uncontrolled.d.ts +0 -7
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/icons.js +0 -24
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/index.d.ts +0 -2
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils.js +0 -372
package/css/generated/shared.css
CHANGED
|
@@ -35,15 +35,12 @@
|
|
|
35
35
|
@source inline("--track-bottom");
|
|
36
36
|
@source inline("--track-top");
|
|
37
37
|
@source inline("--transform-origin");
|
|
38
|
-
@source inline("-circle");
|
|
39
38
|
@source inline("-mb-px");
|
|
40
39
|
@source inline("-me-0.5");
|
|
41
40
|
@source inline("-me-2");
|
|
42
41
|
@source inline("-mx-px");
|
|
43
42
|
@source inline("-rotate-90");
|
|
44
|
-
@source inline("-text");
|
|
45
43
|
@source inline("-top-1.5");
|
|
46
|
-
@source inline("-translate-1/2");
|
|
47
44
|
@source inline("-translate-x-1/2");
|
|
48
45
|
@source inline("-translate-y-1/2");
|
|
49
46
|
@source inline("-z-1");
|
|
@@ -125,7 +122,6 @@
|
|
|
125
122
|
@source inline("bg-fd-background");
|
|
126
123
|
@source inline("bg-fd-border");
|
|
127
124
|
@source inline("bg-fd-card");
|
|
128
|
-
@source inline("bg-fd-foreground/10");
|
|
129
125
|
@source inline("bg-fd-muted");
|
|
130
126
|
@source inline("bg-fd-overlay");
|
|
131
127
|
@source inline("bg-fd-popover");
|
|
@@ -367,6 +363,8 @@
|
|
|
367
363
|
@source inline("file");
|
|
368
364
|
@source inline("fill");
|
|
369
365
|
@source inline("fill-(--callout-color)");
|
|
366
|
+
@source inline("fill-fd-muted");
|
|
367
|
+
@source inline("fill-fd-muted-foreground");
|
|
370
368
|
@source inline("fill-fd-primary");
|
|
371
369
|
@source inline("fill-fd-primary-foreground");
|
|
372
370
|
@source inline("filter");
|
|
@@ -441,6 +439,7 @@
|
|
|
441
439
|
@source inline("h-(--positioner-height)");
|
|
442
440
|
@source inline("h-1.5");
|
|
443
441
|
@source inline("h-9.5");
|
|
442
|
+
@source inline("h-[calc(100%+--spacing(1.5))]");
|
|
444
443
|
@source inline("h-full");
|
|
445
444
|
@source inline("h-px");
|
|
446
445
|
@source inline("h1");
|
|
@@ -497,7 +496,6 @@
|
|
|
497
496
|
@source inline("inset-s-0");
|
|
498
497
|
@source inline("inset-x-2");
|
|
499
498
|
@source inline("inset-y-0");
|
|
500
|
-
@source inline("insetInlineStart");
|
|
501
499
|
@source inline("instanceof");
|
|
502
500
|
@source inline("instead");
|
|
503
501
|
@source inline("integration");
|
|
@@ -525,6 +523,9 @@
|
|
|
525
523
|
@source inline("key");
|
|
526
524
|
@source inline("keydown");
|
|
527
525
|
@source inline("l");
|
|
526
|
+
@source inline("l0");
|
|
527
|
+
@source inline("l1");
|
|
528
|
+
@source inline("l2");
|
|
528
529
|
@source inline("label");
|
|
529
530
|
@source inline("lang");
|
|
530
531
|
@source inline("language");
|
|
@@ -536,6 +537,7 @@
|
|
|
536
537
|
@source inline("leading-none");
|
|
537
538
|
@source inline("leaving");
|
|
538
539
|
@source inline("left");
|
|
540
|
+
@source inline("left-0");
|
|
539
541
|
@source inline("left-1/2");
|
|
540
542
|
@source inline("length");
|
|
541
543
|
@source inline("let");
|
|
@@ -555,7 +557,6 @@
|
|
|
555
557
|
@source inline("locale");
|
|
556
558
|
@source inline("locales");
|
|
557
559
|
@source inline("lower");
|
|
558
|
-
@source inline("lowerOffset");
|
|
559
560
|
@source inline("ltr");
|
|
560
561
|
@source inline("lucide");
|
|
561
562
|
@source inline("lucide-book");
|
|
@@ -667,7 +668,6 @@
|
|
|
667
668
|
@source inline("object");
|
|
668
669
|
@source inline("observer");
|
|
669
670
|
@source inline("of");
|
|
670
|
-
@source inline("offset");
|
|
671
671
|
@source inline("offsetPath");
|
|
672
672
|
@source inline("offsetTop");
|
|
673
673
|
@source inline("on");
|
|
@@ -701,6 +701,7 @@
|
|
|
701
701
|
@source inline("order");
|
|
702
702
|
@source inline("orientation");
|
|
703
703
|
@source inline("origin-(--transform-origin)");
|
|
704
|
+
@source inline("origin-center");
|
|
704
705
|
@source inline("original");
|
|
705
706
|
@source inline("out");
|
|
706
707
|
@source inline("outer");
|
|
@@ -847,6 +848,7 @@
|
|
|
847
848
|
@source inline("rounded-xl");
|
|
848
849
|
@source inline("router");
|
|
849
850
|
@source inline("row");
|
|
851
|
+
@source inline("rtl:-scale-x-100");
|
|
850
852
|
@source inline("rtl:rotate-180");
|
|
851
853
|
@source inline("rtl:rotate-90");
|
|
852
854
|
@source inline("s");
|
|
@@ -1000,7 +1002,6 @@
|
|
|
1000
1002
|
@source inline("toolbar");
|
|
1001
1003
|
@source inline("top");
|
|
1002
1004
|
@source inline("top-0");
|
|
1003
|
-
@source inline("top-1.5");
|
|
1004
1005
|
@source inline("top-1/2");
|
|
1005
1006
|
@source inline("top-2");
|
|
1006
1007
|
@source inline("top-2.5");
|
|
@@ -1036,7 +1037,6 @@
|
|
|
1036
1037
|
@source inline("unknown");
|
|
1037
1038
|
@source inline("updateAnchor");
|
|
1038
1039
|
@source inline("updates");
|
|
1039
|
-
@source inline("upperOffset");
|
|
1040
1040
|
@source inline("upperX");
|
|
1041
1041
|
@source inline("url");
|
|
1042
1042
|
@source inline("urls");
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { UncontrolledProps } from "../node_modules/.pnpm/react-medium-image-zoom@5.4.
|
|
1
|
+
import { UncontrolledProps } from "../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/uncontrolled.js";
|
|
2
2
|
import { ComponentProps } from "react";
|
|
3
3
|
import { ImageProps } from "fumadocs-core/framework";
|
|
4
4
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { Uncontrolled } from "../node_modules/.pnpm/react-medium-image-zoom@5.4.
|
|
2
|
+
import { Uncontrolled } from "../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/uncontrolled.js";
|
|
3
3
|
import "./image-zoom2.css";
|
|
4
4
|
import { Image } from "fumadocs-core/framework";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -48,20 +48,23 @@ function TOCItems({ ref, className, thumbBox = true, children, ...props }) {
|
|
|
48
48
|
];
|
|
49
49
|
d += ` C ${upperX} ${top - 4} ${x} ${upperBottom + 4} ${x} ${top} L${x} ${bottom}`;
|
|
50
50
|
}
|
|
51
|
-
if (item._step !== void 0) output.push(/* @__PURE__ */
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
51
|
+
if (item._step !== void 0) output.push(/* @__PURE__ */ jsxs("g", {
|
|
52
|
+
transform: `translate(${x}, ${(top + bottom) / 2})`,
|
|
53
|
+
children: [/* @__PURE__ */ jsx("circle", {
|
|
54
|
+
cx: "0",
|
|
55
|
+
cy: "0",
|
|
56
|
+
r: "8",
|
|
57
|
+
className: "fill-fd-primary"
|
|
58
|
+
}), /* @__PURE__ */ jsx("text", {
|
|
59
|
+
cx: "0",
|
|
60
|
+
cy: "0",
|
|
61
|
+
textAnchor: "middle",
|
|
62
|
+
alignmentBaseline: "central",
|
|
63
|
+
dominantBaseline: "middle",
|
|
64
|
+
className: "fill-fd-primary-foreground font-medium text-xs leading-none font-mono rtl:-scale-x-100",
|
|
65
|
+
children: item._step
|
|
66
|
+
})]
|
|
67
|
+
}, i));
|
|
65
68
|
positions.push([
|
|
66
69
|
top,
|
|
67
70
|
bottom,
|
|
@@ -156,7 +159,7 @@ function ThumbTrack({ computed, thumbBox }) {
|
|
|
156
159
|
});
|
|
157
160
|
return /* @__PURE__ */ jsxs("div", {
|
|
158
161
|
ref,
|
|
159
|
-
className: "absolute top-0 inset-s-0",
|
|
162
|
+
className: "absolute top-0 inset-s-0 origin-center rtl:-scale-x-100",
|
|
160
163
|
style: {
|
|
161
164
|
width: computed.width,
|
|
162
165
|
height: computed.height,
|
|
@@ -173,7 +176,7 @@ function ThumbTrack({ computed, thumbBox }) {
|
|
|
173
176
|
},
|
|
174
177
|
children: computed.content
|
|
175
178
|
}), thumbBox && /* @__PURE__ */ jsx("div", {
|
|
176
|
-
className: "absolute size-1 bg-fd-primary rounded-full [offset-distance:var(--offset-distance,0)] opacity-(--opacity,0) transition-[opacity,offset-distance]",
|
|
179
|
+
className: "absolute left-0 size-1 bg-fd-primary rounded-full [offset-distance:var(--offset-distance,0)] opacity-(--opacity,0) transition-[opacity,offset-distance]",
|
|
177
180
|
style: { offsetPath: `path("${computed.d}")` }
|
|
178
181
|
})]
|
|
179
182
|
});
|
|
@@ -191,15 +194,44 @@ function getLineOffset(depth) {
|
|
|
191
194
|
}
|
|
192
195
|
function TOCItem({ item, ...props }) {
|
|
193
196
|
const items = useTOCItems();
|
|
194
|
-
const {
|
|
197
|
+
const { isFirst, isLast, svg } = useMemo(() => {
|
|
195
198
|
const index = items.indexOf(item);
|
|
196
|
-
const
|
|
199
|
+
const isFirst = index === 0;
|
|
200
|
+
const isLast = index === items.length - 1;
|
|
201
|
+
const l1 = getLineOffset(item.depth);
|
|
202
|
+
const l0 = isFirst ? l1 : getLineOffset(items[index - 1].depth);
|
|
203
|
+
const l2 = isLast ? l1 : getLineOffset(items[index + 1].depth);
|
|
197
204
|
return {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
205
|
+
isFirst,
|
|
206
|
+
isLast,
|
|
207
|
+
svg: /* @__PURE__ */ jsxs("svg", {
|
|
208
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
209
|
+
className: cn("absolute -top-1.5 inset-s-0 bottom-0 h-[calc(100%+--spacing(1.5))] -z-1 rtl:-scale-x-100", l1 !== l2 && "h-full bottom-1.5"),
|
|
210
|
+
style: { width: Math.max(l0, l1) + 9 },
|
|
211
|
+
children: [/* @__PURE__ */ jsx("path", {
|
|
212
|
+
d: l0 === l1 ? `M ${l0 + .5} 6 L ${l0 + .5} 100%` : `M ${l0 + .5} 0 C ${l0 + .5} 8 ${l1 + .5} 4 ${l1 + .5} 12 L ${l1 + .5} 100%`,
|
|
213
|
+
stroke: "black",
|
|
214
|
+
strokeWidth: "1",
|
|
215
|
+
fill: "none",
|
|
216
|
+
className: "stroke-fd-foreground/10"
|
|
217
|
+
}), item._step !== void 0 && /* @__PURE__ */ jsxs("g", {
|
|
218
|
+
transform: `translate(${l1 + .5}, ${l1 === l2 ? "3" : "6"})`,
|
|
219
|
+
children: [/* @__PURE__ */ jsx("circle", {
|
|
220
|
+
cx: "0",
|
|
221
|
+
cy: "50%",
|
|
222
|
+
r: "8",
|
|
223
|
+
className: "fill-fd-muted"
|
|
224
|
+
}), /* @__PURE__ */ jsx("text", {
|
|
225
|
+
x: "0",
|
|
226
|
+
y: "50%",
|
|
227
|
+
textAnchor: "middle",
|
|
228
|
+
alignmentBaseline: "central",
|
|
229
|
+
dominantBaseline: "middle",
|
|
230
|
+
className: "fill-fd-muted-foreground font-medium text-xs leading-none font-mono rtl:-scale-x-100",
|
|
231
|
+
children: item._step
|
|
232
|
+
})]
|
|
233
|
+
})]
|
|
234
|
+
})
|
|
203
235
|
};
|
|
204
236
|
}, [items, item]);
|
|
205
237
|
return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
|
|
@@ -210,38 +242,7 @@ function TOCItem({ item, ...props }) {
|
|
|
210
242
|
paddingInlineStart: getItemOffset(item.depth),
|
|
211
243
|
...props.style
|
|
212
244
|
},
|
|
213
|
-
children: [
|
|
214
|
-
offset !== upperOffset && /* @__PURE__ */ jsx("svg", {
|
|
215
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
216
|
-
viewBox: `${Math.min(offset, upperOffset)} 0 ${Math.abs(upperOffset - offset)} 12`,
|
|
217
|
-
className: "absolute -top-1.5 -z-1",
|
|
218
|
-
style: {
|
|
219
|
-
width: Math.abs(upperOffset - offset) + 1,
|
|
220
|
-
height: 12,
|
|
221
|
-
insetInlineStart: Math.min(offset, upperOffset)
|
|
222
|
-
},
|
|
223
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
224
|
-
d: `M ${upperOffset} 0 C ${upperOffset} 8 ${offset} 4 ${offset} 12`,
|
|
225
|
-
stroke: "black",
|
|
226
|
-
strokeWidth: "1",
|
|
227
|
-
fill: "none",
|
|
228
|
-
className: "stroke-fd-foreground/10"
|
|
229
|
-
})
|
|
230
|
-
}),
|
|
231
|
-
/* @__PURE__ */ jsx("div", {
|
|
232
|
-
className: cn("absolute inset-y-0 w-px bg-fd-foreground/10 -z-1", offset !== upperOffset && "top-1.5", offset !== lowerOffset && "bottom-1.5"),
|
|
233
|
-
style: { insetInlineStart: offset }
|
|
234
|
-
}),
|
|
235
|
-
item._step !== void 0 && /* @__PURE__ */ jsx("div", {
|
|
236
|
-
className: "absolute flex items-center justify-center -translate-1/2 -z-1 size-4 font-mono font-medium text-xs bg-fd-muted text-fd-muted-foreground rounded-full leading-none",
|
|
237
|
-
style: {
|
|
238
|
-
top: `calc(50% + ${(isFirst ? -.75 : 0) + (isLast ? .75 : 0)} * var(--spacing))`,
|
|
239
|
-
insetInlineStart: offset
|
|
240
|
-
},
|
|
241
|
-
children: item._step
|
|
242
|
-
}),
|
|
243
|
-
item.title
|
|
244
|
-
]
|
|
245
|
+
children: [svg, item.title]
|
|
245
246
|
});
|
|
246
247
|
}
|
|
247
248
|
//#endregion
|
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
|
-
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.
|
|
4
|
-
|
|
5
|
-
LOADED = "LOADED",
|
|
6
|
-
LOADING = "LOADING",
|
|
7
|
-
UNLOADED = "UNLOADED",
|
|
8
|
-
UNLOADING = "UNLOADING"
|
|
9
|
-
}
|
|
3
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/controlled.d.ts
|
|
4
|
+
type ModalState = 'LOADED' | 'LOADING' | 'UNLOADED' | 'UNLOADING';
|
|
10
5
|
interface ControlledProps {
|
|
11
6
|
a11yNameButtonUnzoom?: string;
|
|
12
7
|
a11yNameButtonZoom?: string;
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { adjustSvgIDs } from "./utils/adjust-svg-ids.js";
|
|
2
|
+
import { testDiv, testImg, testImgLoaded, testSvg } from "./utils/element-tests.js";
|
|
3
|
+
import { getImgAlt } from "./utils/get-img-alt.js";
|
|
4
|
+
import { getImgSrc } from "./utils/get-img-src.js";
|
|
5
|
+
import { getStyleGhost } from "./utils/get-style-ghost.js";
|
|
6
|
+
import { getStyleModalImg } from "./utils/get-style-modal-img.js";
|
|
3
7
|
import React from "react";
|
|
4
8
|
import ReactDOM from "react-dom";
|
|
5
|
-
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.
|
|
9
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/controlled.js
|
|
6
10
|
const IMAGE_QUERY = [
|
|
7
11
|
"img",
|
|
8
12
|
"svg",
|
|
@@ -69,7 +73,6 @@ var ControlledBase = class extends React.Component {
|
|
|
69
73
|
} else if (prevModalState !== "UNLOADED" && modalState === "UNLOADED") {
|
|
70
74
|
this.bodyScrollEnable();
|
|
71
75
|
window.removeEventListener("resize", this.handleResize);
|
|
72
|
-
this.refModalImg.current?.removeEventListener("transitionend", this.handleImgTransitionEnd);
|
|
73
76
|
this.refDialog.current?.close();
|
|
74
77
|
}
|
|
75
78
|
};
|
|
@@ -223,7 +226,6 @@ var ControlledBase = class extends React.Component {
|
|
|
223
226
|
this.zoom = () => {
|
|
224
227
|
this.bodyScrollDisable();
|
|
225
228
|
this.refDialog.current?.showModal();
|
|
226
|
-
this.refModalImg.current?.addEventListener("transitionend", this.handleImgTransitionEnd);
|
|
227
229
|
this.setState({ modalState: "LOADING" });
|
|
228
230
|
};
|
|
229
231
|
this.unzoom = () => {
|
|
@@ -298,7 +300,7 @@ var ControlledBase = class extends React.Component {
|
|
|
298
300
|
};
|
|
299
301
|
}
|
|
300
302
|
render() {
|
|
301
|
-
const { handleBtnUnzoomClick, handleDialogClick, handleDialogClose, handleUnzoom, handleZoom, imgEl, props: { a11yNameButtonUnzoom, a11yNameButtonZoom, children, classDialog, IconUnzoom, IconZoom,
|
|
303
|
+
const { handleBtnUnzoomClick, handleDialogClick, handleDialogClose, handleUnzoom, handleZoom, imgEl, props: { a11yNameButtonUnzoom, a11yNameButtonZoom, children, classDialog, IconUnzoom, IconZoom, wrapElement: WrapElement, ZoomContent, zoomImg, zoomMargin }, refContent, refDialog, refModalContent, refModalImg, refWrap, state: { id, isZoomImgLoaded, loadedImgEl, modalState, shouldRefresh, styleGhost } } = this;
|
|
302
304
|
const idModal = `rmiz-modal-${id}`;
|
|
303
305
|
const idModalImg = `rmiz-modal-img-${id}`;
|
|
304
306
|
const isDiv = testDiv(imgEl);
|
|
@@ -320,7 +322,7 @@ var ControlledBase = class extends React.Component {
|
|
|
320
322
|
hasZoomImg,
|
|
321
323
|
imgSrc,
|
|
322
324
|
isSvg,
|
|
323
|
-
isZoomed:
|
|
325
|
+
isZoomed: isModalActive,
|
|
324
326
|
loadedImgEl,
|
|
325
327
|
offset: zoomMargin,
|
|
326
328
|
shouldRefresh,
|
|
@@ -338,11 +340,13 @@ var ControlledBase = class extends React.Component {
|
|
|
338
340
|
"data-rmiz-modal-img": "",
|
|
339
341
|
height: this.styleModalImg.height ?? void 0,
|
|
340
342
|
id: idModalImg,
|
|
343
|
+
onTransitionEnd: this.handleImgTransitionEnd,
|
|
341
344
|
ref: refModalImg,
|
|
342
345
|
style: this.styleModalImg,
|
|
343
346
|
width: this.styleModalImg.width ?? void 0
|
|
344
347
|
}) : isSvg ? React.createElement("div", {
|
|
345
348
|
"data-rmiz-modal-img": true,
|
|
349
|
+
onTransitionEnd: this.handleImgTransitionEnd,
|
|
346
350
|
ref: refModalImg,
|
|
347
351
|
style: this.styleModalImg
|
|
348
352
|
}) : null;
|
|
@@ -405,7 +409,7 @@ var ControlledBase = class extends React.Component {
|
|
|
405
409
|
this.imgElResizeObserver?.disconnect();
|
|
406
410
|
this.imgEl?.removeEventListener("load", this.handleImgLoad);
|
|
407
411
|
this.imgEl?.removeEventListener("click", this.handleZoom);
|
|
408
|
-
|
|
412
|
+
clearTimeout(this.timeoutTransitionEnd);
|
|
409
413
|
window.removeEventListener("wheel", this.handleWheel);
|
|
410
414
|
window.removeEventListener("touchstart", this.handleTouchStart);
|
|
411
415
|
window.removeEventListener("touchmove", this.handleTouchMove);
|
|
@@ -431,5 +435,25 @@ ControlledBase.defaultProps = {
|
|
|
431
435
|
wrapElement: "div",
|
|
432
436
|
zoomMargin: 0
|
|
433
437
|
};
|
|
438
|
+
function ICompress() {
|
|
439
|
+
return React.createElement("svg", {
|
|
440
|
+
"aria-hidden": "true",
|
|
441
|
+
"data-rmiz-btn-unzoom-icon": true,
|
|
442
|
+
fill: "currentColor",
|
|
443
|
+
focusable: "false",
|
|
444
|
+
viewBox: "0 0 16 16",
|
|
445
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
446
|
+
}, React.createElement("path", { d: "M 14.144531 1.148438 L 9 6.292969 L 9 3 L 8 3 L 8 8 L 13 8 L 13 7 L 9.707031 7 L 14.855469 1.851563 Z M 8 8 L 3 8 L 3 9 L 6.292969 9 L 1.148438 14.144531 L 1.851563 14.855469 L 7 9.707031 L 7 13 L 8 13 Z" }));
|
|
447
|
+
}
|
|
448
|
+
function IEnlarge() {
|
|
449
|
+
return React.createElement("svg", {
|
|
450
|
+
"aria-hidden": "true",
|
|
451
|
+
"data-rmiz-btn-zoom-icon": true,
|
|
452
|
+
fill: "currentColor",
|
|
453
|
+
focusable: "false",
|
|
454
|
+
viewBox: "0 0 16 16",
|
|
455
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
456
|
+
}, React.createElement("path", { d: "M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z" }));
|
|
457
|
+
}
|
|
434
458
|
//#endregion
|
|
435
459
|
export { Controlled };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ControlledProps } from "./controlled.js";
|
|
2
|
+
import React from "react";
|
|
3
|
+
|
|
4
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/uncontrolled.d.ts
|
|
5
|
+
type UncontrolledProps = Omit<ControlledProps, 'isZoomed'>;
|
|
6
|
+
//#endregion
|
|
7
|
+
export { UncontrolledProps };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Controlled } from "./
|
|
1
|
+
import { Controlled } from "./controlled.js";
|
|
2
2
|
import React from "react";
|
|
3
|
-
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.
|
|
3
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/uncontrolled.js
|
|
4
4
|
function Uncontrolled({ onZoomChange, ...props }) {
|
|
5
5
|
const [isZoomed, setIsZoomed] = React.useState(false);
|
|
6
6
|
const handleZoomChange = React.useCallback((value, { event }) => {
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/adjust-svg-ids.js
|
|
2
|
+
const adjustSvgIDs = (svgEl) => {
|
|
3
|
+
const newIdSuffix = "-zoom";
|
|
4
|
+
const attrs = [
|
|
5
|
+
"clip-path",
|
|
6
|
+
"fill",
|
|
7
|
+
"mask",
|
|
8
|
+
"marker-start",
|
|
9
|
+
"marker-mid",
|
|
10
|
+
"marker-end"
|
|
11
|
+
];
|
|
12
|
+
const idMap = /* @__PURE__ */ new Map();
|
|
13
|
+
if (svgEl.hasAttribute("id")) {
|
|
14
|
+
const { id: oldId } = svgEl;
|
|
15
|
+
const newId = oldId + newIdSuffix;
|
|
16
|
+
idMap.set(oldId, newId);
|
|
17
|
+
const svgNode = svgEl;
|
|
18
|
+
svgNode.id = newId;
|
|
19
|
+
}
|
|
20
|
+
svgEl.querySelectorAll("[id]").forEach((el) => {
|
|
21
|
+
const { id: oldId } = el;
|
|
22
|
+
const newId = oldId + newIdSuffix;
|
|
23
|
+
idMap.set(oldId, newId);
|
|
24
|
+
const node = el;
|
|
25
|
+
node.id = newId;
|
|
26
|
+
});
|
|
27
|
+
const urlAttrSelector = attrs.map((attr) => `[${attr}]`).join(", ");
|
|
28
|
+
svgEl.querySelectorAll(urlAttrSelector).forEach((el) => {
|
|
29
|
+
for (const attr of attrs) {
|
|
30
|
+
const val = el.getAttribute(attr);
|
|
31
|
+
if (val?.startsWith("url(#") === true) {
|
|
32
|
+
const oldId = val.slice(5, -1);
|
|
33
|
+
const newId = idMap.get(oldId);
|
|
34
|
+
if (newId !== void 0) el.setAttribute(attr, `url(#${newId})`);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
svgEl.querySelectorAll("style").forEach((styleEl) => {
|
|
39
|
+
const { textContent } = styleEl;
|
|
40
|
+
if (textContent !== "") {
|
|
41
|
+
let updated = textContent;
|
|
42
|
+
idMap.forEach((newId, oldId) => {
|
|
43
|
+
updated = updated.replaceAll(`#${oldId}`, `#${newId}`);
|
|
44
|
+
});
|
|
45
|
+
if (updated !== textContent) {
|
|
46
|
+
const styleNode = styleEl;
|
|
47
|
+
styleNode.textContent = updated;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
//#endregion
|
|
53
|
+
export { adjustSvgIDs };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { getScale } from "./get-scale.js";
|
|
2
|
+
import { parsePosition } from "./parse-position.js";
|
|
3
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/compute-positioned-style.js
|
|
4
|
+
const computePositionedStyle = ({ containerHeight, containerLeft, containerTop, containerWidth, hasScalableSrc, offset, position, targetHeight, targetWidth, visibleHeight, visibleWidth }) => {
|
|
5
|
+
const [posLeft = "50%", posTop = "50%"] = position.split(" ");
|
|
6
|
+
const posX = parsePosition(posLeft, containerWidth - visibleWidth);
|
|
7
|
+
const posY = parsePosition(posTop, containerHeight - visibleHeight);
|
|
8
|
+
const scale = getScale({
|
|
9
|
+
containerHeight: visibleHeight,
|
|
10
|
+
containerWidth: visibleWidth,
|
|
11
|
+
hasScalableSrc,
|
|
12
|
+
offset,
|
|
13
|
+
targetHeight,
|
|
14
|
+
targetWidth
|
|
15
|
+
});
|
|
16
|
+
return {
|
|
17
|
+
top: containerTop + posY,
|
|
18
|
+
left: containerLeft + posX,
|
|
19
|
+
width: visibleWidth * scale,
|
|
20
|
+
height: visibleHeight * scale,
|
|
21
|
+
initialTransform: `translate(0,0) scale(${1 / scale})`
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
//#endregion
|
|
25
|
+
export { computePositionedStyle };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/element-tests.js
|
|
2
|
+
function isElement(el) {
|
|
3
|
+
if (typeof Element === "undefined") return false;
|
|
4
|
+
return el instanceof Element;
|
|
5
|
+
}
|
|
6
|
+
const testElType = (type, el) => isElement(el) && el.tagName.toUpperCase() === type;
|
|
7
|
+
const testDiv = (el) => testElType("DIV", el) || testElType("SPAN", el);
|
|
8
|
+
const testImg = (el) => testElType("IMG", el);
|
|
9
|
+
const testImgLoaded = (el) => el.complete && el.naturalHeight !== 0;
|
|
10
|
+
const testSvg = (el) => testElType("SVG", el);
|
|
11
|
+
//#endregion
|
|
12
|
+
export { testDiv, testImg, testImgLoaded, testSvg };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { parsePosition } from "./parse-position.js";
|
|
2
|
+
import { computePositionedStyle } from "./compute-positioned-style.js";
|
|
3
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-div-img-style.js
|
|
4
|
+
const getDivImgStyle = ({ backgroundPosition, backgroundSize, containerHeight, containerLeft, containerTop, containerWidth, hasScalableSrc, offset, targetHeight, targetWidth }) => {
|
|
5
|
+
const base = {
|
|
6
|
+
containerHeight,
|
|
7
|
+
containerLeft,
|
|
8
|
+
containerTop,
|
|
9
|
+
containerWidth,
|
|
10
|
+
hasScalableSrc,
|
|
11
|
+
offset,
|
|
12
|
+
position: backgroundPosition,
|
|
13
|
+
targetHeight,
|
|
14
|
+
targetWidth
|
|
15
|
+
};
|
|
16
|
+
if (backgroundSize === "cover" || backgroundSize === "contain") {
|
|
17
|
+
const widthRatio = containerWidth / targetWidth;
|
|
18
|
+
const heightRatio = containerHeight / targetHeight;
|
|
19
|
+
const ratio = backgroundSize === "cover" ? Math.max(widthRatio, heightRatio) : Math.min(widthRatio, heightRatio);
|
|
20
|
+
return computePositionedStyle({
|
|
21
|
+
...base,
|
|
22
|
+
visibleWidth: targetWidth * ratio,
|
|
23
|
+
visibleHeight: targetHeight * ratio
|
|
24
|
+
});
|
|
25
|
+
} else if (backgroundSize === "auto") return computePositionedStyle({
|
|
26
|
+
...base,
|
|
27
|
+
visibleWidth: targetWidth,
|
|
28
|
+
visibleHeight: targetHeight
|
|
29
|
+
});
|
|
30
|
+
else {
|
|
31
|
+
const [sizeW = "50%", sizeH = "50%"] = backgroundSize.split(" ");
|
|
32
|
+
const sizeWidth = parsePosition(sizeW, containerWidth);
|
|
33
|
+
const sizeHeight = parsePosition(sizeH, containerHeight);
|
|
34
|
+
const widthRatio = sizeWidth / targetWidth;
|
|
35
|
+
const heightRatio = sizeHeight / targetHeight;
|
|
36
|
+
const ratio = Math.min(widthRatio, heightRatio);
|
|
37
|
+
return computePositionedStyle({
|
|
38
|
+
...base,
|
|
39
|
+
visibleWidth: targetWidth * ratio,
|
|
40
|
+
visibleHeight: targetHeight * ratio
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
//#endregion
|
|
45
|
+
export { getDivImgStyle };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { testImg } from "./element-tests.js";
|
|
2
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-img-alt.js
|
|
3
|
+
const getImgAlt = (imgEl) => {
|
|
4
|
+
if (imgEl !== null) if (testImg(imgEl)) return imgEl.alt;
|
|
5
|
+
else return imgEl.getAttribute("aria-label") ?? void 0;
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { getImgAlt };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { getScale } from "./get-scale.js";
|
|
2
|
+
import { computePositionedStyle } from "./compute-positioned-style.js";
|
|
3
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-img-object-fit-style.js
|
|
4
|
+
const getImgObjectFitStyle = ({ containerHeight, containerLeft, containerTop, containerWidth, hasScalableSrc, objectFit: objectFitParam, objectPosition, offset, targetHeight, targetWidth }) => {
|
|
5
|
+
let resolvedObjectFit = objectFitParam;
|
|
6
|
+
if (resolvedObjectFit === "scale-down") if (targetWidth <= containerWidth && targetHeight <= containerHeight) resolvedObjectFit = "none";
|
|
7
|
+
else resolvedObjectFit = "contain";
|
|
8
|
+
const base = {
|
|
9
|
+
containerHeight,
|
|
10
|
+
containerLeft,
|
|
11
|
+
containerTop,
|
|
12
|
+
containerWidth,
|
|
13
|
+
hasScalableSrc,
|
|
14
|
+
offset,
|
|
15
|
+
position: objectPosition,
|
|
16
|
+
targetHeight,
|
|
17
|
+
targetWidth
|
|
18
|
+
};
|
|
19
|
+
if (resolvedObjectFit === "cover" || resolvedObjectFit === "contain") {
|
|
20
|
+
const widthRatio = containerWidth / targetWidth;
|
|
21
|
+
const heightRatio = containerHeight / targetHeight;
|
|
22
|
+
const ratio = resolvedObjectFit === "cover" ? Math.max(widthRatio, heightRatio) : Math.min(widthRatio, heightRatio);
|
|
23
|
+
return computePositionedStyle({
|
|
24
|
+
...base,
|
|
25
|
+
visibleWidth: targetWidth * ratio,
|
|
26
|
+
visibleHeight: targetHeight * ratio
|
|
27
|
+
});
|
|
28
|
+
} else if (resolvedObjectFit === "none") return computePositionedStyle({
|
|
29
|
+
...base,
|
|
30
|
+
visibleWidth: targetWidth,
|
|
31
|
+
visibleHeight: targetHeight
|
|
32
|
+
});
|
|
33
|
+
else {
|
|
34
|
+
const widthRatio = containerWidth / targetWidth;
|
|
35
|
+
const heightRatio = containerHeight / targetHeight;
|
|
36
|
+
const ratio = Math.max(widthRatio, heightRatio);
|
|
37
|
+
const scale = getScale({
|
|
38
|
+
containerHeight: targetHeight * ratio,
|
|
39
|
+
containerWidth: targetWidth * ratio,
|
|
40
|
+
hasScalableSrc,
|
|
41
|
+
offset,
|
|
42
|
+
targetHeight,
|
|
43
|
+
targetWidth
|
|
44
|
+
});
|
|
45
|
+
return {
|
|
46
|
+
top: containerTop,
|
|
47
|
+
left: containerLeft,
|
|
48
|
+
width: containerWidth * scale,
|
|
49
|
+
height: containerHeight * scale,
|
|
50
|
+
initialTransform: `translate(0,0) scale(${1 / scale})`
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
//#endregion
|
|
55
|
+
export { getImgObjectFitStyle };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getScale } from "./get-scale.js";
|
|
2
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-img-regular-style.js
|
|
3
|
+
const getImgRegularStyle = ({ containerHeight, containerLeft, containerTop, containerWidth, hasScalableSrc, offset, targetHeight, targetWidth }) => {
|
|
4
|
+
const scale = getScale({
|
|
5
|
+
containerHeight,
|
|
6
|
+
containerWidth,
|
|
7
|
+
hasScalableSrc,
|
|
8
|
+
offset,
|
|
9
|
+
targetHeight,
|
|
10
|
+
targetWidth
|
|
11
|
+
});
|
|
12
|
+
return {
|
|
13
|
+
top: containerTop,
|
|
14
|
+
left: containerLeft,
|
|
15
|
+
width: containerWidth * scale,
|
|
16
|
+
height: containerHeight * scale,
|
|
17
|
+
initialTransform: `translate(0,0) scale(${1 / scale})`
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
//#endregion
|
|
21
|
+
export { getImgRegularStyle };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { testDiv, testImg } from "./element-tests.js";
|
|
2
|
+
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.4_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils/get-img-src.js
|
|
3
|
+
const URL_REGEX = /url(?:\(['"]?)(?<url>.*?)(?:['"]?\))/;
|
|
4
|
+
const getImgSrc = (imgEl) => {
|
|
5
|
+
if (imgEl !== null) {
|
|
6
|
+
if (testImg(imgEl)) return imgEl.currentSrc === "" ? void 0 : imgEl.currentSrc;
|
|
7
|
+
else if (testDiv(imgEl)) {
|
|
8
|
+
const { backgroundImage: bgImg } = window.getComputedStyle(imgEl);
|
|
9
|
+
if (bgImg !== "") return URL_REGEX.exec(bgImg)?.[1];
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
//#endregion
|
|
14
|
+
export { getImgSrc };
|