preview.astro.mjs 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. globalThis.process ??= {}; globalThis.process.env ??= {};
  2. import { e as createComponent$1, k as renderComponent, r as renderTemplate } from '../../chunks/astro/server_WO3f6Mge.mjs';
  3. import { $ as $$Layout } from '../../chunks/Layout_eV-qEGCG.mjs';
  4. import { c as createMemo, s as ssr, e as escape, a as createComponent, b as ssrHydrationKey, d as ssrStyleProperty, f as createSignal, S as Show, D as Dynamic, F as For } from '../../chunks/_@astro-renderers_DpxbEuk7.mjs';
  5. export { r as renderers } from '../../chunks/_@astro-renderers_DpxbEuk7.mjs';
  6. import { g as getGrid, W as WidgetRenderer } from '../../chunks/registry_B7C18axh.mjs';
  7. var _tmpl$ = ["<div", ' style="', '"><h2>Error</h2><p>', "</p></div>"], _tmpl$2 = ["<div", ' data-grid-container style="', '"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"], _tmpl$3 = ["<div", ' style="', '"><p>No widgets to display</p></div>'], _tmpl$4 = ["<div", ' style="', '"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
  8. function Preview() {
  9. const [widgets] = createSignal([]);
  10. const [gridConfig] = createSignal({
  11. templateId: null,
  12. widgetPlacements: []
  13. });
  14. const [error] = createSignal("");
  15. const scale = createMemo(() => {
  16. const grid = gridConfig().templateId ? getGrid(gridConfig().templateId) : null;
  17. if (!grid) return 1;
  18. const gridWidth = grid.template?.width || 800;
  19. const gridHeight = grid.template?.height || 600;
  20. const viewportWidth = window.innerWidth - 40;
  21. const viewportHeight = window.innerHeight - 40;
  22. const scaleX = viewportWidth / gridWidth;
  23. const scaleY = viewportHeight / gridHeight;
  24. return Math.min(scaleX, scaleY) * 0.98;
  25. });
  26. return ssr(_tmpl$4, ssrHydrationKey(), ssrStyleProperty("width:", "100vw") + ssrStyleProperty(";height:", "100vh") + ssrStyleProperty(";position:", "fixed") + ssrStyleProperty(";top:", "0") + ssrStyleProperty(";left:", "0") + ssrStyleProperty(";background:", "var(--bg, #fff)") + ssrStyleProperty(";overflow:", "hidden") + ssrStyleProperty(";display:", "flex") + ssrStyleProperty(";align-items:", "center") + ssrStyleProperty(";justify-content:", "center") + ssrStyleProperty(";padding:", "20px") + ssrStyleProperty(";box-sizing:", "border-box"), escape(createComponent(Show, {
  27. get when() {
  28. return error();
  29. },
  30. get children() {
  31. return ssr(_tmpl$, ssrHydrationKey(), ssrStyleProperty("padding:", "2rem") + ssrStyleProperty(";text-align:", "center") + ssrStyleProperty(";color:", "var(--gray)"), escape(error()));
  32. }
  33. })), escape(createComponent(Show, {
  34. get when() {
  35. return !error() && widgets().length > 0;
  36. },
  37. get children() {
  38. return ssr(_tmpl$2, ssrHydrationKey(), ssrStyleProperty("width:", gridConfig().templateId ? `${escape(getGrid(gridConfig().templateId)?.template.width, true) || 800}px` : "100%") + ssrStyleProperty(";height:", gridConfig().templateId ? `${escape(getGrid(gridConfig().templateId)?.template.height, true) || 600}px` : "100%") + ssrStyleProperty(";position:", "relative") + ssrStyleProperty(";transform:", `scale(${escape(scale(), true)})`) + ssrStyleProperty(";transform-origin:", "center center") + ssrStyleProperty(";flex-shrink:", "0"), escape(createComponent(Show, {
  39. get when() {
  40. return gridConfig().templateId;
  41. },
  42. children: () => {
  43. const grid = getGrid(gridConfig().templateId);
  44. return grid ? createComponent(Dynamic, {
  45. get component() {
  46. return grid.Component;
  47. }
  48. }) : null;
  49. }
  50. })), escape(createComponent(For, {
  51. get each() {
  52. return widgets();
  53. },
  54. children: (widget) => createComponent(WidgetRenderer, {
  55. config: widget,
  56. locked: true
  57. })
  58. })));
  59. }
  60. })), escape(createComponent(Show, {
  61. get when() {
  62. return !error() && widgets().length === 0;
  63. },
  64. get children() {
  65. return ssr(_tmpl$3, ssrHydrationKey(), ssrStyleProperty("padding:", "2rem") + ssrStyleProperty(";text-align:", "center") + ssrStyleProperty(";color:", "var(--gray)"));
  66. }
  67. })));
  68. }
  69. const $$Preview = createComponent$1(($$result, $$props, $$slots) => {
  70. return renderTemplate`${renderComponent($$result, "Layout", $$Layout, { "title": "Dashboard Preview" }, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Preview", Preview, { "client:load": true, "client:component-hydration": "load", "client:component-path": "/home/fc/Projects/glance/src/components/Preview", "client:component-export": "Preview" })} ` })}`;
  71. }, "/home/fc/Projects/glance/src/pages/app/preview.astro", void 0);
  72. const $$file = "/home/fc/Projects/glance/src/pages/app/preview.astro";
  73. const $$url = "/app/preview";
  74. const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
  75. __proto__: null,
  76. default: $$Preview,
  77. file: $$file,
  78. url: $$url
  79. }, Symbol.toStringTag, { value: 'Module' }));
  80. const page = () => _page;
  81. export { page };