@nubitio/crud 0.5.24 → 0.5.27

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.
package/dist/style.css CHANGED
@@ -417,10 +417,10 @@
417
417
  outline: 0;
418
418
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
419
419
  }
420
- .nb-datagrid--zebra .nb-datagrid__row:nth-child(even) td {
420
+ .nb-datagrid--zebra .nb-datagrid__row:nth-child(even) td:not(.nb-datagrid__cell--dirty):not(.nb-datagrid__cell--active) {
421
421
  background: var(--grid-row-alt-bg);
422
422
  }
423
- .nb-datagrid__row:hover td {
423
+ .nb-datagrid__row:hover td:not(.nb-datagrid__cell--dirty):not(.nb-datagrid__cell--active):not(.nb-datagrid__edit-cell) {
424
424
  background: var(--grid-row-hover-bg, var(--surface-2));
425
425
  }
426
426
  .nb-datagrid__row:focus-visible {
@@ -1714,6 +1714,262 @@ html[data-density=compact] .nb-datagrid .nb-badge {
1714
1714
  box-shadow: none;
1715
1715
  }
1716
1716
  }
1717
+ .nb-datagrid__row--editing {
1718
+ background: color-mix(in srgb, var(--accent-color, var(--accent)) 5%, var(--surface-0));
1719
+ }
1720
+
1721
+ .nb-datagrid__row--dirty .nb-datagrid__cell--dirty {
1722
+ background: color-mix(in srgb, #4caf50 34%, var(--surface-1, #fff));
1723
+ }
1724
+
1725
+ .nb-datagrid__row--saving {
1726
+ opacity: 0.6;
1727
+ pointer-events: none;
1728
+ }
1729
+
1730
+ .nb-datagrid__data-cell {
1731
+ cursor: default;
1732
+ }
1733
+
1734
+ .nb-datagrid__cell--editable {
1735
+ cursor: cell;
1736
+ }
1737
+ .nb-datagrid__cell--editable:hover:not(.nb-datagrid__cell--dirty):not(.nb-datagrid__cell--active) {
1738
+ background: color-mix(in srgb, var(--accent) 4%, var(--surface-0));
1739
+ }
1740
+
1741
+ .nb-datagrid__table td.nb-datagrid__cell--dirty {
1742
+ background: color-mix(in srgb, #4caf50 34%, var(--surface-1, #fff));
1743
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, #4caf50 72%, transparent);
1744
+ }
1745
+
1746
+ .nb-datagrid--zebra .nb-datagrid__row:nth-child(even) td.nb-datagrid__cell--dirty,
1747
+ .nb-datagrid__row:hover td.nb-datagrid__cell--dirty,
1748
+ .nb-datagrid__row--selected td.nb-datagrid__cell--dirty {
1749
+ background: color-mix(in srgb, #4caf50 34%, var(--surface-1, #fff));
1750
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, #4caf50 72%, transparent);
1751
+ }
1752
+
1753
+ .nb-datagrid__table td.nb-datagrid__cell--active {
1754
+ background: color-mix(in srgb, #4caf50 42%, var(--surface-1, #fff));
1755
+ box-shadow: inset 0 0 0 2px color-mix(in srgb, #4caf50 78%, transparent);
1756
+ }
1757
+
1758
+ .nb-datagrid--zebra .nb-datagrid__row:nth-child(even) td.nb-datagrid__cell--active,
1759
+ .nb-datagrid__row:hover td.nb-datagrid__cell--active,
1760
+ .nb-datagrid__row--selected td.nb-datagrid__cell--active {
1761
+ background: color-mix(in srgb, #4caf50 42%, var(--surface-1, #fff));
1762
+ box-shadow: inset 0 0 0 2px color-mix(in srgb, #4caf50 78%, transparent);
1763
+ }
1764
+
1765
+ .nb-datagrid__edit-cell {
1766
+ padding: 2px 4px;
1767
+ vertical-align: middle;
1768
+ }
1769
+
1770
+ .nb-inline-cell {
1771
+ width: 100%;
1772
+ min-width: 0;
1773
+ }
1774
+ .nb-inline-cell .nb-inline-control,
1775
+ .nb-inline-cell .nb-inline-control input,
1776
+ .nb-inline-cell .nb-inline-control select,
1777
+ .nb-inline-cell .nb-inline-control textarea,
1778
+ .nb-inline-cell .nb-form__control,
1779
+ .nb-inline-cell .nb-form__control input,
1780
+ .nb-inline-cell .nb-form__control select,
1781
+ .nb-inline-cell .nb-form__control textarea {
1782
+ font-size: 13px;
1783
+ line-height: 1.3;
1784
+ height: 28px;
1785
+ min-height: 28px;
1786
+ padding: 0 8px;
1787
+ border: 1px solid color-mix(in srgb, var(--border-color) 85%, var(--accent));
1788
+ border-radius: var(--radius-sm);
1789
+ box-sizing: border-box;
1790
+ width: 100%;
1791
+ background: var(--surface-0);
1792
+ color: var(--text-primary);
1793
+ box-shadow: none;
1794
+ transition: border-color 0.12s, box-shadow 0.12s;
1795
+ }
1796
+ .nb-inline-cell .nb-inline-control:focus,
1797
+ .nb-inline-cell .nb-inline-control input:focus,
1798
+ .nb-inline-cell .nb-inline-control select:focus,
1799
+ .nb-inline-cell .nb-inline-control textarea:focus,
1800
+ .nb-inline-cell .nb-form__control:focus,
1801
+ .nb-inline-cell .nb-form__control input:focus,
1802
+ .nb-inline-cell .nb-form__control select:focus,
1803
+ .nb-inline-cell .nb-form__control textarea:focus {
1804
+ outline: none;
1805
+ border-color: var(--accent);
1806
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
1807
+ }
1808
+ .nb-datagrid__cell--dirty .nb-inline-cell .nb-inline-control:focus, .nb-datagrid__cell--active .nb-inline-cell .nb-inline-control:focus, .nb-datagrid__cell--dirty .nb-inline-cell .nb-form__control:focus, .nb-datagrid__cell--active .nb-inline-cell .nb-form__control:focus {
1809
+ border-color: color-mix(in srgb, #4caf50 70%, var(--accent-color, var(--accent)));
1810
+ box-shadow: 0 0 0 2px color-mix(in srgb, #4caf50 28%, transparent);
1811
+ }
1812
+ .nb-inline-cell .nb-inline-control textarea,
1813
+ .nb-inline-cell .nb-form__control textarea {
1814
+ height: 52px;
1815
+ padding: 4px 8px;
1816
+ resize: vertical;
1817
+ }
1818
+ .nb-inline-cell .nb-form-switch,
1819
+ .nb-inline-cell .nb-form-checkbox {
1820
+ margin: 0;
1821
+ }
1822
+ .nb-inline-cell .nb-dropdown {
1823
+ width: 100%;
1824
+ }
1825
+ .nb-inline-cell .nb-dropdown__trigger {
1826
+ height: 28px;
1827
+ min-height: 28px;
1828
+ font-size: 13px;
1829
+ padding: 0 8px;
1830
+ border-radius: var(--radius-sm);
1831
+ }
1832
+ .nb-inline-cell .nb-date-picker {
1833
+ width: 100%;
1834
+ }
1835
+ .nb-inline-cell .nb-date-picker__trigger {
1836
+ height: 28px;
1837
+ min-height: 28px;
1838
+ border-radius: var(--radius-sm);
1839
+ border: 1px solid color-mix(in srgb, var(--border-color) 85%, var(--accent));
1840
+ background: var(--surface-0);
1841
+ }
1842
+ .nb-inline-cell .nb-date-picker__input {
1843
+ font-size: 13px;
1844
+ padding: 0 4px;
1845
+ }
1846
+ .nb-inline-cell .nb-form__lookup {
1847
+ width: 100%;
1848
+ }
1849
+ .nb-inline-cell .nb-form__lookup .nb-form__control,
1850
+ .nb-inline-cell .nb-form__lookup.has-value .nb-form__control {
1851
+ height: 28px;
1852
+ min-height: 28px;
1853
+ font-size: 13px;
1854
+ padding-right: 52px;
1855
+ }
1856
+ .nb-inline-cell .nb-form__lookup-toggle,
1857
+ .nb-inline-cell .nb-form__lookup-clear {
1858
+ width: 24px;
1859
+ height: 24px;
1860
+ }
1861
+ .nb-inline-cell.nb-inline-cell--error .nb-inline-control,
1862
+ .nb-inline-cell.nb-inline-cell--error .nb-inline-control input,
1863
+ .nb-inline-cell.nb-inline-cell--error .nb-inline-control select,
1864
+ .nb-inline-cell.nb-inline-cell--error .nb-form__control,
1865
+ .nb-inline-cell.nb-inline-cell--error .nb-date-picker__trigger {
1866
+ border-color: var(--color-danger);
1867
+ }
1868
+
1869
+ .nb-datagrid__inline-actions {
1870
+ display: flex;
1871
+ align-items: center;
1872
+ justify-content: center;
1873
+ gap: 4px;
1874
+ }
1875
+
1876
+ .nb-datagrid__inline-btn {
1877
+ display: inline-flex;
1878
+ align-items: center;
1879
+ justify-content: center;
1880
+ width: 30px;
1881
+ height: 30px;
1882
+ border: 1px solid transparent;
1883
+ border-radius: var(--radius-sm);
1884
+ cursor: pointer;
1885
+ font-size: 15px;
1886
+ transition: background 0.1s, color 0.1s;
1887
+ }
1888
+ .nb-datagrid__inline-btn:disabled {
1889
+ opacity: 0.4;
1890
+ cursor: default;
1891
+ }
1892
+ .nb-datagrid__inline-btn--save {
1893
+ background: var(--accent);
1894
+ color: #fff;
1895
+ }
1896
+ .nb-datagrid__inline-btn--save:hover:not(:disabled) {
1897
+ background: color-mix(in srgb, var(--accent) 85%, #000);
1898
+ }
1899
+ .nb-datagrid__inline-btn--cancel {
1900
+ background: transparent;
1901
+ color: var(--text-secondary);
1902
+ border-color: var(--border-color);
1903
+ }
1904
+ .nb-datagrid__inline-btn--cancel:hover:not(:disabled) {
1905
+ background: var(--surface-2);
1906
+ color: var(--text-primary);
1907
+ }
1908
+
1909
+ .nb-datagrid__toolbar-icon-action--save {
1910
+ color: var(--accent);
1911
+ }
1912
+ .nb-datagrid__toolbar-icon-action--save:hover {
1913
+ background: color-mix(in srgb, var(--accent) 12%, transparent);
1914
+ }
1915
+
1916
+ .nb-datagrid__toolbar-icon-action--revert {
1917
+ color: var(--text-secondary);
1918
+ }
1919
+ .nb-datagrid__toolbar-icon-action--revert:hover {
1920
+ background: var(--surface-2);
1921
+ color: var(--text-primary);
1922
+ }
1923
+
1924
+ .nb-datagrid__batch-bar {
1925
+ display: flex;
1926
+ align-items: center;
1927
+ gap: var(--space-3);
1928
+ padding: 8px 14px;
1929
+ background: color-mix(in srgb, #4caf50 10%, var(--surface-0));
1930
+ border-bottom: 1px solid color-mix(in srgb, #4caf50 24%, transparent);
1931
+ font-size: 13px;
1932
+ }
1933
+ .nb-datagrid__batch-bar--compact {
1934
+ padding-block: 6px;
1935
+ }
1936
+
1937
+ .nb-datagrid__batch-bar-label {
1938
+ flex: 1;
1939
+ color: var(--text-secondary);
1940
+ }
1941
+
1942
+ .nb-datagrid__batch-bar-actions {
1943
+ display: flex;
1944
+ gap: var(--space-2);
1945
+ }
1946
+
1947
+ .nb-datagrid__batch-bar-btn {
1948
+ height: 30px;
1949
+ padding: 0 14px;
1950
+ border-radius: var(--radius-sm);
1951
+ font-size: 13px;
1952
+ font-weight: 500;
1953
+ cursor: pointer;
1954
+ transition: background 0.1s;
1955
+ }
1956
+ .nb-datagrid__batch-bar-btn--save {
1957
+ background: var(--accent);
1958
+ color: #fff;
1959
+ border: none;
1960
+ }
1961
+ .nb-datagrid__batch-bar-btn--save:hover {
1962
+ background: color-mix(in srgb, var(--accent) 85%, #000);
1963
+ }
1964
+ .nb-datagrid__batch-bar-btn--discard {
1965
+ background: transparent;
1966
+ color: var(--text-secondary);
1967
+ border: 1px solid var(--border-color);
1968
+ }
1969
+ .nb-datagrid__batch-bar-btn--discard:hover {
1970
+ background: var(--surface-2);
1971
+ color: var(--text-primary);
1972
+ }
1717
1973
  .nb-form {
1718
1974
  color: var(--text-primary);
1719
1975
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nubitio/crud",
3
- "version": "0.5.24",
3
+ "version": "0.5.27",
4
4
  "type": "module",
5
5
  "description": "Declarative CRUD engine with field DSL, forms, datagrids, RBAC, conditional logic and pluggable adapters (Hydra/REST).",
6
6
  "license": "MIT",
@@ -51,12 +51,26 @@
51
51
  },
52
52
  "peerDependencies": {
53
53
  "@tanstack/react-query": "^5.0.0",
54
+ "@tiptap/extension-link": "^3.0.0",
55
+ "@tiptap/react": "^3.0.0",
56
+ "@tiptap/starter-kit": "^3.0.0",
54
57
  "i18next": "^23.0.0",
55
58
  "react": "^19.0.0",
56
59
  "react-dom": "^19.0.0",
57
60
  "react-i18next": "^14.0.0",
58
61
  "react-router-dom": "^6.0.0",
59
- "@nubitio/core": "^0.5.24",
60
- "@nubitio/ui": "^0.5.24"
62
+ "@nubitio/core": "^0.5.27",
63
+ "@nubitio/ui": "^0.5.27"
64
+ },
65
+ "peerDependenciesMeta": {
66
+ "@tiptap/extension-link": {
67
+ "optional": true
68
+ },
69
+ "@tiptap/react": {
70
+ "optional": true
71
+ },
72
+ "@tiptap/starter-kit": {
73
+ "optional": true
74
+ }
61
75
  }
62
76
  }