@layers-app/shared 0.4.8 → 0.4.10

package/dist/components/FormViewer/components/OneSlideLayput.js

@@ -1,135 +1,155 @@
-import { jsx as e, jsxs as s, Fragment as p } from "react/jsx-runtime";
-import { memo as h } from "react";
-import { createPortal as u } from "react-dom";
-import { Stack as b, Flex as y } from "@mantine/core";
-import { AnimatePresence as v, motion as k } from "framer-motion";
-import { Copyright as S } from "../../Copyright/index.js";
-import { animations as w } from "../helpers/slides.js";
-import { useFormViewerStore as d } from "../store/formStore.js";
-import { startStepReselect as x, themeReselect as F } from "../store/selectors.js";
-import { Navigation as $ } from "./Navigation/Navigation.js";
-import { getImageFilter as R, Step as j } from "./Step.js";
-import { ProgressLine as A } from "./fields/ProgressLine.js";
-import g from "../FormViewer.module.css.js";
-import { useSteps as C } from "../hooks/useCreateFormContext.js";
-import { useFormMobile as M } from "../hooks/useFormMobile.js";
-import { useActiveStep as N } from "../hooks/useActiveStep.js";
-const U = ({
-  NoStepSlot: m,
-  copyright: l
+import { jsx as t, jsxs as p, Fragment as f } from "react/jsx-runtime";
+import { memo as u } from "react";
+import { createPortal as b } from "react-dom";
+import { AnimatePresence as v, motion as x } from "framer-motion";
+import { useFormViewerStore as h } from "../store/formStore.js";
+import { startStepReselect as w, themeReselect as F } from "../store/selectors.js";
+import { FormCopyright as S } from "./FormCopyright.js";
+import { getImageFilter as $, Step as k } from "./Step.js";
+import { ProgressLine as B } from "./fields/ProgressLine.js";
+import c from "../FormViewer.module.css.js";
+import { useFormMobile as j } from "../hooks/useFormMobile.js";
+import { useActiveStep as C } from "../hooks/useActiveStep.js";
+const P = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 4,
+  width: "100%",
+  height: "100%",
+  padding: 16
+}, q = ({
+  NoStepSlot: r,
+  copyright: n
 }) => {
-  const { useStore: a } = d();
-  return a(x) ? /* @__PURE__ */ e(P, { copyright: l }) : /* @__PURE__ */ e(
-    b,
-    {
-      align: "center",
-      justify: "center",
-      gap: 4,
-      w: "100%",
-      h: "100%",
-      p: 16,
-      children: /* @__PURE__ */ e(m, {})
-    }
-  );
-}, P = h(({ copyright: m }) => {
-  const { anim: l } = C(), { ref: a, isMobile: o } = M(), { useStore: c } = d(), r = c((n) => n.config.settings), f = c((n) => n.editing), t = c(F), i = N();
-  return /* @__PURE__ */ s(p, { children: [
-    u(
-      /* @__PURE__ */ s(p, { children: [
-        /* @__PURE__ */ e(
+  const { useStore: l } = h();
+  return l(w) ? /* @__PURE__ */ t(R, { copyright: n }) : /* @__PURE__ */ t("div", { style: P, children: /* @__PURE__ */ t(r, {}) });
+}, R = u(({ copyright: r }) => {
+  const { ref: n, isMobile: l } = j(), { useStore: s } = h(), g = s((m) => m.config.settings), d = s((m) => m.editing), i = s(F), o = C(), e = i?.background, a = e?.bgType ?? (e?.video ? "video" : e?.image ? "image" : "color"), y = a === "image" && !!e?.image || a === "video" && !!e?.video;
+  return /* @__PURE__ */ p(f, { children: [
+    b(
+      /* @__PURE__ */ p(f, { children: [
+        /* @__PURE__ */ t(
           "link",
           {
             rel: "stylesheet",
-            href: `https://fonts.googleapis.com/css2?family=${t.title?.fontFamily || "Roboto"}:wght@${t.title?.fontWeight || 400}&display=swap`
+            href: `https://fonts.googleapis.com/css2?family=${i.title?.fontFamily || "Roboto"}:wght@${i.title?.fontWeight || 400}&display=swap`
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           "link",
           {
             rel: "stylesheet",
-            href: `https://fonts.googleapis.com/css2?family=${t.description?.fontFamily || "Roboto"}:wght@${t.description?.fontWeight || 400}&display=swap`
+            href: `https://fonts.googleapis.com/css2?family=${i.font?.fontFamily || "Roboto"}:wght@${i.font?.fontWeight || 400}&display=swap`
           }
         ),
-        /* @__PURE__ */ e(
+        i.slideTitle?.fontFamily && /* @__PURE__ */ t(
           "link",
           {
             rel: "stylesheet",
-            href: `https://fonts.googleapis.com/css2?family=${t.font?.fontFamily || "Roboto"}:wght@${t.font?.fontWeight || 400}&display=swap`
+            href: `https://fonts.googleapis.com/css2?family=${i.slideTitle.fontFamily}:wght@400;500;600;700&display=swap`
+          }
+        ),
+        i.input?.fontFamily && /* @__PURE__ */ t(
+          "link",
+          {
+            rel: "stylesheet",
+            href: `https://fonts.googleapis.com/css2?family=${i.input.fontFamily}:wght@400;500;600;700&display=swap`
           }
         )
       ] }),
       document.head
     ),
-    /* @__PURE__ */ s("div", { ref: a, className: g.root, children: [
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: g.background,
-          style: {
-            "--bg-blend": t.background?.blendMode,
-            "--bg-fit": t.background?.fit || "cover",
-            "--bg-image": t.background?.image ? `url(${t.background.image})` : "none",
-            "--bg-color": t.background?.color || "none",
-            "--bg-image-filter": R({
-              brightness: t.background?.brightness || 100,
-              blur: t.background?.blur,
-              layout: "background"
-            })
-          }
-        }
-      ),
-      /* @__PURE__ */ e(v, { mode: "wait", children: i && /* @__PURE__ */ e(
-        k.div,
-        {
-          style: {
-            height: "100%",
-            width: "100%",
-            display: "flex",
-            flexDirection: "column",
-            minHeight: 0
-          },
-          transition: {
-            duration: 0.25
-          },
-          ...w[r.slideAnimation][l],
-          animate: { opacity: 1, y: 0, x: 0 },
-          children: /* @__PURE__ */ e(
-            j,
-            {
-              step: i,
-              theme: i.theme
-            },
-            i.id
-          )
-        },
-        i.id
-      ) })
-    ] }),
-    /* @__PURE__ */ s(
-      y,
+    /* @__PURE__ */ p(
+      "div",
       {
-        pos: o ? "relative" : "absolute",
-        bottom: o ? void 0 : 24,
-        right: o ? void 0 : 24,
-        justify: o ? "flex-end" : void 0,
-        p: o ? "8px 12px" : void 0,
-        onClick: f ? (n) => n.preventDefault() : void 0,
+        ref: n,
+        className: c.root,
+        style: {
+          // Цвет фона используется и под картинкой: если картинка прижата к
+          // верху (fit `100% auto` + position `top`), низ заполняется цветом.
+          "--bg-color": e?.color || "transparent",
+          "--bg-opacityHex": `${(e?.opacity ?? 1) * 100}%`
+        },
         children: [
-          r.copyright && /* @__PURE__ */ e(
-            S,
+          /* @__PURE__ */ t(
+            "div",
             {
-              size: "sm",
-              color: i?.theme?.primaryColor,
-              title: m
+              className: c.background,
+              style: {
+                "--bg-blend": e?.blendMode,
+                "--bg-fit": e?.fit || "cover",
+                "--bg-position": e?.position || "center",
+                "--bg-image": y && e?.image ? `url(${e.image})` : "none",
+                "--bg-image-filter": $({
+                  brightness: e?.brightness ?? 100,
+                  blur: e?.blur
+                })
+              },
+              children: a === "video" && e?.video && /* @__PURE__ */ t(
+                "video",
+                {
+                  className: c.slideBgVideo,
+                  src: e.video,
+                  autoPlay: !0,
+                  loop: !0,
+                  muted: !0,
+                  playsInline: !0
+                }
+              )
             }
           ),
-          r.navArrows && r.layout === "slides" && /* @__PURE__ */ e($, {})
+          /* @__PURE__ */ t(v, { mode: "wait", children: o && /* @__PURE__ */ t(
+            x.div,
+            {
+              style: {
+                height: "100%",
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                minHeight: 0
+              },
+              transition: {
+                duration: 0.25
+              },
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              children: /* @__PURE__ */ t(
+                k,
+                {
+                  step: o,
+                  theme: o.theme
+                },
+                o.id
+              )
+            },
+            o.id
+          ) })
         ]
       }
     ),
-    r.progressBar && /* @__PURE__ */ e(A, {})
+    !d && /* @__PURE__ */ t(
+      "div",
+      {
+        style: l ? {
+          display: "flex",
+          position: "relative",
+          justifyContent: "flex-end",
+          padding: "8px 12px"
+        } : {
+          display: "flex",
+          position: "absolute",
+          bottom: 24,
+          right: 24
+        },
+        children: g.copyright && /* @__PURE__ */ t(S, { title: r })
+      }
+    ),
+    !d && g.progressBar && /* @__PURE__ */ t(B, {})
   ] });
 });
 export {
-  U as OneSlideLayout
+  q as OneSlideLayout
 };

package/dist/components/FormViewer/components/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/Step.tsx"],"names":[],"mappings":"AAeA,OAAO,EAGL,SAAS,EAET,QAAQ,EACR,SAAS,EACV,MAAM,eAAe,CAAC;AA2BvB,eAAO,MAAM,cAAc,GAAI,GAAG,SAAS,GAAG,IAAI,GAAG,SAAS,WAI7D,CAAC;AAiDF,eAAO,MAAM,IAAI,wDACG;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,6CAkLxD,CAAC"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/Step.tsx"],"names":[],"mappings":"AAmCA,OAAO,EAGL,SAAS,EAET,QAAQ,EACR,SAAS,EACV,MAAM,eAAe,CAAC;AA0CvB,eAAO,MAAM,cAAc,GAAI,GAAG,SAAS,GAAG,IAAI,GAAG,SAAS,WAI7D,CAAC;AA8CF,eAAO,MAAM,IAAI,wDACG;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,6CAybxD,CAAC"}