@fluid-app/portal-widgets 0.1.17
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/AlertWidget-AS_8Jjbd.cjs +39 -0
- package/dist/AlertWidget-AS_8Jjbd.cjs.map +1 -0
- package/dist/AlertWidget-Dy6pBmXm.mjs +22 -0
- package/dist/AlertWidget-Dy6pBmXm.mjs.map +1 -0
- package/dist/CalendarWidget-DAHnT9Wn.mjs +424 -0
- package/dist/CalendarWidget-DAHnT9Wn.mjs.map +1 -0
- package/dist/CalendarWidget-DW7q6Q7_.cjs +441 -0
- package/dist/CalendarWidget-DW7q6Q7_.cjs.map +1 -0
- package/dist/CarouselWidget-BJvLjY7H.mjs +436 -0
- package/dist/CarouselWidget-BJvLjY7H.mjs.map +1 -0
- package/dist/CarouselWidget-Bdn0LVXT.cjs +453 -0
- package/dist/CarouselWidget-Bdn0LVXT.cjs.map +1 -0
- package/dist/CatchUpWidget-CZMptzf8.cjs +264 -0
- package/dist/CatchUpWidget-CZMptzf8.cjs.map +1 -0
- package/dist/CatchUpWidget-vEP5scfy.mjs +247 -0
- package/dist/CatchUpWidget-vEP5scfy.mjs.map +1 -0
- package/dist/ChartWidget-B3GcdLqH.mjs +415 -0
- package/dist/ChartWidget-B3GcdLqH.mjs.map +1 -0
- package/dist/ChartWidget-DQB7K6S0.cjs +432 -0
- package/dist/ChartWidget-DQB7K6S0.cjs.map +1 -0
- package/dist/ContainerWidget-B-4hcPKJ.mjs +44 -0
- package/dist/ContainerWidget-B-4hcPKJ.mjs.map +1 -0
- package/dist/ContainerWidget-CHa4gVvV.cjs +2 -0
- package/dist/ContainerWidget-rGsakG66.cjs +51 -0
- package/dist/ContainerWidget-rGsakG66.cjs.map +1 -0
- package/dist/EmbedWidget-ChLVA_9a.mjs +156 -0
- package/dist/EmbedWidget-ChLVA_9a.mjs.map +1 -0
- package/dist/EmbedWidget-mv5ce32s.cjs +173 -0
- package/dist/EmbedWidget-mv5ce32s.cjs.map +1 -0
- package/dist/ImageWidget-DFt4mJJx.cjs +167 -0
- package/dist/ImageWidget-DFt4mJJx.cjs.map +1 -0
- package/dist/ImageWidget-DMubcgat.mjs +150 -0
- package/dist/ImageWidget-DMubcgat.mjs.map +1 -0
- package/dist/LayoutWidget-BEi0yFpz.mjs +107 -0
- package/dist/LayoutWidget-BEi0yFpz.mjs.map +1 -0
- package/dist/LayoutWidget-C4-ka0Ge.cjs +114 -0
- package/dist/LayoutWidget-C4-ka0Ge.cjs.map +1 -0
- package/dist/LayoutWidget-D4haEqTQ.cjs +2 -0
- package/dist/ListWidget-C-jcsCb4.mjs +901 -0
- package/dist/ListWidget-C-jcsCb4.mjs.map +1 -0
- package/dist/ListWidget-RHQ2fQXa.cjs +919 -0
- package/dist/ListWidget-RHQ2fQXa.cjs.map +1 -0
- package/dist/MediaRenderer-CcJvyOJ1.cjs +181 -0
- package/dist/MediaRenderer-CcJvyOJ1.cjs.map +1 -0
- package/dist/MediaRenderer-Uq90PZcY.mjs +163 -0
- package/dist/MediaRenderer-Uq90PZcY.mjs.map +1 -0
- package/dist/MySiteWidget-A_cYFgxJ.cjs +279 -0
- package/dist/MySiteWidget-A_cYFgxJ.cjs.map +1 -0
- package/dist/MySiteWidget-DariqlfU.mjs +262 -0
- package/dist/MySiteWidget-DariqlfU.mjs.map +1 -0
- package/dist/NestedWidget-CNkwGwhM.mjs +330 -0
- package/dist/NestedWidget-CNkwGwhM.mjs.map +1 -0
- package/dist/NestedWidget-ofk9O-t1.cjs +346 -0
- package/dist/NestedWidget-ofk9O-t1.cjs.map +1 -0
- package/dist/QuickShareWidget-DWvgEy74.cjs +262 -0
- package/dist/QuickShareWidget-DWvgEy74.cjs.map +1 -0
- package/dist/QuickShareWidget-DXq5lcDn.mjs +245 -0
- package/dist/QuickShareWidget-DXq5lcDn.mjs.map +1 -0
- package/dist/RecentActivityWidget-BvncOdax.mjs +391 -0
- package/dist/RecentActivityWidget-BvncOdax.mjs.map +1 -0
- package/dist/RecentActivityWidget-wODng8dt.cjs +408 -0
- package/dist/RecentActivityWidget-wODng8dt.cjs.map +1 -0
- package/dist/RegistryContext-CscXrsRa.mjs +36 -0
- package/dist/RegistryContext-CscXrsRa.mjs.map +1 -0
- package/dist/RegistryContext-xjea4xVV.cjs +55 -0
- package/dist/RegistryContext-xjea4xVV.cjs.map +1 -0
- package/dist/ScreenRenderer-D52h5VQr.mjs +76 -0
- package/dist/ScreenRenderer-D52h5VQr.mjs.map +1 -0
- package/dist/ScreenRenderer-DZAxcg7x.cjs +82 -0
- package/dist/ScreenRenderer-DZAxcg7x.cjs.map +1 -0
- package/dist/ScreenRendererContext-CK1IsFTn.cjs +36 -0
- package/dist/ScreenRendererContext-CK1IsFTn.cjs.map +1 -0
- package/dist/ScreenRendererContext-DKcdcmiT.mjs +23 -0
- package/dist/ScreenRendererContext-DKcdcmiT.mjs.map +1 -0
- package/dist/SpacerWidget-Bgz6701y.cjs +60 -0
- package/dist/SpacerWidget-Bgz6701y.cjs.map +1 -0
- package/dist/SpacerWidget-DHGoW6eu.mjs +43 -0
- package/dist/SpacerWidget-DHGoW6eu.mjs.map +1 -0
- package/dist/TableWidget--yLJTqoW.mjs +438 -0
- package/dist/TableWidget--yLJTqoW.mjs.map +1 -0
- package/dist/TableWidget-TfQfFHft.cjs +455 -0
- package/dist/TableWidget-TfQfFHft.cjs.map +1 -0
- package/dist/TextWidget-CL2H3vei.mjs +129 -0
- package/dist/TextWidget-CL2H3vei.mjs.map +1 -0
- package/dist/TextWidget-D6Ug_2Z1.cjs +146 -0
- package/dist/TextWidget-D6Ug_2Z1.cjs.map +1 -0
- package/dist/ToDoWidget-D8YIsl7y.mjs +274 -0
- package/dist/ToDoWidget-D8YIsl7y.mjs.map +1 -0
- package/dist/ToDoWidget-Dvs0GDkx.cjs +291 -0
- package/dist/ToDoWidget-Dvs0GDkx.cjs.map +1 -0
- package/dist/VideoWidget-D6C_jHOF.mjs +192 -0
- package/dist/VideoWidget-D6C_jHOF.mjs.map +1 -0
- package/dist/VideoWidget-SODAPZO4.cjs +209 -0
- package/dist/VideoWidget-SODAPZO4.cjs.map +1 -0
- package/dist/chunk-CZWwpsFl.cjs +43 -0
- package/dist/components/index.cjs +14 -0
- package/dist/components/index.cjs.map +1 -0
- package/dist/components/index.d.cts +11 -0
- package/dist/components/index.d.cts.map +1 -0
- package/dist/components/index.d.mts +11 -0
- package/dist/components/index.d.mts.map +1 -0
- package/dist/components/index.mjs +11 -0
- package/dist/components/index.mjs.map +1 -0
- package/dist/contexts/index.cjs +8 -0
- package/dist/contexts/index.d.cts +77 -0
- package/dist/contexts/index.d.cts.map +1 -0
- package/dist/contexts/index.d.mts +77 -0
- package/dist/contexts/index.d.mts.map +1 -0
- package/dist/contexts/index.mjs +3 -0
- package/dist/core/index.cjs +51 -0
- package/dist/core/index.d.cts +77 -0
- package/dist/core/index.d.cts.map +1 -0
- package/dist/core/index.d.mts +77 -0
- package/dist/core/index.d.mts.map +1 -0
- package/dist/core/index.mjs +4 -0
- package/dist/error-state-DErSxZwH.mjs +18 -0
- package/dist/error-state-DErSxZwH.mjs.map +1 -0
- package/dist/error-state-DSzVUtEl.cjs +24 -0
- package/dist/error-state-DSzVUtEl.cjs.map +1 -0
- package/dist/fields-4FC6JUNH.d.mts +2 -0
- package/dist/fields-DjLFJmz6.d.cts +2 -0
- package/dist/fields-wPOk-SmZ.mjs +2 -0
- package/dist/rolldown-runtime-wcPFST8Q.mjs +13 -0
- package/dist/scroll-arrows-BZIlsE_x.cjs +35 -0
- package/dist/scroll-arrows-BZIlsE_x.cjs.map +1 -0
- package/dist/scroll-arrows-BevCYRNT.mjs +29 -0
- package/dist/scroll-arrows-BevCYRNT.mjs.map +1 -0
- package/dist/ui/index.cjs +101 -0
- package/dist/ui/index.d.cts +15 -0
- package/dist/ui/index.d.cts.map +1 -0
- package/dist/ui/index.d.mts +15 -0
- package/dist/ui/index.d.mts.map +1 -0
- package/dist/ui/index.mjs +3 -0
- package/dist/widgets/index.cjs +92 -0
- package/dist/widgets/index.cjs.map +1 -0
- package/dist/widgets/index.d.cts +689 -0
- package/dist/widgets/index.d.cts.map +1 -0
- package/dist/widgets/index.d.mts +689 -0
- package/dist/widgets/index.d.mts.map +1 -0
- package/dist/widgets/index.mjs +46 -0
- package/dist/widgets/index.mjs.map +1 -0
- package/package.json +104 -0
- package/src/styles/globals.css +23 -0
- package/src/styles/index.ts +1 -0
- package/tailwind.config.ts +61 -0
|
@@ -0,0 +1,346 @@
|
|
|
1
|
+
const require_chunk = require("./chunk-CZWwpsFl.cjs");
|
|
2
|
+
const require_scroll_arrows = require("./scroll-arrows-BZIlsE_x.cjs");
|
|
3
|
+
const require_MediaRenderer = require("./MediaRenderer-CcJvyOJ1.cjs");
|
|
4
|
+
let _fluid_app_portal_core_registries = require("@fluid-app/portal-core/registries");
|
|
5
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
|
+
let react = require("react");
|
|
7
|
+
require("@fluid-app/portal-core/types");
|
|
8
|
+
//#region src/widgets/NestedWidget.tsx
|
|
9
|
+
var NestedWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
|
|
10
|
+
NestedWidget: () => NestedWidget,
|
|
11
|
+
nestedWidgetPropertySchema: () => nestedWidgetPropertySchema
|
|
12
|
+
});
|
|
13
|
+
const DEFAULT_SHAREABLES = [];
|
|
14
|
+
function NestedWidget({ resource, titleEnabled = true, titleText = "Featured Collection", shareables = DEFAULT_SHAREABLES, gap = "md", padding = 4, borderRadius = "md", primaryMediaHeight = "400px", titleFontSize = "xl", titleColor = "background", titleAlignment = {
|
|
15
|
+
horizontal: "left",
|
|
16
|
+
vertical: "bottom"
|
|
17
|
+
}, nestedTextColor = "foreground", background = {
|
|
18
|
+
type: "solid",
|
|
19
|
+
color: "background"
|
|
20
|
+
}, overlayEnabled = true, overlayType = "gradient", overlayIntensity = 50, className, ...props }) {
|
|
21
|
+
const scrollContainerRef = (0, react.useRef)(null);
|
|
22
|
+
const primaryMediaRef = (0, react.useRef)(null);
|
|
23
|
+
const [primaryMediaWidthPx, setPrimaryMediaWidthPx] = (0, react.useState)(400);
|
|
24
|
+
(0, react.useEffect)(() => {
|
|
25
|
+
const el = primaryMediaRef.current;
|
|
26
|
+
if (!el) return;
|
|
27
|
+
const observer = new ResizeObserver(([entry]) => {
|
|
28
|
+
if (entry) setPrimaryMediaWidthPx(entry.contentRect.width);
|
|
29
|
+
});
|
|
30
|
+
observer.observe(el);
|
|
31
|
+
return () => observer.disconnect();
|
|
32
|
+
}, []);
|
|
33
|
+
const scrollByAmount = (direction) => {
|
|
34
|
+
const container = scrollContainerRef.current;
|
|
35
|
+
if (!container) return;
|
|
36
|
+
const computedGap = parseFloat(getComputedStyle(container).gap) || 0;
|
|
37
|
+
const scrollAmount = primaryMediaWidthPx * .75 + computedGap;
|
|
38
|
+
container.scrollTo({
|
|
39
|
+
left: container.scrollLeft + (direction === "next" ? scrollAmount : -scrollAmount),
|
|
40
|
+
behavior: "smooth"
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
const hasNestedMedia = shareables.length > 0;
|
|
44
|
+
const titleAlignmentClasses = {
|
|
45
|
+
left: "text-left",
|
|
46
|
+
center: "text-center",
|
|
47
|
+
right: "text-right"
|
|
48
|
+
};
|
|
49
|
+
const backgroundColor = background.color || "background";
|
|
50
|
+
const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
|
|
51
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
52
|
+
className: `@container flex w-full p-${padding} rounded-${borderRadius} bg-${backgroundColor} ${className}`,
|
|
53
|
+
...props,
|
|
54
|
+
style: {
|
|
55
|
+
maxHeight: primaryMediaHeight,
|
|
56
|
+
backgroundImage
|
|
57
|
+
},
|
|
58
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
59
|
+
ref: primaryMediaRef,
|
|
60
|
+
className: `overflow-hidden @md:flex-none rounded-${borderRadius}`,
|
|
61
|
+
style: { width: primaryMediaHeight },
|
|
62
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
63
|
+
className: "relative h-full w-full",
|
|
64
|
+
children: [
|
|
65
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MediaRenderer.MediaRenderer, { ...resource ? require_MediaRenderer.getMediaPropsFromShareable(resource) : {} }),
|
|
66
|
+
overlayEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
67
|
+
className: `pointer-events-none absolute inset-0 z-10 ${overlayType === "gradient" ? "bg-gradient-to-t from-black to-transparent" : "bg-black"}`,
|
|
68
|
+
style: { opacity: (Number(String(overlayIntensity).replace("%", "")) || 50) / 100 }
|
|
69
|
+
}),
|
|
70
|
+
(titleEnabled && titleText || hasNestedMedia) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
71
|
+
className: `absolute z-20 w-full ${titleAlignmentClasses[titleAlignment?.horizontal ?? "left"]} p-${padding} ${titleAlignment.vertical === "top" ? `top-0 pt-${padding}` : titleAlignment.vertical === "center" ? "top-1/2 -translate-y-1/2" : `bottom-0 pb-${padding}`}`,
|
|
72
|
+
children: [titleEnabled && titleText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
|
|
73
|
+
className: `leading-tight font-bold text-${titleColor} text-${titleFontSize === "md" ? "base" : titleFontSize}`,
|
|
74
|
+
children: titleText
|
|
75
|
+
}), hasNestedMedia && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
76
|
+
className: `pt-${padding} @md:hidden`,
|
|
77
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
78
|
+
className: `flex overflow-x-auto gap-${_fluid_app_portal_core_registries.gapValues[gap]} bg-transparent`,
|
|
79
|
+
children: shareables.map((shareable) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
80
|
+
className: "flex shrink-0 flex-col items-center",
|
|
81
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
82
|
+
className: `aspect-3/4 h-40 overflow-hidden rounded-${borderRadius}`,
|
|
83
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MediaRenderer.MediaRenderer, { ...require_MediaRenderer.getMediaPropsFromShareable(shareable) })
|
|
84
|
+
})
|
|
85
|
+
}, shareable.id))
|
|
86
|
+
})
|
|
87
|
+
})]
|
|
88
|
+
})
|
|
89
|
+
]
|
|
90
|
+
})
|
|
91
|
+
}), hasNestedMedia && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
92
|
+
className: `relative hidden min-w-0 self-stretch @md:flex @md:flex-1 px-${padding}`,
|
|
93
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
94
|
+
ref: scrollContainerRef,
|
|
95
|
+
className: `flex h-full flex-row overflow-x-auto gap-${_fluid_app_portal_core_registries.gapValues[gap]}`,
|
|
96
|
+
style: { scrollSnapType: "x mandatory" },
|
|
97
|
+
children: shareables.map((shareable) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
98
|
+
className: "flex flex-col gap-1",
|
|
99
|
+
style: {
|
|
100
|
+
width: `${primaryMediaWidthPx * .75}px`,
|
|
101
|
+
scrollSnapAlign: "start"
|
|
102
|
+
},
|
|
103
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
104
|
+
className: `aspect-3/4 h-full rounded-${borderRadius} overflow-hidden`,
|
|
105
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MediaRenderer.MediaRenderer, { ...require_MediaRenderer.getMediaPropsFromShareable(shareable) })
|
|
106
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
|
|
107
|
+
className: `flex-none text-sm text-${nestedTextColor}`,
|
|
108
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
109
|
+
className: "truncate",
|
|
110
|
+
children: shareable.title || ""
|
|
111
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
112
|
+
className: "truncate",
|
|
113
|
+
children: (shareable.display_price ?? shareable.price) || ""
|
|
114
|
+
})]
|
|
115
|
+
})]
|
|
116
|
+
}, shareable.id))
|
|
117
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
118
|
+
className: `absolute inset-x-0 top-1/2 flex w-full -translate-y-1/2 items-center justify-between px-8`,
|
|
119
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_scroll_arrows.ScrollArrows, {
|
|
120
|
+
onPrevious: () => scrollByAmount("prev"),
|
|
121
|
+
onNext: () => scrollByAmount("next")
|
|
122
|
+
})
|
|
123
|
+
})]
|
|
124
|
+
})]
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
const nestedWidgetPropertySchema = {
|
|
128
|
+
widgetType: "NestedWidget",
|
|
129
|
+
displayName: "Nested Widget",
|
|
130
|
+
tabsConfig: [{
|
|
131
|
+
id: "styling",
|
|
132
|
+
label: "Styling"
|
|
133
|
+
}, {
|
|
134
|
+
id: "data",
|
|
135
|
+
label: "Data"
|
|
136
|
+
}],
|
|
137
|
+
dataSourceTargetProps: ["shareables"],
|
|
138
|
+
fields: [
|
|
139
|
+
{
|
|
140
|
+
key: "resource",
|
|
141
|
+
label: "Primary Media",
|
|
142
|
+
type: "resource",
|
|
143
|
+
description: "Select the primary media displayed in the large panel",
|
|
144
|
+
allowedTypes: ["Medium"],
|
|
145
|
+
tab: "styling",
|
|
146
|
+
group: "Content"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
key: "titleEnabled",
|
|
150
|
+
label: "Widget Title",
|
|
151
|
+
type: "boolean",
|
|
152
|
+
description: "Enable the title displayed over the primary media",
|
|
153
|
+
defaultValue: true,
|
|
154
|
+
tab: "styling",
|
|
155
|
+
group: "Title"
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
key: "titleText",
|
|
159
|
+
label: "Title",
|
|
160
|
+
type: "text",
|
|
161
|
+
description: "Main title displayed over the primary media",
|
|
162
|
+
defaultValue: "Featured Collection",
|
|
163
|
+
tab: "styling",
|
|
164
|
+
group: "Title",
|
|
165
|
+
requiresKeyToBeTrue: "titleEnabled"
|
|
166
|
+
},
|
|
167
|
+
(0, _fluid_app_portal_core_registries.getFontSizeField)({
|
|
168
|
+
label: "Title Font Size",
|
|
169
|
+
defaultValue: "xl",
|
|
170
|
+
key: "titleFontSize",
|
|
171
|
+
description: "Font size for the widget title",
|
|
172
|
+
tab: "styling",
|
|
173
|
+
group: "Title",
|
|
174
|
+
requiresKeyToBeTrue: "titleEnabled"
|
|
175
|
+
}),
|
|
176
|
+
(0, _fluid_app_portal_core_registries.getColorField)({
|
|
177
|
+
defaultValue: "background",
|
|
178
|
+
key: "titleColor",
|
|
179
|
+
label: "Title Color",
|
|
180
|
+
description: "Color for the widget title",
|
|
181
|
+
tab: "styling",
|
|
182
|
+
group: "Title",
|
|
183
|
+
requiresKeyToBeTrue: "titleEnabled"
|
|
184
|
+
}),
|
|
185
|
+
(0, _fluid_app_portal_core_registries.getHeightField)({
|
|
186
|
+
key: "primaryMediaHeight",
|
|
187
|
+
label: "Primary Media Height",
|
|
188
|
+
description: "Height of the primary media container",
|
|
189
|
+
min: 100,
|
|
190
|
+
max: 1200,
|
|
191
|
+
step: 10,
|
|
192
|
+
defaultValue: "400px",
|
|
193
|
+
tab: "styling",
|
|
194
|
+
group: "Design"
|
|
195
|
+
}),
|
|
196
|
+
{
|
|
197
|
+
key: "separator",
|
|
198
|
+
type: "separator",
|
|
199
|
+
label: "Separator",
|
|
200
|
+
tab: "styling",
|
|
201
|
+
group: "Design"
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
key: "titleAlignment",
|
|
205
|
+
label: "Content Alignment",
|
|
206
|
+
type: "alignment",
|
|
207
|
+
description: "Alignment of the content inside the primary media",
|
|
208
|
+
defaultValue: {
|
|
209
|
+
horizontal: "left",
|
|
210
|
+
vertical: "bottom"
|
|
211
|
+
},
|
|
212
|
+
options: {
|
|
213
|
+
horizontalEnabled: true,
|
|
214
|
+
verticalEnabled: true
|
|
215
|
+
},
|
|
216
|
+
tab: "styling",
|
|
217
|
+
group: "Design"
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
key: "separator2",
|
|
221
|
+
type: "separator",
|
|
222
|
+
label: "Separator",
|
|
223
|
+
tab: "styling",
|
|
224
|
+
group: "Design"
|
|
225
|
+
},
|
|
226
|
+
(0, _fluid_app_portal_core_registries.getPaddingField)({
|
|
227
|
+
defaultValue: 4,
|
|
228
|
+
key: "padding",
|
|
229
|
+
label: "Padding",
|
|
230
|
+
description: "Padding used throughout the widget",
|
|
231
|
+
tab: "styling",
|
|
232
|
+
group: "Design"
|
|
233
|
+
}),
|
|
234
|
+
(0, _fluid_app_portal_core_registries.getBorderRadiusField)({
|
|
235
|
+
defaultValue: "md",
|
|
236
|
+
label: "Border Radius",
|
|
237
|
+
key: "borderRadius",
|
|
238
|
+
description: "Rounded corners for the widget",
|
|
239
|
+
tab: "styling",
|
|
240
|
+
group: "Design"
|
|
241
|
+
}),
|
|
242
|
+
{
|
|
243
|
+
key: "overlayEnabled",
|
|
244
|
+
label: "Enable Overlay",
|
|
245
|
+
type: "boolean",
|
|
246
|
+
description: "Add a dark overlay to the primary media for better text readability",
|
|
247
|
+
defaultValue: true,
|
|
248
|
+
tab: "styling",
|
|
249
|
+
group: "Design"
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
key: "overlayType",
|
|
253
|
+
label: "Overlay Type",
|
|
254
|
+
type: "buttonGroup",
|
|
255
|
+
description: "Type of overlay effect",
|
|
256
|
+
defaultValue: "gradient",
|
|
257
|
+
options: [{
|
|
258
|
+
label: "Solid",
|
|
259
|
+
value: "solid"
|
|
260
|
+
}, {
|
|
261
|
+
label: "Gradient",
|
|
262
|
+
value: "gradient"
|
|
263
|
+
}],
|
|
264
|
+
tab: "styling",
|
|
265
|
+
group: "Design",
|
|
266
|
+
requiresKeyToBeTrue: "overlayEnabled"
|
|
267
|
+
},
|
|
268
|
+
{
|
|
269
|
+
key: "overlayIntensity",
|
|
270
|
+
label: "Overlay Intensity",
|
|
271
|
+
type: "slider",
|
|
272
|
+
description: "Opacity of the overlay (0-100)",
|
|
273
|
+
min: 0,
|
|
274
|
+
max: 100,
|
|
275
|
+
step: 5,
|
|
276
|
+
defaultValue: 50,
|
|
277
|
+
unit: "%",
|
|
278
|
+
tab: "styling",
|
|
279
|
+
group: "Design",
|
|
280
|
+
requiresKeyToBeTrue: "overlayEnabled"
|
|
281
|
+
},
|
|
282
|
+
(0, _fluid_app_portal_core_registries.getGapField)({
|
|
283
|
+
label: "Gap",
|
|
284
|
+
defaultValue: "md",
|
|
285
|
+
key: "gap",
|
|
286
|
+
description: "Gap between nested media items",
|
|
287
|
+
tab: "styling",
|
|
288
|
+
group: "Nested Design"
|
|
289
|
+
}),
|
|
290
|
+
(0, _fluid_app_portal_core_registries.getColorField)({
|
|
291
|
+
defaultValue: "foreground",
|
|
292
|
+
key: "nestedTextColor",
|
|
293
|
+
label: "Nested Text Color",
|
|
294
|
+
description: "Color for nested media labels",
|
|
295
|
+
tab: "styling",
|
|
296
|
+
group: "Nested Design"
|
|
297
|
+
}),
|
|
298
|
+
{
|
|
299
|
+
type: "background",
|
|
300
|
+
defaultValue: "background",
|
|
301
|
+
key: "background",
|
|
302
|
+
label: "Background",
|
|
303
|
+
description: "Background color for nested media container",
|
|
304
|
+
tab: "styling",
|
|
305
|
+
group: "Nested Design"
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
key: "dataSource",
|
|
309
|
+
label: "Data Source",
|
|
310
|
+
type: "dataSource",
|
|
311
|
+
description: "Configure dynamic data fetching from an API",
|
|
312
|
+
tab: "data",
|
|
313
|
+
group: "Data Configuration"
|
|
314
|
+
}
|
|
315
|
+
],
|
|
316
|
+
itemConfigSchema: {
|
|
317
|
+
description: "Configure settings for this item",
|
|
318
|
+
fields: [{
|
|
319
|
+
key: "title",
|
|
320
|
+
label: "Custom Title",
|
|
321
|
+
type: "text",
|
|
322
|
+
description: "Override the item's title for this widget"
|
|
323
|
+
}]
|
|
324
|
+
}
|
|
325
|
+
};
|
|
326
|
+
//#endregion
|
|
327
|
+
Object.defineProperty(exports, "NestedWidget", {
|
|
328
|
+
enumerable: true,
|
|
329
|
+
get: function() {
|
|
330
|
+
return NestedWidget;
|
|
331
|
+
}
|
|
332
|
+
});
|
|
333
|
+
Object.defineProperty(exports, "NestedWidget_exports", {
|
|
334
|
+
enumerable: true,
|
|
335
|
+
get: function() {
|
|
336
|
+
return NestedWidget_exports;
|
|
337
|
+
}
|
|
338
|
+
});
|
|
339
|
+
Object.defineProperty(exports, "nestedWidgetPropertySchema", {
|
|
340
|
+
enumerable: true,
|
|
341
|
+
get: function() {
|
|
342
|
+
return nestedWidgetPropertySchema;
|
|
343
|
+
}
|
|
344
|
+
});
|
|
345
|
+
|
|
346
|
+
//# sourceMappingURL=NestedWidget-ofk9O-t1.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NestedWidget-ofk9O-t1.cjs","names":["MediaRenderer","getMediaPropsFromShareable","gapValues","ScrollArrows"],"sources":["../src/widgets/NestedWidget.tsx"],"sourcesContent":["import { useRef, useState, useEffect, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n MediaRenderer,\n getMediaPropsFromShareable,\n} from \"../components/MediaRenderer\";\nimport type {\n BorderRadiusOptions,\n ColorOptions,\n FontSizeOptions,\n PaddingOptions,\n AlignOptions,\n GapOptions,\n BackgroundValue,\n} from \"@fluid-app/portal-core/types\";\nimport {\n getHeightField,\n type WidgetPropertySchema,\n} from \"@fluid-app/portal-core/registries\";\nimport {\n getBorderRadiusField,\n getColorField,\n getFontSizeField,\n getGapField,\n getPaddingField,\n gapValues,\n} from \"../core/fields\";\nimport { ScrollArrows } from \"../ui/scroll-arrows\";\nimport { type ShareableItem } from \"@fluid-app/portal-core/types\";\n\nconst DEFAULT_SHAREABLES: ShareableItem[] = [];\n\ntype NestedWidgetProps = ComponentProps<\"div\"> & {\n // Content\n resource?: ShareableItem;\n titleEnabled?: boolean;\n titleText?: string;\n shareables?: ShareableItem[];\n\n // Layout\n gap?: GapOptions;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n primaryMediaHeight?: string;\n\n // Title styling\n titleFontSize?: FontSizeOptions;\n titleColor?: ColorOptions;\n titleAlignment?: AlignOptions;\n\n // Nested media styling\n nestedTextColor?: ColorOptions;\n background?: BackgroundValue;\n\n // Overlay\n overlayEnabled?: boolean;\n overlayType?: \"solid\" | \"gradient\";\n overlayIntensity?: number;\n};\n\nexport function NestedWidget({\n resource,\n titleEnabled = true,\n titleText = \"Featured Collection\",\n shareables = DEFAULT_SHAREABLES,\n gap = \"md\",\n padding = 4,\n borderRadius = \"md\",\n primaryMediaHeight = \"400px\",\n titleFontSize = \"xl\",\n titleColor = \"background\",\n titleAlignment = { horizontal: \"left\", vertical: \"bottom\" },\n nestedTextColor = \"foreground\",\n background = {\n type: \"solid\",\n color: \"background\",\n },\n overlayEnabled = true,\n overlayType = \"gradient\",\n overlayIntensity = 50,\n className,\n ...props\n}: NestedWidgetProps): React.JSX.Element {\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const primaryMediaRef = useRef<HTMLDivElement>(null);\n const [primaryMediaWidthPx, setPrimaryMediaWidthPx] = useState(400);\n\n useEffect(() => {\n const el = primaryMediaRef.current;\n if (!el) return;\n const observer = new ResizeObserver(([entry]) => {\n if (entry) setPrimaryMediaWidthPx(entry.contentRect.width);\n });\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n const scrollByAmount = (direction: \"prev\" | \"next\") => {\n const container = scrollContainerRef.current;\n if (!container) return;\n\n const computedGap = parseFloat(getComputedStyle(container).gap) || 0;\n const itemWidth = primaryMediaWidthPx * 0.75;\n const scrollAmount = itemWidth + computedGap;\n\n container.scrollTo({\n left:\n container.scrollLeft +\n (direction === \"next\" ? scrollAmount : -scrollAmount),\n behavior: \"smooth\",\n });\n };\n\n const hasNestedMedia = shareables.length > 0;\n\n const titleAlignmentClasses = {\n left: \"text-left\",\n center: \"text-center\",\n right: \"text-right\",\n };\n\n const backgroundColor = background.color || \"background\";\n const backgroundImage =\n (background.resource?.image_url || background.resource?.imageUrl) &&\n background.type === \"image\"\n ? `url(${background.resource.image_url || background.resource.imageUrl})`\n : \"none\";\n\n return (\n <div\n className={`@container flex w-full p-${padding} rounded-${borderRadius} bg-${backgroundColor} ${className}`}\n {...props}\n style={{\n maxHeight: primaryMediaHeight,\n backgroundImage: backgroundImage,\n }}\n >\n {/* Primary Media Container - Full width on mobile, fixed on desktop */}\n <div\n ref={primaryMediaRef}\n className={`overflow-hidden @md:flex-none rounded-${borderRadius}`}\n style={{\n width: primaryMediaHeight,\n }}\n >\n {/* Primary Media */}\n <div className=\"relative h-full w-full\">\n <MediaRenderer\n {...(resource ? getMediaPropsFromShareable(resource) : {})}\n />\n\n {/* Overlay */}\n {overlayEnabled && (\n <div\n className={`pointer-events-none absolute inset-0 z-10 ${\n overlayType === \"gradient\"\n ? \"bg-gradient-to-t from-black to-transparent\"\n : \"bg-black\"\n }`}\n style={{\n opacity:\n (Number(String(overlayIntensity).replace(\"%\", \"\")) || 50) /\n 100,\n }}\n />\n )}\n\n {/* Title and Mobile Nested Media */}\n {((titleEnabled && titleText) || hasNestedMedia) && (\n <div\n className={`absolute z-20 w-full ${titleAlignmentClasses[titleAlignment?.horizontal ?? \"left\"]} p-${padding} ${\n titleAlignment.vertical === \"top\"\n ? `top-0 pt-${padding}`\n : titleAlignment.vertical === \"center\"\n ? \"top-1/2 -translate-y-1/2\"\n : `bottom-0 pb-${padding}`\n }`}\n >\n {titleEnabled && titleText && (\n <h2\n className={`leading-tight font-bold text-${titleColor} text-${titleFontSize === \"md\" ? \"base\" : titleFontSize}`}\n >\n {titleText}\n </h2>\n )}\n\n {/* Mobile: Products overlay inside primary media */}\n {hasNestedMedia && (\n <div className={`pt-${padding} @md:hidden`}>\n <div\n className={`flex overflow-x-auto gap-${gapValues[gap]} bg-transparent`}\n >\n {shareables.map((shareable) => (\n <div\n key={shareable.id}\n className=\"flex shrink-0 flex-col items-center\"\n >\n <div\n className={`aspect-3/4 h-40 overflow-hidden rounded-${borderRadius}`}\n >\n <MediaRenderer\n {...getMediaPropsFromShareable(shareable)}\n />\n </div>\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n\n {/* Desktop: Products Container - Single row beside primary media */}\n {hasNestedMedia && (\n <div\n className={`relative hidden min-w-0 self-stretch @md:flex @md:flex-1 px-${padding}`}\n >\n <div\n ref={scrollContainerRef}\n className={`flex h-full flex-row overflow-x-auto gap-${gapValues[gap]}`}\n style={{ scrollSnapType: \"x mandatory\" }}\n >\n {shareables.map((shareable) => (\n <div\n key={shareable.id}\n className=\"flex flex-col gap-1\"\n style={{\n width: `${primaryMediaWidthPx * 0.75}px`,\n scrollSnapAlign: \"start\",\n }}\n >\n <div\n className={`aspect-3/4 h-full rounded-${borderRadius} overflow-hidden`}\n >\n <MediaRenderer {...getMediaPropsFromShareable(shareable)} />\n </div>\n <span className={`flex-none text-sm text-${nestedTextColor}`}>\n <p className=\"truncate\">{shareable.title || \"\"}</p>\n <p className=\"truncate\">\n {((shareable.display_price as string) ?? shareable.price) ||\n \"\"}\n </p>\n </span>\n </div>\n ))}\n </div>\n\n {/* Navigation arrows */}\n <div\n className={`absolute inset-x-0 top-1/2 flex w-full -translate-y-1/2 items-center justify-between px-8`}\n >\n <ScrollArrows\n onPrevious={() => scrollByAmount(\"prev\")}\n onNext={() => scrollByAmount(\"next\")}\n />\n </div>\n </div>\n )}\n </div>\n );\n}\n\nexport const nestedWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"NestedWidget\",\n displayName: \"Nested Widget\",\n tabsConfig: [\n { id: \"styling\", label: \"Styling\" },\n { id: \"data\", label: \"Data\" },\n ],\n dataSourceTargetProps: [\"shareables\"],\n fields: [\n // Content tab - Resource group\n {\n key: \"resource\",\n label: \"Primary Media\",\n type: \"resource\",\n description: \"Select the primary media displayed in the large panel\",\n allowedTypes: [\"Medium\"],\n tab: \"styling\",\n group: \"Content\",\n },\n // Content tab - Title group\n {\n key: \"titleEnabled\",\n label: \"Widget Title\",\n type: \"boolean\",\n description: \"Enable the title displayed over the primary media\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Title\",\n },\n {\n key: \"titleText\",\n label: \"Title\",\n type: \"text\",\n description: \"Main title displayed over the primary media\",\n defaultValue: \"Featured Collection\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n },\n getFontSizeField({\n label: \"Title Font Size\",\n defaultValue: \"xl\",\n key: \"titleFontSize\",\n description: \"Font size for the widget title\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n getColorField({\n defaultValue: \"background\",\n key: \"titleColor\",\n label: \"Title Color\",\n description: \"Color for the widget title\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n // Styling tab - Design group\n getHeightField({\n key: \"primaryMediaHeight\",\n label: \"Primary Media Height\",\n description: \"Height of the primary media container\",\n min: 100,\n max: 1200,\n step: 10,\n defaultValue: \"400px\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"separator\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Design\",\n },\n {\n key: \"titleAlignment\",\n label: \"Content Alignment\",\n type: \"alignment\",\n description: \"Alignment of the content inside the primary media\",\n defaultValue: { horizontal: \"left\", vertical: \"bottom\" },\n options: {\n horizontalEnabled: true,\n verticalEnabled: true,\n },\n tab: \"styling\",\n group: \"Design\",\n },\n {\n key: \"separator2\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Design\",\n },\n getPaddingField({\n defaultValue: 4,\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding used throughout the widget\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getBorderRadiusField({\n defaultValue: \"md\",\n label: \"Border Radius\",\n key: \"borderRadius\",\n description: \"Rounded corners for the widget\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"overlayEnabled\",\n label: \"Enable Overlay\",\n type: \"boolean\",\n description:\n \"Add a dark overlay to the primary media for better text readability\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Design\",\n },\n {\n key: \"overlayType\",\n label: \"Overlay Type\",\n type: \"buttonGroup\",\n description: \"Type of overlay effect\",\n defaultValue: \"gradient\",\n options: [\n { label: \"Solid\", value: \"solid\" },\n { label: \"Gradient\", value: \"gradient\" },\n ],\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"overlayEnabled\",\n },\n {\n key: \"overlayIntensity\",\n label: \"Overlay Intensity\",\n type: \"slider\",\n description: \"Opacity of the overlay (0-100)\",\n min: 0,\n max: 100,\n step: 5,\n defaultValue: 50,\n unit: \"%\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"overlayEnabled\",\n },\n // Styling tab - Nested Media Styling group\n getGapField({\n label: \"Gap\",\n defaultValue: \"md\",\n key: \"gap\",\n description: \"Gap between nested media items\",\n tab: \"styling\",\n group: \"Nested Design\",\n }),\n getColorField({\n defaultValue: \"foreground\",\n key: \"nestedTextColor\",\n label: \"Nested Text Color\",\n description: \"Color for nested media labels\",\n tab: \"styling\",\n group: \"Nested Design\",\n }),\n {\n type: \"background\",\n defaultValue: \"background\",\n key: \"background\",\n label: \"Background\",\n description: \"Background color for nested media container\",\n tab: \"styling\",\n group: \"Nested Design\",\n },\n // Data tab\n {\n key: \"dataSource\",\n label: \"Data Source\",\n type: \"dataSource\",\n description: \"Configure dynamic data fetching from an API\",\n tab: \"data\",\n group: \"Data Configuration\",\n },\n ],\n // Per-item configuration schema for custom data sources\n itemConfigSchema: {\n description: \"Configure settings for this item\",\n fields: [\n {\n key: \"title\",\n label: \"Custom Title\",\n type: \"text\",\n description: \"Override the item's title for this widget\",\n },\n ],\n },\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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Y;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;wDAEa;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;IAAE,YAAY;IAAQ,UAAU;IAAU;GACxD,SAAS;IACP,mBAAmB;IACnB,iBAAiB;IAClB;GACD,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;yDACe;GACd,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;8DACmB;GACnB,cAAc;GACd,OAAO;GACP,KAAK;GACL,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aACE;GACF,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAY,OAAO;IAAY,CACzC;GACD,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,MAAM;GACN,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;qDAEW;GACV,OAAO;GACP,cAAc;GACd,KAAK;GACL,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;uDACY;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR;EAED;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CAED,kBAAkB;EAChB,aAAa;EACb,QAAQ,CACN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACd,CACF;EACF;CACF"}
|
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
const require_chunk = require("./chunk-CZWwpsFl.cjs");
|
|
2
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
3
|
+
let _fortawesome_react_fontawesome = require("@fortawesome/react-fontawesome");
|
|
4
|
+
let _fortawesome_pro_regular_svg_icons = require("@fortawesome/pro-regular-svg-icons");
|
|
5
|
+
let qrcode_react = require("qrcode.react");
|
|
6
|
+
let _fluid_app_portal_core_registries = require("@fluid-app/portal-core/registries");
|
|
7
|
+
//#region src/widgets/QuickShareWidget.tsx
|
|
8
|
+
var QuickShareWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
|
|
9
|
+
QuickShareWidget: () => QuickShareWidget,
|
|
10
|
+
quickShareWidgetPropertySchema: () => quickShareWidgetPropertySchema
|
|
11
|
+
});
|
|
12
|
+
function QuickShareWidget({ shareableResource, titleEnabled = true, titleText = "", titleFontSize = "2xl", titleColor = "foreground", textColor = "foreground", accentColor = "primary", padding = 4, borderRadius = "md", overlayEnabled = true, overlayType = "solid", overlayIntensity = 50, showBuyButton = false, className, ...props }) {
|
|
13
|
+
const backgroundImageUrl = shareableResource?.image_url || shareableResource?.imageUrl;
|
|
14
|
+
const shareLink = shareableResource?.share_link || "";
|
|
15
|
+
const displayUrl = shareLink || "Select a resource to generate link";
|
|
16
|
+
const displayTitle = titleText || shareableResource?.title || "Select a resource to display!";
|
|
17
|
+
const isProduct = shareableResource?.type === "Product" || shareableResource?.shareableType === "Product";
|
|
18
|
+
const shouldShowBuyButton = showBuyButton && isProduct;
|
|
19
|
+
const handleCopyToClipboard = async () => {
|
|
20
|
+
if (shareLink) try {
|
|
21
|
+
await navigator.clipboard.writeText(shareLink);
|
|
22
|
+
} catch (error) {
|
|
23
|
+
console.error("Failed to copy to clipboard:", error);
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
27
|
+
className: `relative overflow-hidden rounded-${borderRadius} bg-muted text-${textColor} ${className ?? ""}`,
|
|
28
|
+
...props,
|
|
29
|
+
children: [backgroundImageUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
30
|
+
className: "absolute inset-0",
|
|
31
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
|
|
32
|
+
src: backgroundImageUrl,
|
|
33
|
+
alt: "",
|
|
34
|
+
className: "h-full w-full object-cover"
|
|
35
|
+
}), overlayEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
36
|
+
className: `absolute inset-0 ${overlayType === "gradient" ? "bg-gradient-to-t from-black to-transparent" : "bg-black"}`,
|
|
37
|
+
style: { opacity: (Number(String(overlayIntensity).replace("%", "")) || 50) / 100 }
|
|
38
|
+
})]
|
|
39
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
40
|
+
className: `bg-muted absolute inset-0 flex items-center justify-center`,
|
|
41
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fortawesome_react_fontawesome.FontAwesomeIcon, {
|
|
42
|
+
icon: _fortawesome_pro_regular_svg_icons.faImage,
|
|
43
|
+
className: "h-16 w-16 opacity-20"
|
|
44
|
+
})
|
|
45
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
46
|
+
className: `relative flex min-h-[400px] flex-col p-${padding}`,
|
|
47
|
+
children: [titleEnabled && displayTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
48
|
+
className: "flex flex-1 items-center justify-center",
|
|
49
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
|
|
50
|
+
className: `text-center text-${titleFontSize} font-semibold text-${titleColor} drop-shadow-lg`,
|
|
51
|
+
children: displayTitle
|
|
52
|
+
})
|
|
53
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
54
|
+
className: "mt-auto flex flex-col gap-4",
|
|
55
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
56
|
+
className: "flex items-end justify-between gap-4",
|
|
57
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
58
|
+
className: "shrink-0 rounded-lg bg-white p-2",
|
|
59
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(qrcode_react.QRCodeSVG, {
|
|
60
|
+
value: shareLink || "https://example.com",
|
|
61
|
+
size: 100,
|
|
62
|
+
level: "H"
|
|
63
|
+
})
|
|
64
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
65
|
+
className: "min-w-0 flex-1",
|
|
66
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
67
|
+
className: "mb-2 text-sm font-semibold tracking-wide drop-shadow",
|
|
68
|
+
children: "Your Shareable URL"
|
|
69
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
70
|
+
className: "flex items-center justify-between rounded-md border border-white/20 bg-black/50 p-2 text-sm text-white backdrop-blur",
|
|
71
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
72
|
+
className: "truncate",
|
|
73
|
+
children: displayUrl
|
|
74
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
75
|
+
type: "button",
|
|
76
|
+
onClick: handleCopyToClipboard,
|
|
77
|
+
className: `ml-2 shrink-0 rounded p-1 transition-colors hover:bg-${accentColor}/20`,
|
|
78
|
+
"aria-label": "Copy link",
|
|
79
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fortawesome_react_fontawesome.FontAwesomeIcon, {
|
|
80
|
+
icon: _fortawesome_pro_regular_svg_icons.faCopy,
|
|
81
|
+
className: "h-4 w-4"
|
|
82
|
+
})
|
|
83
|
+
})]
|
|
84
|
+
})]
|
|
85
|
+
})]
|
|
86
|
+
}), shouldShowBuyButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
87
|
+
className: "flex",
|
|
88
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
|
|
89
|
+
type: "button",
|
|
90
|
+
className: `flex w-full items-center justify-center gap-2 rounded-lg bg-${accentColor} p-3 font-medium text-${accentColor}-foreground transition-all hover:bg-${accentColor}-500`,
|
|
91
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fortawesome_react_fontawesome.FontAwesomeIcon, {
|
|
92
|
+
icon: _fortawesome_pro_regular_svg_icons.faCartShopping,
|
|
93
|
+
className: "h-4 w-4"
|
|
94
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Buy" })]
|
|
95
|
+
})
|
|
96
|
+
})]
|
|
97
|
+
})]
|
|
98
|
+
})]
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
const quickShareWidgetPropertySchema = {
|
|
102
|
+
widgetType: "QuickShareWidget",
|
|
103
|
+
displayName: "Quick Share Widget",
|
|
104
|
+
tabsConfig: [{
|
|
105
|
+
id: "styling",
|
|
106
|
+
label: "Styling"
|
|
107
|
+
}],
|
|
108
|
+
fields: [
|
|
109
|
+
{
|
|
110
|
+
key: "shareableResource",
|
|
111
|
+
label: "Shareable Content",
|
|
112
|
+
type: "resource",
|
|
113
|
+
description: "Select the content to generate a share link for",
|
|
114
|
+
allowedTypes: [
|
|
115
|
+
"Product",
|
|
116
|
+
"Page",
|
|
117
|
+
"EnrollmentPack",
|
|
118
|
+
"Medium",
|
|
119
|
+
"Library"
|
|
120
|
+
],
|
|
121
|
+
tab: "styling",
|
|
122
|
+
group: "Content"
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
key: "titleEnabled",
|
|
126
|
+
label: "Show Title",
|
|
127
|
+
type: "boolean",
|
|
128
|
+
description: "Display a title overlay on the widget",
|
|
129
|
+
defaultValue: true,
|
|
130
|
+
tab: "styling",
|
|
131
|
+
group: "Title"
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
key: "titleText",
|
|
135
|
+
label: "Title",
|
|
136
|
+
type: "text",
|
|
137
|
+
description: "Custom title text (defaults to resource title if empty)",
|
|
138
|
+
defaultValue: "",
|
|
139
|
+
tab: "styling",
|
|
140
|
+
group: "Title",
|
|
141
|
+
requiresKeyToBeTrue: "titleEnabled"
|
|
142
|
+
},
|
|
143
|
+
(0, _fluid_app_portal_core_registries.getFontSizeField)({
|
|
144
|
+
key: "titleFontSize",
|
|
145
|
+
label: "Title Font Size",
|
|
146
|
+
description: "Font size for the title text",
|
|
147
|
+
defaultValue: "2xl",
|
|
148
|
+
tab: "styling",
|
|
149
|
+
group: "Title",
|
|
150
|
+
requiresKeyToBeTrue: "titleEnabled"
|
|
151
|
+
}),
|
|
152
|
+
(0, _fluid_app_portal_core_registries.getColorField)({
|
|
153
|
+
key: "titleColor",
|
|
154
|
+
label: "Title Color",
|
|
155
|
+
description: "Color for the title text",
|
|
156
|
+
defaultValue: "background",
|
|
157
|
+
tab: "styling",
|
|
158
|
+
group: "Title",
|
|
159
|
+
requiresKeyToBeTrue: "titleEnabled"
|
|
160
|
+
}),
|
|
161
|
+
(0, _fluid_app_portal_core_registries.getColorField)({
|
|
162
|
+
key: "textColor",
|
|
163
|
+
label: "Text Color",
|
|
164
|
+
description: "Default text color for the widget",
|
|
165
|
+
defaultValue: "background",
|
|
166
|
+
tab: "styling",
|
|
167
|
+
group: "Design"
|
|
168
|
+
}),
|
|
169
|
+
(0, _fluid_app_portal_core_registries.getColorField)({
|
|
170
|
+
key: "accentColor",
|
|
171
|
+
label: "Accent Color",
|
|
172
|
+
description: "Color for accent elements and buy button",
|
|
173
|
+
defaultValue: "primary",
|
|
174
|
+
tab: "styling",
|
|
175
|
+
group: "Design"
|
|
176
|
+
}),
|
|
177
|
+
{
|
|
178
|
+
key: "overlayEnabled",
|
|
179
|
+
label: "Enable Overlay",
|
|
180
|
+
type: "boolean",
|
|
181
|
+
description: "Add background overlay for text readability",
|
|
182
|
+
defaultValue: true,
|
|
183
|
+
tab: "styling",
|
|
184
|
+
group: "Design"
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
key: "overlayType",
|
|
188
|
+
label: "Overlay Type",
|
|
189
|
+
type: "buttonGroup",
|
|
190
|
+
description: "Type of overlay to add to the background",
|
|
191
|
+
defaultValue: "solid",
|
|
192
|
+
options: [{
|
|
193
|
+
label: "Solid",
|
|
194
|
+
value: "solid"
|
|
195
|
+
}, {
|
|
196
|
+
label: "Gradient",
|
|
197
|
+
value: "gradient"
|
|
198
|
+
}],
|
|
199
|
+
tab: "styling",
|
|
200
|
+
group: "Design",
|
|
201
|
+
requiresKeyToBeTrue: "overlayEnabled"
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
key: "overlayIntensity",
|
|
205
|
+
label: "Overlay Intensity",
|
|
206
|
+
type: "slider",
|
|
207
|
+
description: "Opacity of the overlay background (0-100)",
|
|
208
|
+
min: 0,
|
|
209
|
+
max: 100,
|
|
210
|
+
step: 5,
|
|
211
|
+
defaultValue: 50,
|
|
212
|
+
unit: "%",
|
|
213
|
+
tab: "styling",
|
|
214
|
+
group: "Design",
|
|
215
|
+
requiresKeyToBeTrue: "overlayEnabled"
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
key: "separator",
|
|
219
|
+
type: "separator",
|
|
220
|
+
label: "Separator",
|
|
221
|
+
tab: "styling",
|
|
222
|
+
group: "Design"
|
|
223
|
+
},
|
|
224
|
+
(0, _fluid_app_portal_core_registries.getPaddingField)({
|
|
225
|
+
key: "padding",
|
|
226
|
+
label: "Padding",
|
|
227
|
+
description: "Padding around the widget content",
|
|
228
|
+
defaultValue: 4,
|
|
229
|
+
tab: "styling",
|
|
230
|
+
group: "Design"
|
|
231
|
+
}),
|
|
232
|
+
(0, _fluid_app_portal_core_registries.getBorderRadiusField)({
|
|
233
|
+
key: "borderRadius",
|
|
234
|
+
label: "Border Radius",
|
|
235
|
+
description: "Border radius for the widget container",
|
|
236
|
+
defaultValue: "md",
|
|
237
|
+
tab: "styling",
|
|
238
|
+
group: "Design"
|
|
239
|
+
})
|
|
240
|
+
]
|
|
241
|
+
};
|
|
242
|
+
//#endregion
|
|
243
|
+
Object.defineProperty(exports, "QuickShareWidget", {
|
|
244
|
+
enumerable: true,
|
|
245
|
+
get: function() {
|
|
246
|
+
return QuickShareWidget;
|
|
247
|
+
}
|
|
248
|
+
});
|
|
249
|
+
Object.defineProperty(exports, "QuickShareWidget_exports", {
|
|
250
|
+
enumerable: true,
|
|
251
|
+
get: function() {
|
|
252
|
+
return QuickShareWidget_exports;
|
|
253
|
+
}
|
|
254
|
+
});
|
|
255
|
+
Object.defineProperty(exports, "quickShareWidgetPropertySchema", {
|
|
256
|
+
enumerable: true,
|
|
257
|
+
get: function() {
|
|
258
|
+
return quickShareWidgetPropertySchema;
|
|
259
|
+
}
|
|
260
|
+
});
|
|
261
|
+
|
|
262
|
+
//# sourceMappingURL=QuickShareWidget-DWvgEy74.cjs.map
|