@layers-app/shared 0.4.8 → 0.4.10

package/dist/components/FormViewer/components/fields/HeadingField.js

@@ -0,0 +1,60 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import { useTranslation as S } from "react-i18next";
+import { combineClasses as m, STATIC_CLASSES as u } from "../../helpers/staticClasses.js";
+import { useInterpolateText as z } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as E } from "../../store/formStore.js";
+import { EditableContent as b } from "./EditableContent/EditableContent.js";
+import y from "../../FormViewer.module.css.js";
+const C = 26, D = ({
+  control: t,
+  step: r,
+  theme: i
+}) => {
+  const { t: a } = S("forms"), { useStore: e, api: d } = E(), f = e((l) => l.isMobile), o = e((l) => l.editing), s = C, T = g(() => {
+    const l = t.color || i?.slideTitle?.color || "auto", c = t.fontSize ?? i?.slideTitle?.fontSize ?? s;
+    return {
+      "--color": l,
+      "--font-size": `${c}px`,
+      "--font-weight": i?.slideTitle?.fontWeight,
+      // Кавычки обязательны для имён с цифрами/пробелами (напр. "Press Start 2P").
+      "--font-family": i?.slideTitle?.fontFamily ? `"${i.slideTitle.fontFamily}"` : void 0,
+      "--title-lh": i?.slideTitle?.lineHeight,
+      "--title-ls": i?.slideTitle?.letterSpacing != null ? `${i.slideTitle.letterSpacing}px` : void 0,
+      // Регистр заголовка слайда: свой токен, иначе общий, иначе none.
+      "--title-tt": "var(--form-slide-title-transform, var(--form-title-transform, none))",
+      "--align": t.align ?? i?.slideTitle?.align ?? "start"
+    };
+  }, [
+    t.color,
+    t.fontSize,
+    t.align,
+    s,
+    i?.slideTitle?.align,
+    i?.slideTitle?.color,
+    i?.slideTitle?.fontSize,
+    i?.slideTitle?.fontWeight,
+    i?.slideTitle?.fontFamily,
+    i?.slideTitle?.lineHeight,
+    i?.slideTitle?.letterSpacing
+  ]), p = z(t.title, o);
+  return /* @__PURE__ */ n(
+    "h1",
+    {
+      className: m(y.stepTitle, u.SLIDE_TITLE),
+      style: T,
+      "data-mobile": f,
+      children: o ? /* @__PURE__ */ n(
+        b,
+        {
+          value: t.title,
+          placeholder: a("slideTitlePlaceholder"),
+          onChange: (l) => d.updateControl(r.id, t.id, { title: l })
+        }
+      ) : p
+    }
+  );
+};
+export {
+  D as HeadingField
+};

package/dist/components/FormViewer/components/fields/ImageField.d.ts

@@ -0,0 +1,7 @@
+import { ImageControl, StepData } from '../../types/form';
+/** Картинка-контрол: загрузка, ширина, выравнивание, скругление углов. */
+export declare const ImageField: ({ control, step, }: {
+    control: ImageControl;
+    step: StepData;
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ImageField.d.ts.map

package/dist/components/FormViewer/components/fields/ImageField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/ImageField.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAuB1D,0EAA0E;AAC1E,eAAO,MAAM,UAAU,GAAI,oBAGxB;IACD,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,EAAE,QAAQ,CAAC;CAChB,mDAsGA,CAAC"}

package/dist/components/FormViewer/components/fields/ImageField.js

@@ -0,0 +1,105 @@
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { useRef as C, useState as F } from "react";
+import { useTranslation as I } from "react-i18next";
+import { IconPhotoPlus as k } from "@tabler/icons-react";
+import { combineClasses as f, STATIC_CLASSES as p } from "../../helpers/staticClasses.js";
+import { getRandomId as v } from "../../helpers/steps.js";
+import { useFormViewerStore as L } from "../../store/formStore.js";
+import { FormLoader as R } from "../ui/FormLoader.js";
+const T = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+}, j = (e) => {
+  switch (e) {
+    case "50":
+      return "50%";
+    case "75":
+      return "75%";
+    case "100":
+      return "100%";
+    default:
+      return "auto";
+  }
+}, K = ({
+  control: e,
+  step: s
+}) => {
+  const { t: g } = I("forms"), { useStore: a, api: h } = L(), y = a((r) => r.editing), n = a((r) => r.uploadFileFn), o = C(null), [S, d] = F(!1), b = async (r) => {
+    const u = r?.[0];
+    if (!u || !n) return;
+    const w = {
+      id: v(),
+      file: u,
+      isError: !1,
+      isLoading: !0,
+      isSuccess: !1
+    };
+    d(!0);
+    try {
+      const c = await n(w, {
+        stepId: s.id,
+        controlId: e.id
+      });
+      c && h.updateControl(s.id, e.id, { image: c });
+    } finally {
+      d(!1);
+    }
+  }, l = {
+    display: "flex",
+    width: "100%",
+    justifyContent: T[e.align ?? "start"]
+  }, x = {
+    width: j(e.width),
+    maxWidth: "100%",
+    borderRadius: e.radius ? `${e.radius}px` : void 0,
+    display: "block"
+  }, i = e.image ? /* @__PURE__ */ t("img", { src: e.image, alt: e.alt ?? "", style: x }) : null;
+  return y ? /* @__PURE__ */ m("div", { className: f(p.BLOCK), style: l, children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        ref: o,
+        type: "file",
+        accept: "image/*",
+        hidden: !0,
+        onChange: (r) => b(r.currentTarget.files)
+      }
+    ),
+    i ?? /* @__PURE__ */ m(
+      "button",
+      {
+        type: "button",
+        onClick: () => o.current?.click(),
+        style: {
+          width: "100%",
+          minHeight: 140,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 8,
+          border: "var(--form-border-width-thin) dashed var(--form-border-color)",
+          borderRadius: e.radius ? `${e.radius}px` : 12,
+          background: "var(--form-surface-muted)",
+          color: "var(--form-color-muted)",
+          cursor: "pointer"
+        },
+        children: [
+          S ? /* @__PURE__ */ t(R, { size: "sm" }) : /* @__PURE__ */ t(k, { size: 28 }),
+          /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: g("imagePlaceholder") })
+        ]
+      }
+    )
+  ] }) : i ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: f(p.BLOCK),
+      style: l,
+      children: e.link ? /* @__PURE__ */ t("a", { href: e.link, target: "_blank", rel: "noreferrer", children: i }) : i
+    }
+  ) : null;
+};
+export {
+  K as ImageField
+};

package/dist/components/FormViewer/components/fields/LocationField.d.ts

@@ -1,5 +1,6 @@
-import { LocationControl } from '../../types/form';
-export declare const LocationField: ({ control }: {
+import { LocationControl, ThemeData } from '../../types/form';
+export declare const LocationField: ({ control, theme, }: {
     control: LocationControl;
+    theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LocationField.d.ts.map

package/dist/components/FormViewer/components/fields/LocationField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocationField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/LocationField.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,eAAO,MAAM,aAAa,GAAI,aAAa;IAAE,OAAO,EAAE,eAAe,CAAA;CAAE,4CA4BtE,CAAC"}
+{"version":3,"file":"LocationField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/LocationField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG9D,eAAO,MAAM,aAAa,GAAI,qBAG3B;IACD,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CA2BA,CAAC"}

package/dist/components/FormViewer/components/fields/LocationField.js

@@ -1,27 +1,31 @@
-import { jsx as e } from "react/jsx-runtime";
-import { TextInput as a } from "@mantine/core";
-import { ProjectIcon as s } from "../../../ProjectIcon/ProjectIcon.js";
-import { controlsDataMap as d } from "../../helpers/controls.js";
-import { DEFAULT_MAX as f, DEFAULT_MIN as l } from "../../helpers/steps.js";
-import { useSteps as u } from "../../hooks/useCreateFormContext.js";
-import { useInterpolateText as g } from "../../hooks/useInterpolateText.js";
-import { useFormViewerStore as h } from "../../store/formStore.js";
-const M = ({ control: o }) => {
-  const { form: r } = u(), { useStore: i } = h(), n = i((c) => c.editing), { id: t, placeholder: m } = o, p = g(m, n);
-  return /* @__PURE__ */ e(
-    a,
+import { jsx as c } from "react/jsx-runtime";
+import { DEFAULT_MAX as u, DEFAULT_MIN as a } from "../../helpers/steps.js";
+import { useSteps as d } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as f } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as g } from "../../store/formStore.js";
+import { FieldInput as h } from "./FieldInput.js";
+const S = ({
+  control: t,
+  theme: n
+}) => {
+  const { form: i } = d(), { useStore: p } = g(), r = p((m) => m.editing), { id: e, placeholder: s } = t, l = f(s, r), o = i.getInputProps(e);
+  return /* @__PURE__ */ c(
+    h,
     {
-      "data-control-id": t,
-      w: "100%",
-      variant: "default",
-      placeholder: p,
-      leftSection: o.icon ? /* @__PURE__ */ e(s, { icon: o.icon }) : d[o.controlType].icon,
-      minLength: l,
-      maxLength: f,
-      ...r.getInputProps(t)
+      controlId: e,
+      theme: n,
+      readOnly: r,
+      placeholder: l,
+      minLength: a,
+      maxLength: u,
+      value: o.value ?? "",
+      error: o.error,
+      onChange: o.onChange,
+      onFocus: o.onFocus,
+      onBlur: o.onBlur
     }
   );
 };
 export {
-  M as LocationField
+  S as LocationField
 };

package/dist/components/FormViewer/components/fields/LongTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LongTextField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/LongTextField.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,eAAO,MAAM,aAAa,GAAI,aAAa;IAAE,OAAO,EAAE,eAAe,CAAA;CAAE,4CAoDtE,CAAC"}
+{"version":3,"file":"LongTextField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/LongTextField.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAOnD,eAAO,MAAM,aAAa,GAAI,aAAa;IAAE,OAAO,EAAE,eAAe,CAAA;CAAE,4CA6EtE,CAAC"}

package/dist/components/FormViewer/components/fields/LongTextField.js

@@ -1,48 +1,67 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Textarea as d } from "@mantine/core";
-import { ProjectIcon as g } from "../../../ProjectIcon/ProjectIcon.js";
-import { controlsDataMap as T } from "../../helpers/controls.js";
-import { STATIC_CLASSES as x } from "../../helpers/staticClasses.js";
-import { DEFAULT_MAX as u, DEFAULT_MIN as L } from "../../helpers/steps.js";
-import { useSteps as S } from "../../hooks/useCreateFormContext.js";
-import { useInterpolateText as h } from "../../hooks/useInterpolateText.js";
-import { useFormViewerStore as A } from "../../store/formStore.js";
-const v = ({ control: o }) => {
-  const { form: a } = S(), { useStore: s } = A(), i = s((t) => t.editing), { id: n, minLength: p, maxLength: l, placeholder: c } = o;
-  let e = p ?? L, r = l ?? u;
-  if (e > r) {
-    const t = e;
-    e = r, r = t;
+import { jsxs as y, jsx as i } from "react/jsx-runtime";
+import { useRef as C, useCallback as T, useLayoutEffect as v } from "react";
+import { combineClasses as d, STATIC_CLASSES as u } from "../../helpers/staticClasses.js";
+import { DEFAULT_MAX as E, DEFAULT_MIN as I } from "../../helpers/steps.js";
+import { useSteps as M } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as N } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as R } from "../../store/formStore.js";
+import s from "./fieldStyles.module.css.js";
+const _ = 3, O = 12, j = ({ control: h }) => {
+  const { form: o } = M(), { useStore: f } = R(), c = f((e) => e.editing), { id: t, minLength: g, maxLength: x, placeholder: L } = h;
+  let r = g ?? I, n = x ?? E;
+  if (r > n) {
+    const e = r;
+    r = n, n = e;
   }
-  const f = h(c, i);
-  return /* @__PURE__ */ m(
-    d,
-    {
-      "data-control-id": n,
-      className: x.BLOCK_TEXTAREA,
-      w: "100%",
-      variant: "default",
-      autosize: !0,
-      minRows: 3,
-      maxRows: 12,
-      leftSection: o.icon ? /* @__PURE__ */ m(g, { icon: o.icon }) : T[o.controlType].icon,
-      minLength: e,
-      maxLength: r,
-      styles: {
-        section: {
-          alignItems: "flex-start",
-          marginTop: "0.35rem"
-        }
-      },
-      placeholder: f,
-      readOnly: i,
-      onKeyDown: (t) => {
-        t.key === "Enter" && t.stopPropagation();
-      },
-      ...a.getInputProps(n)
-    }
-  );
+  const A = N(L, c), m = C(null), a = T(() => {
+    const e = m.current;
+    if (!e) return;
+    e.style.height = "auto";
+    const p = (parseFloat(getComputedStyle(e).lineHeight) || 20) * O, S = Math.min(e.scrollHeight, p);
+    e.style.height = `${S}px`, e.style.overflowY = e.scrollHeight > p ? "auto" : "hidden";
+  }, []), l = o.getInputProps(t);
+  return v(() => {
+    a();
+  }, [a, l.value]), /* @__PURE__ */ y("div", { className: s.field, "data-control-id": t, children: [
+    /* @__PURE__ */ i(
+      "label",
+      {
+        className: d(
+          s.textareaWrap,
+          u.BLOCK_TEXTAREA
+        ),
+        "data-error": !!o.errors[t],
+        children: /* @__PURE__ */ i(
+          "textarea",
+          {
+            ref: m,
+            className: s.textareaControl,
+            rows: _,
+            minLength: r,
+            maxLength: n,
+            placeholder: A,
+            readOnly: c,
+            value: l.value ?? "",
+            onChange: (e) => {
+              l.onChange(e), a();
+            },
+            onBlur: l.onBlur,
+            onKeyDown: (e) => {
+              e.key === "Enter" && e.stopPropagation();
+            }
+          }
+        )
+      }
+    ),
+    o.errors[t] ? /* @__PURE__ */ i(
+      "div",
+      {
+        className: d(s.error, u.VALIDATION_ERROR),
+        children: o.errors[t]
+      }
+    ) : null
+  ] });
 };
 export {
-  v as LongTextField
+  j as LongTextField
 };

package/dist/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceCard.d.ts

@@ -1,7 +1,6 @@
 import { MultipleChoiceControlItem, ThemeData } from '../../../types/form';
 export type OptionCardProps = {
     label: string;
-    showInput?: boolean;
     maxOptions?: number;
     id: string;
     onUpdate?: (v: Partial<MultipleChoiceControlItem>) => void;
@@ -9,5 +8,5 @@ export type OptionCardProps = {
     controlId: string;
     theme?: ThemeData;
 };
-export declare const MultipleChoiceCard: import("react").MemoExoticComponent<({ label, showInput, maxOptions, onUpdate, onRemove, controlId, id, theme, }: OptionCardProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const MultipleChoiceCard: import("react").MemoExoticComponent<({ label, maxOptions, onUpdate, onRemove, controlId, id, theme, }: OptionCardProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=MultipleChoiceCard.d.ts.map

package/dist/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultipleChoiceCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceCard.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAG3E,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oHAU1B,eAAe,6CAmCnB,CAAC"}
+{"version":3,"file":"MultipleChoiceCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceCard.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAG3E,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,yGAS1B,eAAe,6CAkCnB,CAAC"}

package/dist/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceCard.js

@@ -1,38 +1,36 @@
-import { jsx as C } from "react/jsx-runtime";
-import { memo as h, useCallback as d } from "react";
-import { isNumber as n } from "lodash-es";
-import { useSteps as k } from "../../../hooks/useCreateFormContext.js";
-import { SelectableCard as v } from "../SelectableCard/SelectableCard.js";
-const y = h(
+import { jsx as b } from "react/jsx-runtime";
+import { memo as C, useCallback as d } from "react";
+import { isNumber as c } from "lodash-es";
+import { useSteps as h } from "../../../hooks/useCreateFormContext.js";
+import { SelectableCard as k } from "../SelectableCard/SelectableCard.js";
+const j = C(
   ({
-    label: c,
-    showInput: a,
+    label: n,
     maxOptions: l,
-    onUpdate: u,
+    onUpdate: a,
     onRemove: f,
     controlId: e,
     id: t,
-    theme: p
+    theme: u
   }) => {
-    const { form: i } = k(), s = i.values[e], r = s?.indexOf(t), o = s?.includes(t), m = !!(n(l) && !o && s && s.length >= l), b = d(() => {
-      m || !n(r) || (o ? i.removeListItem(e, r) : i.insertListItem(e, t));
+    const { form: i } = h(), s = i.values[e], r = s?.indexOf(t), o = s?.includes(t), m = !!(c(l) && !o && s && s.length >= l), p = d(() => {
+      m || !c(r) || (o ? i.removeListItem(e, r) : i.insertListItem(e, t));
     }, [e, i, r, o, m, t]);
-    return /* @__PURE__ */ C(
-      v,
+    return /* @__PURE__ */ b(
+      k,
       {
-        theme: p,
-        label: c,
-        hasInput: a,
+        theme: u,
+        label: n,
         inputType: "checkbox",
         active: o,
         disabled: m,
-        onClick: b,
-        onUpdate: u,
+        onClick: p,
+        onUpdate: a,
         onRemove: f
       }
     );
   }
 );
 export {
-  y as MultipleChoiceCard
+  j as MultipleChoiceCard
 };

package/dist/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultipleChoiceField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceField.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,qBAAqB,EACrB,QAAQ,EACR,SAAS,EACV,MAAM,qBAAqB,CAAC;AAK7B,eAAO,MAAM,mBAAmB,GAAI,2BAIjC;IACD,OAAO,EAAE,qBAAqB,CAAC;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CA+KA,CAAC"}
+{"version":3,"file":"MultipleChoiceField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceField.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,qBAAqB,EACrB,QAAQ,EACR,SAAS,EACV,MAAM,qBAAqB,CAAC;AAQ7B,eAAO,MAAM,mBAAmB,GAAI,2BAIjC;IACD,OAAO,EAAE,qBAAqB,CAAC;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAuLA,CAAC"}