@josephomills/esign 0.9.1 → 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 +144 -132
  2. package/dist/ui/index.cjs.map +1 -1
  3. package/dist/ui/index.js +144 -132
  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,156 +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: [
801
+ ),
802
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
803
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Display format" }),
828
804
  /* @__PURE__ */ jsx(
829
- "input",
805
+ "select",
830
806
  {
831
- ref: minDateRef,
832
- type: "date",
833
- value: configField.minDate ?? "",
834
- onChange: (e) => setConfig(configField.id, { minDate: e.target.value || null }),
807
+ value: configField.dateFormat ?? DEFAULT_DATE_FORMAT,
808
+ onChange: (e) => setConfig(configField.id, { dateFormat: e.target.value }),
835
809
  style: {
836
- padding: "5px 8px",
810
+ width: "100%",
811
+ padding: "6px 8px",
837
812
  borderRadius: 6,
838
813
  border: "1px solid #d1d5db",
839
814
  fontSize: 13
840
- }
841
- }
842
- ),
843
- /* @__PURE__ */ jsx(
844
- "button",
845
- {
846
- type: "button",
847
- "aria-label": "Open calendar",
848
- onClick: () => minDateRef.current?.showPicker?.(),
849
- style: {
850
- padding: "5px 8px",
851
- borderRadius: 6,
852
- border: `1px solid ${primaryColor}`,
853
- background: "#fff",
854
- cursor: "pointer",
855
- fontSize: 14,
856
- lineHeight: 1
857
815
  },
858
- children: "\u{1F4C5}"
816
+ children: DATE_FORMATS.map((fmt) => /* @__PURE__ */ jsx("option", { value: fmt, children: DATE_FORMAT_LABELS[fmt] }, fmt))
859
817
  }
860
- ),
861
- configField.minDate ? /* @__PURE__ */ jsx(
862
- "button",
863
- {
864
- type: "button",
865
- onClick: () => setConfig(configField.id, { minDate: null }),
866
- style: {
867
- padding: "5px 8px",
868
- borderRadius: 6,
869
- border: "1px solid #d1d5db",
870
- background: "#fff",
871
- color: "#6b7280",
872
- cursor: "pointer",
873
- fontSize: 12
874
- },
875
- children: "Clear"
876
- }
877
- ) : null
818
+ )
878
819
  ] }),
879
- /* @__PURE__ */ jsx("span", { style: { color: "#9ca3af", fontSize: 11 }, children: "Leave blank to use the document's creation date." })
880
- ] })
881
- ]
882
- }
883
- ) : 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
884
896
  ] }),
885
897
  hideFieldList ? null : /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 200px", minWidth: 180, maxWidth: 300 }, children: [
886
898
  /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, fontWeight: 600, color: "#374151", margin: "0 0 8px" }, children: [
@@ -935,7 +947,7 @@ function FieldDesigner({
935
947
  "aria-label": `Configure ${f.label}`,
936
948
  onClick: (e) => {
937
949
  e.stopPropagation();
938
- setConfigId(f.id);
950
+ openConfig(f.id, e);
939
951
  },
940
952
  style: {
941
953
  border: "none",