config-driven-form 1.3.1 → 1.4.0

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 (7) hide show
  1. package/dist/index.d.mts +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +303 -111
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +303 -111
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -17,6 +17,7 @@ interface JSONSchema {
17
17
  enum?: any[];
18
18
  items?: JSONSchema | JSONSchema[];
19
19
  default?: any;
20
+ errorMessage?: string | Record<string, string>;
20
21
  }
21
22
  interface FormClassNames {
22
23
  container?: string;
package/dist/index.d.ts CHANGED
@@ -17,6 +17,7 @@ interface JSONSchema {
17
17
  enum?: any[];
18
18
  items?: JSONSchema | JSONSchema[];
19
19
  default?: any;
20
+ errorMessage?: string | Record<string, string>;
20
21
  }
21
22
  interface FormClassNames {
22
23
  container?: string;
package/dist/index.js CHANGED
@@ -1460,6 +1460,25 @@ var PropertiesPanel = ({
1460
1460
  [element]: value
1461
1461
  });
1462
1462
  };
1463
+ const handleErrorMessageChange = (errorKey, message) => {
1464
+ const currentMessages = typeof field.schema.errorMessage === "object" ? field.schema.errorMessage : {};
1465
+ const newMessages = { ...currentMessages };
1466
+ if (!message) {
1467
+ delete newMessages[errorKey];
1468
+ } else {
1469
+ newMessages[errorKey] = message;
1470
+ }
1471
+ handleSchemaChange(
1472
+ "errorMessage",
1473
+ Object.keys(newMessages).length > 0 ? newMessages : void 0
1474
+ );
1475
+ };
1476
+ const getErrorMessage = (errorKey) => {
1477
+ if (typeof field.schema.errorMessage === "object") {
1478
+ return field.schema.errorMessage[errorKey] || "";
1479
+ }
1480
+ return "";
1481
+ };
1463
1482
  return /* @__PURE__ */ jsxRuntime.jsxs(
1464
1483
  "div",
1465
1484
  {
@@ -1648,135 +1667,308 @@ var PropertiesPanel = ({
1648
1667
  ] }),
1649
1668
  activeTab === "validation" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1650
1669
  /* @__PURE__ */ jsxRuntime.jsxs(
1651
- "label",
1670
+ "div",
1652
1671
  {
1653
1672
  style: {
1654
1673
  display: "flex",
1655
- alignItems: "center",
1656
- gap: "0.5rem",
1657
- fontSize: "0.875rem",
1658
- fontWeight: 500,
1659
- color: "#374151",
1660
- cursor: "pointer"
1674
+ flexDirection: "column",
1675
+ gap: "0.375rem",
1676
+ marginBottom: "1rem",
1677
+ borderBottom: "1px solid #e5e7eb",
1678
+ paddingBottom: "1rem"
1661
1679
  },
1662
1680
  children: [
1663
- /* @__PURE__ */ jsxRuntime.jsx(
1664
- "input",
1681
+ /* @__PURE__ */ jsxRuntime.jsxs(
1682
+ "label",
1665
1683
  {
1666
- type: "checkbox",
1667
- checked: field.isRequired || false,
1668
- onChange: (e) => onUpdate(field.id, { isRequired: e.target.checked })
1684
+ style: {
1685
+ display: "flex",
1686
+ alignItems: "center",
1687
+ gap: "0.5rem",
1688
+ fontSize: "0.875rem",
1689
+ fontWeight: 500,
1690
+ color: "#374151",
1691
+ cursor: "pointer"
1692
+ },
1693
+ children: [
1694
+ /* @__PURE__ */ jsxRuntime.jsx(
1695
+ "input",
1696
+ {
1697
+ type: "checkbox",
1698
+ checked: field.isRequired || false,
1699
+ onChange: (e) => onUpdate(field.id, { isRequired: e.target.checked })
1700
+ }
1701
+ ),
1702
+ "Required Field"
1703
+ ]
1669
1704
  }
1670
1705
  ),
1671
- "Required Field"
1706
+ field.isRequired && /* @__PURE__ */ jsxRuntime.jsx(
1707
+ "input",
1708
+ {
1709
+ type: "text",
1710
+ placeholder: "Custom required error message",
1711
+ value: getErrorMessage("required"),
1712
+ onChange: (e) => handleErrorMessageChange("required", e.target.value),
1713
+ style: {
1714
+ width: "100%",
1715
+ padding: "0.4rem",
1716
+ border: "1px dashed #d1d5db",
1717
+ borderRadius: "0.375rem",
1718
+ fontSize: "0.75rem",
1719
+ marginTop: "0.25rem",
1720
+ backgroundColor: "#f9fafb"
1721
+ }
1722
+ }
1723
+ )
1672
1724
  ]
1673
1725
  }
1674
1726
  ),
1675
1727
  (field.type === "text" || field.type === "email" || field.type === "password") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1676
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1677
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Min Length" }),
1678
- /* @__PURE__ */ jsxRuntime.jsx(
1679
- "input",
1680
- {
1681
- type: "number",
1682
- value: field.schema.minLength || "",
1683
- onChange: (e) => handleSchemaChange(
1684
- "minLength",
1685
- e.target.value ? Number(e.target.value) : void 0
1728
+ /* @__PURE__ */ jsxRuntime.jsxs(
1729
+ "div",
1730
+ {
1731
+ style: {
1732
+ display: "flex",
1733
+ flexDirection: "column",
1734
+ gap: "0.375rem",
1735
+ marginBottom: "0.5rem"
1736
+ },
1737
+ children: [
1738
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Min Length" }),
1739
+ /* @__PURE__ */ jsxRuntime.jsx(
1740
+ "input",
1741
+ {
1742
+ type: "number",
1743
+ value: field.schema.minLength || "",
1744
+ onChange: (e) => handleSchemaChange(
1745
+ "minLength",
1746
+ e.target.value ? Number(e.target.value) : void 0
1747
+ ),
1748
+ style: {
1749
+ width: "100%",
1750
+ padding: "0.5rem",
1751
+ border: "1px solid #d1d5db",
1752
+ borderRadius: "0.375rem",
1753
+ fontSize: "0.875rem"
1754
+ }
1755
+ }
1686
1756
  ),
1687
- style: {
1688
- width: "100%",
1689
- padding: "0.5rem",
1690
- border: "1px solid #d1d5db",
1691
- borderRadius: "0.375rem",
1692
- fontSize: "0.875rem"
1693
- }
1694
- }
1695
- )
1696
- ] }),
1697
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1698
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Max Length" }),
1699
- /* @__PURE__ */ jsxRuntime.jsx(
1700
- "input",
1701
- {
1702
- type: "number",
1703
- value: field.schema.maxLength || "",
1704
- onChange: (e) => handleSchemaChange(
1705
- "maxLength",
1706
- e.target.value ? Number(e.target.value) : void 0
1757
+ field.schema.minLength !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
1758
+ "input",
1759
+ {
1760
+ type: "text",
1761
+ placeholder: "Custom error message",
1762
+ value: getErrorMessage("minLength"),
1763
+ onChange: (e) => handleErrorMessageChange("minLength", e.target.value),
1764
+ style: {
1765
+ width: "100%",
1766
+ padding: "0.4rem",
1767
+ border: "1px dashed #d1d5db",
1768
+ borderRadius: "0.375rem",
1769
+ fontSize: "0.75rem",
1770
+ backgroundColor: "#f9fafb"
1771
+ }
1772
+ }
1773
+ )
1774
+ ]
1775
+ }
1776
+ ),
1777
+ /* @__PURE__ */ jsxRuntime.jsxs(
1778
+ "div",
1779
+ {
1780
+ style: {
1781
+ display: "flex",
1782
+ flexDirection: "column",
1783
+ gap: "0.375rem",
1784
+ marginBottom: "0.5rem"
1785
+ },
1786
+ children: [
1787
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Max Length" }),
1788
+ /* @__PURE__ */ jsxRuntime.jsx(
1789
+ "input",
1790
+ {
1791
+ type: "number",
1792
+ value: field.schema.maxLength || "",
1793
+ onChange: (e) => handleSchemaChange(
1794
+ "maxLength",
1795
+ e.target.value ? Number(e.target.value) : void 0
1796
+ ),
1797
+ style: {
1798
+ width: "100%",
1799
+ padding: "0.5rem",
1800
+ border: "1px solid #d1d5db",
1801
+ borderRadius: "0.375rem",
1802
+ fontSize: "0.875rem"
1803
+ }
1804
+ }
1707
1805
  ),
1708
- style: {
1709
- width: "100%",
1710
- padding: "0.5rem",
1711
- border: "1px solid #d1d5db",
1712
- borderRadius: "0.375rem",
1713
- fontSize: "0.875rem"
1714
- }
1715
- }
1716
- )
1717
- ] }),
1718
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1719
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Regex Pattern" }),
1720
- /* @__PURE__ */ jsxRuntime.jsx(
1721
- "input",
1722
- {
1723
- type: "text",
1724
- value: field.schema.pattern || "",
1725
- onChange: (e) => handleSchemaChange("pattern", e.target.value || void 0),
1726
- style: {
1727
- width: "100%",
1728
- padding: "0.5rem",
1729
- border: "1px solid #d1d5db",
1730
- borderRadius: "0.375rem",
1731
- fontSize: "0.875rem"
1732
- }
1733
- }
1734
- )
1735
- ] })
1806
+ field.schema.maxLength !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
1807
+ "input",
1808
+ {
1809
+ type: "text",
1810
+ placeholder: "Custom error message",
1811
+ value: getErrorMessage("maxLength"),
1812
+ onChange: (e) => handleErrorMessageChange("maxLength", e.target.value),
1813
+ style: {
1814
+ width: "100%",
1815
+ padding: "0.4rem",
1816
+ border: "1px dashed #d1d5db",
1817
+ borderRadius: "0.375rem",
1818
+ fontSize: "0.75rem",
1819
+ backgroundColor: "#f9fafb"
1820
+ }
1821
+ }
1822
+ )
1823
+ ]
1824
+ }
1825
+ ),
1826
+ /* @__PURE__ */ jsxRuntime.jsxs(
1827
+ "div",
1828
+ {
1829
+ style: {
1830
+ display: "flex",
1831
+ flexDirection: "column",
1832
+ gap: "0.375rem",
1833
+ marginBottom: "0.5rem"
1834
+ },
1835
+ children: [
1836
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Regex Pattern" }),
1837
+ /* @__PURE__ */ jsxRuntime.jsx(
1838
+ "input",
1839
+ {
1840
+ type: "text",
1841
+ value: field.schema.pattern || "",
1842
+ onChange: (e) => handleSchemaChange("pattern", e.target.value || void 0),
1843
+ style: {
1844
+ width: "100%",
1845
+ padding: "0.5rem",
1846
+ border: "1px solid #d1d5db",
1847
+ borderRadius: "0.375rem",
1848
+ fontSize: "0.875rem"
1849
+ }
1850
+ }
1851
+ ),
1852
+ field.schema.pattern !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
1853
+ "input",
1854
+ {
1855
+ type: "text",
1856
+ placeholder: "Custom error message",
1857
+ value: getErrorMessage("pattern"),
1858
+ onChange: (e) => handleErrorMessageChange("pattern", e.target.value),
1859
+ style: {
1860
+ width: "100%",
1861
+ padding: "0.4rem",
1862
+ border: "1px dashed #d1d5db",
1863
+ borderRadius: "0.375rem",
1864
+ fontSize: "0.75rem",
1865
+ backgroundColor: "#f9fafb"
1866
+ }
1867
+ }
1868
+ )
1869
+ ]
1870
+ }
1871
+ )
1736
1872
  ] }),
1737
1873
  field.type === "number" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1738
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1739
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Minimum Value" }),
1740
- /* @__PURE__ */ jsxRuntime.jsx(
1741
- "input",
1742
- {
1743
- type: "number",
1744
- value: field.schema.minimum || "",
1745
- onChange: (e) => handleSchemaChange(
1746
- "minimum",
1747
- e.target.value ? Number(e.target.value) : void 0
1874
+ /* @__PURE__ */ jsxRuntime.jsxs(
1875
+ "div",
1876
+ {
1877
+ style: {
1878
+ display: "flex",
1879
+ flexDirection: "column",
1880
+ gap: "0.375rem",
1881
+ marginBottom: "0.5rem"
1882
+ },
1883
+ children: [
1884
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Minimum Value" }),
1885
+ /* @__PURE__ */ jsxRuntime.jsx(
1886
+ "input",
1887
+ {
1888
+ type: "number",
1889
+ value: field.schema.minimum || "",
1890
+ onChange: (e) => handleSchemaChange(
1891
+ "minimum",
1892
+ e.target.value ? Number(e.target.value) : void 0
1893
+ ),
1894
+ style: {
1895
+ width: "100%",
1896
+ padding: "0.5rem",
1897
+ border: "1px solid #d1d5db",
1898
+ borderRadius: "0.375rem",
1899
+ fontSize: "0.875rem"
1900
+ }
1901
+ }
1748
1902
  ),
1749
- style: {
1750
- width: "100%",
1751
- padding: "0.5rem",
1752
- border: "1px solid #d1d5db",
1753
- borderRadius: "0.375rem",
1754
- fontSize: "0.875rem"
1755
- }
1756
- }
1757
- )
1758
- ] }),
1759
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1760
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Maximum Value" }),
1761
- /* @__PURE__ */ jsxRuntime.jsx(
1762
- "input",
1763
- {
1764
- type: "number",
1765
- value: field.schema.maximum || "",
1766
- onChange: (e) => handleSchemaChange(
1767
- "maximum",
1768
- e.target.value ? Number(e.target.value) : void 0
1903
+ field.schema.minimum !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
1904
+ "input",
1905
+ {
1906
+ type: "text",
1907
+ placeholder: "Custom error message",
1908
+ value: getErrorMessage("minimum"),
1909
+ onChange: (e) => handleErrorMessageChange("minimum", e.target.value),
1910
+ style: {
1911
+ width: "100%",
1912
+ padding: "0.4rem",
1913
+ border: "1px dashed #d1d5db",
1914
+ borderRadius: "0.375rem",
1915
+ fontSize: "0.75rem",
1916
+ backgroundColor: "#f9fafb"
1917
+ }
1918
+ }
1919
+ )
1920
+ ]
1921
+ }
1922
+ ),
1923
+ /* @__PURE__ */ jsxRuntime.jsxs(
1924
+ "div",
1925
+ {
1926
+ style: {
1927
+ display: "flex",
1928
+ flexDirection: "column",
1929
+ gap: "0.375rem",
1930
+ marginBottom: "0.5rem"
1931
+ },
1932
+ children: [
1933
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Maximum Value" }),
1934
+ /* @__PURE__ */ jsxRuntime.jsx(
1935
+ "input",
1936
+ {
1937
+ type: "number",
1938
+ value: field.schema.maximum || "",
1939
+ onChange: (e) => handleSchemaChange(
1940
+ "maximum",
1941
+ e.target.value ? Number(e.target.value) : void 0
1942
+ ),
1943
+ style: {
1944
+ width: "100%",
1945
+ padding: "0.5rem",
1946
+ border: "1px solid #d1d5db",
1947
+ borderRadius: "0.375rem",
1948
+ fontSize: "0.875rem"
1949
+ }
1950
+ }
1769
1951
  ),
1770
- style: {
1771
- width: "100%",
1772
- padding: "0.5rem",
1773
- border: "1px solid #d1d5db",
1774
- borderRadius: "0.375rem",
1775
- fontSize: "0.875rem"
1776
- }
1777
- }
1778
- )
1779
- ] })
1952
+ field.schema.maximum !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
1953
+ "input",
1954
+ {
1955
+ type: "text",
1956
+ placeholder: "Custom error message",
1957
+ value: getErrorMessage("maximum"),
1958
+ onChange: (e) => handleErrorMessageChange("maximum", e.target.value),
1959
+ style: {
1960
+ width: "100%",
1961
+ padding: "0.4rem",
1962
+ border: "1px dashed #d1d5db",
1963
+ borderRadius: "0.375rem",
1964
+ fontSize: "0.75rem",
1965
+ backgroundColor: "#f9fafb"
1966
+ }
1967
+ }
1968
+ )
1969
+ ]
1970
+ }
1971
+ )
1780
1972
  ] })
1781
1973
  ] }),
1782
1974
  activeTab === "design" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [