@layers-app/shared 0.4.9 → 0.4.10

package/dist/components/FormViewer/components/editor/ContentSettingsBars.js

@@ -0,0 +1,391 @@
+import { jsx as e, jsxs as u, Fragment as g } from "react/jsx-runtime";
+import { useRef as I, useState as A } from "react";
+import { useTranslation as b } from "react-i18next";
+import { IconPhotoUp as O, IconChevronDown as M, IconCopy as E, IconTrash as L } from "@tabler/icons-react";
+import { FormColorPicker as R } from "../../../FormColorPicker/FormColorPicker.js";
+import { useRenderedColor as $ } from "../../../FormColorPicker/useRenderedColor.js";
+import { getRandomId as N } from "../../helpers/steps.js";
+import { useFormViewerStore as y } from "../../store/formStore.js";
+import { controlsReselect as x, stepByControlReselect as P } from "../../store/selectors.js";
+import { FormInput as j } from "../ui/FormInput.js";
+import { FormMenu as h } from "../ui/FormMenu.js";
+import { AlignMenu as B } from "./AlignMenu.js";
+import { ColorSwatchTarget as K } from "./ColorSwatchTarget.js";
+import { fieldElementKey as U } from "./keys.js";
+import d from "./SelectableBlock.module.css.js";
+const m = ({
+  label: i,
+  value: n,
+  options: r,
+  onSelect: l,
+  opened: a,
+  onChange: s
+}) => {
+  const o = r.find((c) => c.value === n);
+  return /* @__PURE__ */ u(h, { opened: a, onChange: s, position: "bottom", width: 150, children: [
+    /* @__PURE__ */ e(h.Target, { children: /* @__PURE__ */ u("button", { type: "button", className: d.barBtn, "aria-label": i, children: [
+      /* @__PURE__ */ e("span", { className: d.barBtnLabel, children: i }),
+      o ? o.label : "",
+      /* @__PURE__ */ e(M, { size: 14 })
+    ] }) }),
+    /* @__PURE__ */ e(h.Dropdown, { children: r.map((c) => /* @__PURE__ */ e(
+      h.Item,
+      {
+        active: c.value === n,
+        onClick: () => l(c.value),
+        children: c.label
+      },
+      c.value
+    )) })
+  ] });
+}, T = ({
+  label: i,
+  value: n,
+  placeholder: r,
+  onApply: l,
+  opened: a,
+  onChange: s
+}) => /* @__PURE__ */ u(h, { opened: a, onChange: s, position: "bottom", width: 240, children: [
+  /* @__PURE__ */ e(h.Target, { children: /* @__PURE__ */ u("button", { type: "button", className: d.barBtn, children: [
+    i,
+    /* @__PURE__ */ e(M, { size: 14 })
+  ] }) }),
+  /* @__PURE__ */ e(h.Dropdown, { p: 12, children: /* @__PURE__ */ e(
+    j,
+    {
+      value: n ?? "",
+      placeholder: r,
+      onChange: (o) => l(o.currentTarget.value)
+    }
+  ) })
+] }), w = ({
+  color: i,
+  blockEl: n,
+  onChange: r,
+  opened: l,
+  onOpenedChange: a
+}) => {
+  const { t: s } = b("forms"), o = $(n ?? null, "color");
+  return /* @__PURE__ */ u(h, { opened: l, onChange: a, position: "bottom", children: [
+    /* @__PURE__ */ e(h.Target, { children: /* @__PURE__ */ e(
+      K,
+      {
+        color: i ?? o,
+        "aria-label": s("color")
+      }
+    ) }),
+    /* @__PURE__ */ e(h.Dropdown, { p: 0, children: /* @__PURE__ */ e(
+      R,
+      {
+        value: i,
+        fallback: o,
+        onChangeEnd: r
+      }
+    ) })
+  ] });
+}, f = ({
+  control: i,
+  stepId: n
+}) => {
+  const { t: r } = b("forms"), { api: l } = y(), a = () => {
+    const o = { ...i, id: N() };
+    l.addControl(n, o, i.id), l.setEditorSelection({
+      type: "element",
+      stepId: n,
+      elementKey: U(o.id)
+    });
+  }, s = () => {
+    l.removeControl(n, i.id), l.clearEditorSelection();
+  };
+  return /* @__PURE__ */ u(g, { children: [
+    /* @__PURE__ */ e("span", { className: d.barDivider }),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: d.barBtn,
+        "aria-label": r("duplicate"),
+        onClick: a,
+        children: /* @__PURE__ */ e(E, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: `${d.barBtn} ${d.barBtnDanger}`,
+        "aria-label": r("delete"),
+        onClick: s,
+        children: /* @__PURE__ */ e(L, { size: 16 })
+      }
+    )
+  ] });
+}, C = (i) => {
+  const { useStore: n, api: r } = y(), l = n(x), a = n(P), s = l.find((p) => p.id === i), o = a[i], [c, t] = A(null);
+  return { control: s, step: o, openMenu: c, toggle: (p) => (v) => t(v ? p : null), update: (p) => {
+    o && r.updateControl(o.id, i, p);
+  } };
+}, D = (i) => i ?? "start", V = ({
+  controlId: i,
+  blockEl: n
+}) => {
+  const { t: r } = b("forms"), { control: l, step: a, openMenu: s, toggle: o, update: c } = C(i);
+  return !l || a == null || l.controlType !== "heading" ? null : /* @__PURE__ */ u(g, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        label: r("size"),
+        value: l.fontSize ?? 26,
+        options: [20, 24, 26, 32, 40].map((t) => ({ value: t, label: `${t}` })),
+        onSelect: (t) => c({ fontSize: t }),
+        opened: s === "size",
+        onChange: o("size")
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: d.barDivider }),
+    /* @__PURE__ */ e(
+      B,
+      {
+        value: D(l.align),
+        onSelect: (t) => c({ align: t }),
+        opened: s === "align",
+        onOpenedChange: o("align")
+      }
+    ),
+    /* @__PURE__ */ e(
+      w,
+      {
+        color: l.color,
+        blockEl: n,
+        onChange: (t) => c({ color: t }),
+        opened: s === "color",
+        onOpenedChange: o("color")
+      }
+    ),
+    /* @__PURE__ */ e(f, { control: l, stepId: a.id })
+  ] });
+}, G = ({
+  controlId: i,
+  blockEl: n
+}) => {
+  const { t: r } = b("forms"), { control: l, step: a, openMenu: s, toggle: o, update: c } = C(i);
+  return !l || a == null || l.controlType !== "paragraph" ? null : /* @__PURE__ */ u(g, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        label: r("size"),
+        value: l.fontSize ?? 16,
+        options: [14, 16, 18, 20].map((t) => ({ value: t, label: `${t}` })),
+        onSelect: (t) => c({ fontSize: t }),
+        opened: s === "size",
+        onChange: o("size")
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: d.barDivider }),
+    /* @__PURE__ */ e(
+      B,
+      {
+        value: D(l.align),
+        onSelect: (t) => c({ align: t }),
+        opened: s === "align",
+        onOpenedChange: o("align")
+      }
+    ),
+    /* @__PURE__ */ e(
+      w,
+      {
+        color: l.color,
+        blockEl: n,
+        onChange: (t) => c({ color: t }),
+        opened: s === "color",
+        onOpenedChange: o("color")
+      }
+    ),
+    /* @__PURE__ */ e(f, { control: l, stepId: a.id })
+  ] });
+}, H = ({ controlId: i }) => {
+  const { t: n } = b("forms"), { useStore: r } = y(), l = r((p) => p.uploadFileFn), { control: a, step: s, openMenu: o, toggle: c, update: t } = C(i), S = I(null);
+  if (!a || s == null || a.controlType !== "image") return null;
+  const k = async (p) => {
+    const v = p?.[0];
+    if (!v || !l) return;
+    const F = {
+      id: N(),
+      file: v,
+      isError: !1,
+      isLoading: !0,
+      isSuccess: !1
+    }, z = await l(F, {
+      stepId: s.id,
+      controlId: a.id
+    });
+    z && t({ image: z });
+  };
+  return /* @__PURE__ */ u(g, { children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        ref: S,
+        type: "file",
+        accept: "image/*",
+        hidden: !0,
+        onChange: (p) => k(p.currentTarget.files)
+      }
+    ),
+    /* @__PURE__ */ e(
+      m,
+      {
+        label: n("contentBar.width"),
+        value: a.width ?? "100",
+        options: [
+          { value: "auto", label: n("contentBar.widthAuto") },
+          { value: "50", label: "50%" },
+          { value: "75", label: "75%" },
+          { value: "100", label: "100%" }
+        ],
+        onSelect: (p) => t({ width: p }),
+        opened: o === "width",
+        onChange: c("width")
+      }
+    ),
+    /* @__PURE__ */ e(
+      m,
+      {
+        label: n("contentBar.radius"),
+        value: a.radius ?? 0,
+        options: [0, 8, 16, 24].map((p) => ({ value: p, label: `${p}` })),
+        onSelect: (p) => t({ radius: p }),
+        opened: o === "radius",
+        onChange: c("radius")
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: d.barDivider }),
+    /* @__PURE__ */ e(
+      B,
+      {
+        value: D(a.align),
+        onSelect: (p) => t({ align: p }),
+        opened: o === "align",
+        onOpenedChange: c("align")
+      }
+    ),
+    /* @__PURE__ */ e(
+      T,
+      {
+        label: n("contentBar.alt"),
+        value: a.alt,
+        onApply: (p) => t({ alt: p }),
+        opened: o === "alt",
+        onChange: c("alt")
+      }
+    ),
+    /* @__PURE__ */ e(
+      T,
+      {
+        label: n("contentBar.link"),
+        value: a.link,
+        placeholder: "https://",
+        onApply: (p) => t({ link: p }),
+        opened: o === "link",
+        onChange: c("link")
+      }
+    ),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: d.barBtn,
+        "aria-label": n("contentBar.replace"),
+        onClick: () => S.current?.click(),
+        children: /* @__PURE__ */ e(O, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ e(f, { control: a, stepId: s.id })
+  ] });
+}, _ = ({ controlId: i }) => {
+  const { t: n } = b("forms"), { control: r, step: l, openMenu: a, toggle: s, update: o } = C(i);
+  if (!r || l == null || r.controlType !== "divider")
+    return null;
+  const c = (r.lineStyle ?? "line") === "space";
+  return /* @__PURE__ */ u(g, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        label: n("contentBar.style"),
+        value: r.lineStyle ?? "line",
+        options: [
+          { value: "line", label: n("contentBar.dividerLine") },
+          { value: "dashed", label: n("contentBar.dividerDashed") },
+          { value: "dots", label: n("contentBar.dividerDots") },
+          { value: "space", label: n("contentBar.dividerSpace") }
+        ],
+        onSelect: (t) => o({ lineStyle: t }),
+        opened: a === "style",
+        onChange: s("style")
+      }
+    ),
+    !c && /* @__PURE__ */ e(
+      m,
+      {
+        label: n("contentBar.thickness"),
+        value: r.thickness ?? 1,
+        options: [1, 2, 3].map((t) => ({ value: t, label: `${t}px` })),
+        onSelect: (t) => o({ thickness: t }),
+        opened: a === "thickness",
+        onChange: s("thickness")
+      }
+    ),
+    /* @__PURE__ */ e(
+      m,
+      {
+        label: n("contentBar.space"),
+        value: r.space ?? "m",
+        options: [
+          { value: "s", label: "S" },
+          { value: "m", label: "M" },
+          { value: "l", label: "L" }
+        ],
+        onSelect: (t) => o({ space: t }),
+        opened: a === "space",
+        onChange: s("space")
+      }
+    ),
+    !c && /* @__PURE__ */ u(g, { children: [
+      /* @__PURE__ */ e("span", { className: d.barDivider }),
+      /* @__PURE__ */ e(
+        w,
+        {
+          color: r.color,
+          onChange: (t) => o({ color: t }),
+          opened: a === "color",
+          onOpenedChange: s("color")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(f, { control: r, stepId: l.id })
+  ] });
+}, se = ({
+  controlType: i,
+  controlId: n,
+  blockEl: r
+}) => {
+  switch (i) {
+    case "heading":
+      return /* @__PURE__ */ e(V, { controlId: n, blockEl: r });
+    case "paragraph":
+      return /* @__PURE__ */ e(G, { controlId: n, blockEl: r });
+    case "image":
+      return /* @__PURE__ */ e(H, { controlId: n });
+    case "divider":
+      return /* @__PURE__ */ e(_, { controlId: n });
+    default:
+      return null;
+  }
+};
+export {
+  se as ContentSettingsBar,
+  _ as DividerSettingsBar,
+  V as HeadingSettingsBar,
+  H as ImageSettingsBar,
+  G as ParagraphSettingsBar
+};

package/dist/components/FormViewer/components/editor/DragHandle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Ручка перетаскивания у выделенного элемента (слева по центру). Появляется
+ * только внутри `SortableControl`; за неё можно тянуть, меняя порядок элементов.
+ */
+export declare const DragHandle: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=DragHandle.d.ts.map

package/dist/components/FormViewer/components/editor/DragHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/editor/DragHandle.tsx"],"names":[],"mappings":"AAQA;;;GAGG;AACH,eAAO,MAAM,UAAU,sDAoBtB,CAAC"}

package/dist/components/FormViewer/components/editor/DragHandle.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useTranslation as a } from "react-i18next";
+import { IconGripVertical as n } from "@tabler/icons-react";
+import { useDragHandle as s } from "./DragHandleContext.js";
+import i from "./SelectableBlock.module.css.js";
+const f = () => {
+  const { t: o } = a("forms"), r = s();
+  return r ? /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      ref: r.setActivatorNodeRef,
+      className: i.dragHandle,
+      "aria-label": o("dragToReorder"),
+      onClick: (e) => e.stopPropagation(),
+      ...r.attributes,
+      ...r.listeners,
+      children: /* @__PURE__ */ t(n, { size: 16 })
+    }
+  ) : null;
+};
+export {
+  f as DragHandle
+};

package/dist/components/FormViewer/components/editor/DragHandleContext.d.ts

@@ -0,0 +1,8 @@
+import { useSortable } from '@dnd-kit/sortable';
+/** Параметры ручки перетаскивания, прокидываемые из `SortableControl` вниз. */
+type SortableHandle = Pick<ReturnType<typeof useSortable>, 'attributes' | 'listeners' | 'setActivatorNodeRef'>;
+export declare const DragHandleProvider: import("react").Provider<SortableHandle | null>;
+/** Возвращает параметры drag-ручки текущего контрола (или null вне сортировки). */
+export declare const useDragHandle: () => SortableHandle | null;
+export {};
+//# sourceMappingURL=DragHandleContext.d.ts.map

package/dist/components/FormViewer/components/editor/DragHandleContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandleContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/editor/DragHandleContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,+EAA+E;AAC/E,KAAK,cAAc,GAAG,IAAI,CACxB,UAAU,CAAC,OAAO,WAAW,CAAC,EAC9B,YAAY,GAAG,WAAW,GAAG,qBAAqB,CACnD,CAAC;AAIF,eAAO,MAAM,kBAAkB,iDAA6B,CAAC;AAE7D,mFAAmF;AACnF,eAAO,MAAM,aAAa,6BAAsC,CAAC"}

package/dist/components/FormViewer/components/editor/DragHandleContext.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as o } from "react";
+const e = t(null), n = e.Provider, a = () => o(e);
+export {
+  n as DragHandleProvider,
+  a as useDragHandle
+};

package/dist/components/FormViewer/components/editor/FieldSettingsBar.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Плавающая панель настроек для поля. Состав зависит от типа контрола
+ * (см. требования: Single/Multiple choice, Dropdown, Number, и т.д.).
+ */
+export declare const FieldSettingsBar: ({ controlId, blockEl, }: {
+    controlId: string;
+    /** Выделенный элемент — нужен барам контента для определения реального цвета. */
+    blockEl?: HTMLElement | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FieldSettingsBar.d.ts.map

package/dist/components/FormViewer/components/editor/FieldSettingsBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldSettingsBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/editor/FieldSettingsBar.tsx"],"names":[],"mappings":"AAgUA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,yBAG9B;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B,mDAgIA,CAAC"}