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