@josephomills/esign 0.9.2 → 0.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/ui/index.cjs +146 -150
  2. package/dist/ui/index.cjs.map +1 -1
  3. package/dist/ui/index.js +146 -150
  4. package/dist/ui/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/ui/index.js CHANGED
@@ -364,6 +364,7 @@ function FieldDesigner({
364
364
  const [drawMode, setDrawMode] = useState(false);
365
365
  const [pendingType, setPendingType] = useState("signature");
366
366
  const [configId, setConfigId] = useState(null);
367
+ const [configPos, setConfigPos] = useState(null);
367
368
  const [drag, setDrag] = useState(null);
368
369
  const [live, setLive] = useState(null);
369
370
  const stageRef = useRef(null);
@@ -471,7 +472,6 @@ function FieldDesigner({
471
472
  onChange([...value, f]);
472
473
  setSelectedId(f.id);
473
474
  setDrawMode(false);
474
- if (isDate) setConfigId(f.id);
475
475
  } else {
476
476
  onChange(value.map((x) => x.id === drag.id ? { ...x, ...live } : x));
477
477
  }
@@ -490,6 +490,11 @@ function FieldDesigner({
490
490
  function setConfig(id, patch) {
491
491
  onChange(value.map((f) => f.id === id ? { ...f, ...patch } : f));
492
492
  }
493
+ function openConfig(id, e) {
494
+ const r = e.currentTarget.getBoundingClientRect();
495
+ setConfigPos({ x: r.left, y: r.bottom + 6 });
496
+ setConfigId(id);
497
+ }
493
498
  const configField = value.find((f) => f.id === configId && f.type === "date") ?? null;
494
499
  const handle = (id, geom, c) => {
495
500
  const cx = c[1] === "w" ? geom.x : geom.x + geom.w;
@@ -685,7 +690,7 @@ function FieldDesigner({
685
690
  onPointerDown: (e) => e.stopPropagation(),
686
691
  onClick: (e) => {
687
692
  e.stopPropagation();
688
- setConfigId(f.id);
693
+ openConfig(f.id, e);
689
694
  },
690
695
  style: {
691
696
  position: "absolute",
@@ -731,172 +736,163 @@ function FieldDesigner({
731
736
  ]
732
737
  }
733
738
  ),
734
- configField ? /* @__PURE__ */ jsxs(
735
- "div",
736
- {
737
- style: {
738
- marginTop: 10,
739
- border: `1px solid ${primaryColor}66`,
740
- borderRadius: 8,
741
- padding: 12,
742
- background: "#fff",
743
- fontSize: 13,
744
- color: "#374151"
745
- },
746
- children: [
747
- /* @__PURE__ */ jsxs(
748
- "div",
749
- {
750
- style: {
751
- display: "flex",
752
- alignItems: "center",
753
- justifyContent: "space-between",
754
- marginBottom: 8
755
- },
756
- children: [
757
- /* @__PURE__ */ jsxs("strong", { children: [
758
- "\u{1F4C5} ",
759
- configField.label || "Date"
760
- ] }),
761
- /* @__PURE__ */ jsx(
762
- "button",
763
- {
764
- type: "button",
765
- onClick: () => setConfigId(null),
766
- style: {
767
- fontSize: 12,
768
- padding: "3px 10px",
769
- borderRadius: 6,
770
- border: `1px solid ${primaryColor}`,
771
- background: primaryColor,
772
- color: "#fff",
773
- cursor: "pointer"
774
- },
775
- children: "Done"
776
- }
777
- )
778
- ]
779
- }
780
- ),
781
- /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
782
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Display format" }),
783
- /* @__PURE__ */ jsx(
739
+ configField && configPos ? /* @__PURE__ */ jsxs(Fragment, { children: [
740
+ /* @__PURE__ */ jsx(
741
+ "div",
742
+ {
743
+ onClick: () => setConfigId(null),
744
+ style: { position: "fixed", inset: 0, zIndex: 50 }
745
+ }
746
+ ),
747
+ /* @__PURE__ */ jsxs(
748
+ "div",
749
+ {
750
+ style: {
751
+ position: "fixed",
752
+ left: Math.min(
753
+ configPos.x,
754
+ (typeof window !== "undefined" ? window.innerWidth : 1024) - 312
755
+ ),
756
+ top: configPos.y,
757
+ width: 300,
758
+ zIndex: 51,
759
+ border: "1px solid #e5e7eb",
760
+ borderRadius: 10,
761
+ padding: 12,
762
+ background: "#fff",
763
+ fontSize: 13,
764
+ color: "#374151",
765
+ boxShadow: "0 10px 30px rgba(0,0,0,0.18)"
766
+ },
767
+ children: [
768
+ /* @__PURE__ */ jsxs(
784
769
  "div",
785
770
  {
786
771
  style: {
787
772
  display: "flex",
788
- flexDirection: "column",
789
- border: "1px solid #e5e7eb",
790
- borderRadius: 8,
791
- overflow: "hidden"
773
+ alignItems: "center",
774
+ justifyContent: "space-between",
775
+ marginBottom: 8
792
776
  },
793
- children: DATE_FORMATS.map((fmt) => {
794
- const active = (configField.dateFormat ?? DEFAULT_DATE_FORMAT) === fmt;
795
- return /* @__PURE__ */ jsxs(
777
+ children: [
778
+ /* @__PURE__ */ jsxs("strong", { children: [
779
+ "\u{1F4C5} ",
780
+ configField.label || "Date"
781
+ ] }),
782
+ /* @__PURE__ */ jsx(
796
783
  "button",
797
784
  {
798
785
  type: "button",
799
- onClick: () => setConfig(configField.id, { dateFormat: fmt }),
786
+ onClick: () => setConfigId(null),
800
787
  style: {
801
- display: "flex",
802
- alignItems: "center",
803
- justifyContent: "space-between",
804
- padding: "7px 10px",
805
- border: "none",
806
- borderTop: "1px solid #f3f4f6",
807
- textAlign: "left",
808
- background: active ? `${primaryColor}14` : "#fff",
809
- color: active ? primaryColor : "#374151",
810
- fontWeight: active ? 600 : 400,
811
- fontSize: 13,
788
+ fontSize: 12,
789
+ padding: "3px 10px",
790
+ borderRadius: 6,
791
+ border: `1px solid ${primaryColor}`,
792
+ background: primaryColor,
793
+ color: "#fff",
812
794
  cursor: "pointer"
813
795
  },
814
- children: [
815
- /* @__PURE__ */ jsx("span", { children: DATE_FORMAT_LABELS[fmt] }),
816
- active ? /* @__PURE__ */ jsx("span", { children: "\u2713" }) : null
817
- ]
818
- },
819
- fmt
820
- );
821
- })
796
+ children: "Done"
797
+ }
798
+ )
799
+ ]
822
800
  }
823
- )
824
- ] }),
825
- /* @__PURE__ */ jsxs("div", { children: [
826
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Earliest date" }),
827
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
828
- /* @__PURE__ */ jsxs(
829
- "div",
830
- {
831
- style: {
832
- display: "inline-flex",
833
- alignItems: "center",
834
- border: "1px solid #d1d5db",
835
- borderRadius: 6,
836
- background: "#fff"
837
- },
838
- children: [
839
- /* @__PURE__ */ jsx(
840
- "input",
841
- {
842
- ref: minDateRef,
843
- type: "date",
844
- value: configField.minDate ?? "",
845
- onChange: (e) => setConfig(configField.id, { minDate: e.target.value || null }),
846
- style: {
847
- border: "none",
848
- outline: "none",
849
- background: "transparent",
850
- padding: "5px 8px",
851
- fontSize: 13,
852
- appearance: "none",
853
- WebkitAppearance: "none"
854
- }
855
- }
856
- ),
857
- /* @__PURE__ */ jsx(
858
- "button",
859
- {
860
- type: "button",
861
- "aria-label": "Open calendar",
862
- onClick: () => minDateRef.current?.showPicker?.(),
863
- style: {
864
- border: "none",
865
- background: "transparent",
866
- cursor: "pointer",
867
- fontSize: 14,
868
- lineHeight: 1,
869
- padding: "4px 8px 4px 2px"
870
- },
871
- children: "\u{1F4C5}"
872
- }
873
- )
874
- ]
875
- }
876
- ),
877
- configField.minDate ? /* @__PURE__ */ jsx(
878
- "button",
801
+ ),
802
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
803
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Display format" }),
804
+ /* @__PURE__ */ jsx(
805
+ "select",
879
806
  {
880
- type: "button",
881
- onClick: () => setConfig(configField.id, { minDate: null }),
807
+ value: configField.dateFormat ?? DEFAULT_DATE_FORMAT,
808
+ onChange: (e) => setConfig(configField.id, { dateFormat: e.target.value }),
882
809
  style: {
883
- padding: "5px 8px",
810
+ width: "100%",
811
+ padding: "6px 8px",
884
812
  borderRadius: 6,
885
813
  border: "1px solid #d1d5db",
886
- background: "#fff",
887
- color: "#6b7280",
888
- cursor: "pointer",
889
- fontSize: 12
814
+ fontSize: 13
890
815
  },
891
- children: "Clear"
816
+ children: DATE_FORMATS.map((fmt) => /* @__PURE__ */ jsx("option", { value: fmt, children: DATE_FORMAT_LABELS[fmt] }, fmt))
892
817
  }
893
- ) : null
818
+ )
894
819
  ] }),
895
- /* @__PURE__ */ jsx("span", { style: { color: "#9ca3af", fontSize: 11 }, children: "Leave blank to use the document's creation date." })
896
- ] })
897
- ]
898
- }
899
- ) : null
820
+ /* @__PURE__ */ jsxs("div", { children: [
821
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Earliest date" }),
822
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
823
+ /* @__PURE__ */ jsxs(
824
+ "div",
825
+ {
826
+ style: {
827
+ display: "inline-flex",
828
+ alignItems: "center",
829
+ border: "1px solid #d1d5db",
830
+ borderRadius: 6,
831
+ background: "#fff"
832
+ },
833
+ children: [
834
+ /* @__PURE__ */ jsx(
835
+ "input",
836
+ {
837
+ ref: minDateRef,
838
+ type: "date",
839
+ value: configField.minDate ?? "",
840
+ onChange: (e) => setConfig(configField.id, { minDate: e.target.value || null }),
841
+ style: {
842
+ border: "none",
843
+ outline: "none",
844
+ background: "transparent",
845
+ padding: "5px 8px",
846
+ fontSize: 13,
847
+ appearance: "none",
848
+ WebkitAppearance: "none"
849
+ }
850
+ }
851
+ ),
852
+ /* @__PURE__ */ jsx(
853
+ "button",
854
+ {
855
+ type: "button",
856
+ "aria-label": "Open calendar",
857
+ onClick: () => minDateRef.current?.showPicker?.(),
858
+ style: {
859
+ border: "none",
860
+ background: "transparent",
861
+ cursor: "pointer",
862
+ fontSize: 14,
863
+ lineHeight: 1,
864
+ padding: "4px 8px 4px 2px"
865
+ },
866
+ children: "\u{1F4C5}"
867
+ }
868
+ )
869
+ ]
870
+ }
871
+ ),
872
+ configField.minDate ? /* @__PURE__ */ jsx(
873
+ "button",
874
+ {
875
+ type: "button",
876
+ onClick: () => setConfig(configField.id, { minDate: null }),
877
+ style: {
878
+ padding: "5px 8px",
879
+ borderRadius: 6,
880
+ border: "1px solid #d1d5db",
881
+ background: "#fff",
882
+ color: "#6b7280",
883
+ cursor: "pointer",
884
+ fontSize: 12
885
+ },
886
+ children: "Clear"
887
+ }
888
+ ) : null
889
+ ] }),
890
+ /* @__PURE__ */ jsx("span", { style: { color: "#9ca3af", fontSize: 11 }, children: "Leave blank to use the document's creation date." })
891
+ ] })
892
+ ]
893
+ }
894
+ )
895
+ ] }) : null
900
896
  ] }),
901
897
  hideFieldList ? null : /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 200px", minWidth: 180, maxWidth: 300 }, children: [
902
898
  /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, fontWeight: 600, color: "#374151", margin: "0 0 8px" }, children: [
@@ -951,7 +947,7 @@ function FieldDesigner({
951
947
  "aria-label": `Configure ${f.label}`,
952
948
  onClick: (e) => {
953
949
  e.stopPropagation();
954
- setConfigId(f.id);
950
+ openConfig(f.id, e);
955
951
  },
956
952
  style: {
957
953
  border: "none",