@layers-app/shared 0.4.9 → 0.4.10

package/dist/components/FormViewer/components/NavControls.js

@@ -1,58 +1,78 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useCallback as a } from "react";
-import { useTranslation as d } from "react-i18next";
-import { Flex as S, Button as h } from "@mantine/core";
-import { useMediaQuery as C, useWindowEvent as g } from "@mantine/hooks";
-import { IconCornerDownLeft as w } from "@tabler/icons-react";
-import { STATIC_CLASSES as b } from "../helpers/staticClasses.js";
-import { useSteps as E } from "../hooks/useCreateFormContext.js";
-import { useInterpolateText as x } from "../hooks/useInterpolateText.js";
-import { useFormViewerStore as c } from "../store/formStore.js";
-import { EditableContent as T } from "./fields/EditableContent/EditableContent.js";
-const F = ({ data: e }) => {
-  const { t: n } = d("forms"), { handleNext: i } = E(), { api: l } = c(), s = C("(max-width: 992px)"), { useStore: m } = c(), r = m((o) => o.editing), p = m((o) => o.config.settings), f = a(
+import { jsxs as W, jsx as l } from "react/jsx-runtime";
+import { useCallback as T } from "react";
+import { useTranslation as B } from "react-i18next";
+import { useMediaQuery as j, useWindowEvent as F } from "@mantine/hooks";
+import { STATIC_CLASSES as I } from "../helpers/staticClasses.js";
+import { alignRelation as d } from "../helpers/themeUtils.js";
+import { useSteps as N } from "../hooks/useCreateFormContext.js";
+import { useInterpolateText as h } from "../hooks/useInterpolateText.js";
+import { useFormViewerStore as v } from "../store/formStore.js";
+import { FormButton as w } from "./ui/FormButton.js";
+import { EditableContent as S } from "./fields/EditableContent/EditableContent.js";
+const z = ({ data: t }) => {
+  const { t: n } = B("forms"), { handleNext: s, handlePrev: k } = N(), { api: m } = v(), a = j("(max-width: 992px)"), { useStore: y } = v(), e = y((o) => o.editing), x = T(
     (o) => {
-      r || e.isEnd || s || o.code !== "Enter" || i();
+      e || t.isEnd || a || o.code !== "Enter" || s();
     },
-    [e.isEnd, r, i, s]
+    [t.isEnd, e, s, a]
   );
-  g("keydown", f);
-  const u = x(
-    e.confirmLabel,
-    r
-  );
-  return e.isStart || e.isEnd ? null : /* @__PURE__ */ t(
-    S,
-    {
-      justify: "var(--align)",
-      gap: 8,
-      wrap: "wrap",
-      direction: e.theme?.align === "start" ? "row" : "row-reverse",
-      children: /* @__PURE__ */ t(
-        h,
-        {
-          color: e.theme?.primaryColor,
-          size: e.theme?.size,
-          radius: e.theme?.borderRadius,
-          className: b.SUBMIT_BUTTON,
-          onClick: r ? void 0 : i,
-          leftSection: p.enterIndicator && /* @__PURE__ */ t(w, { size: "1em" }),
-          children: r ? /* @__PURE__ */ t(
-            T,
-            {
-              value: e.confirmLabel?.trim() || n("continue"),
-              onChange: (o) => {
-                l.updateStep(e.id, {
-                  confirmLabel: o
-                });
-              }
+  F("keydown", x);
+  const C = h(
+    t.confirmLabel,
+    e
+  ), g = h(t.backLabel, e);
+  if (t.isStart || t.isEnd)
+    return null;
+  const u = !!t.theme?.buttonFullWidth, i = t.theme?.buttonAlign ?? "start", f = !!t.theme?.buttonShowBack, r = t.theme?.buttonLayout === "vertical", c = u && !r && f, p = u && !c, b = c ? { flex: 1, minWidth: 0 } : void 0, L = r ? void 0 : i === "between" ? "space-between" : d[i], E = r ? d[i === "between" ? "start" : i] : void 0;
+  return /* @__PURE__ */ W("div", { style: {
+    display: "flex",
+    width: "100%",
+    flexDirection: r ? "column" : "row",
+    justifyContent: L,
+    alignItems: E,
+    gap: "var(--form-button-gap)",
+    flexWrap: c ? "nowrap" : "wrap"
+  }, children: [
+    f && /* @__PURE__ */ l(
+      w,
+      {
+        variant: "default",
+        fullWidth: p,
+        style: b,
+        onClick: e ? void 0 : k,
+        children: e ? /* @__PURE__ */ l(
+          S,
+          {
+            value: t.backLabel?.trim() || n("back"),
+            onChange: (o) => {
+              m.updateStep(t.id, { backLabel: o });
             }
-          ) : u || n("continue")
-        }
-      )
-    }
-  );
+          }
+        ) : g || n("back")
+      }
+    ),
+    /* @__PURE__ */ l(
+      w,
+      {
+        fullWidth: p,
+        style: b,
+        className: I.SUBMIT_BUTTON,
+        onClick: e ? void 0 : s,
+        children: e ? /* @__PURE__ */ l(
+          S,
+          {
+            value: t.confirmLabel?.trim() || n("continue"),
+            onChange: (o) => {
+              m.updateStep(t.id, {
+                confirmLabel: o
+              });
+            }
+          }
+        ) : C || n("continue")
+      }
+    )
+  ] });
 };
 export {
-  F as NavControls
+  z as NavControls
 };

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

@@ -1 +1 @@
-{"version":3,"file":"OneSlideLayput.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/OneSlideLayput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAQ,MAAM,OAAO,CAAC;AAiBhD,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,4BAG5B,mBAAmB,4CAqBrB,CAAC"}
+{"version":3,"file":"OneSlideLayput.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/OneSlideLayput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAQ,MAAM,OAAO,CAAC;AAchD,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAaF,eAAO,MAAM,cAAc,GAAI,4BAG5B,mBAAmB,4CAcrB,CAAC"}

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"}