@nubitio/crud 0.5.26 → 0.5.28

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 {
@@ -1715,10 +1715,11 @@ html[data-density=compact] .nb-datagrid .nb-badge {
1715
1715
  }
1716
1716
  }
1717
1717
  .nb-datagrid__row--editing {
1718
- background: color-mix(in srgb, var(--accent) 6%, var(--surface-0));
1718
+ background: color-mix(in srgb, var(--accent-color, var(--accent)) 5%, var(--surface-0));
1719
1719
  }
1720
- .nb-datagrid__row--editing td {
1721
- cursor: default;
1720
+
1721
+ .nb-datagrid__row--dirty .nb-datagrid__cell--dirty:not(.nb-datagrid__cell--active) {
1722
+ background: color-mix(in srgb, #4caf50 30%, var(--surface-1, #fff));
1722
1723
  }
1723
1724
 
1724
1725
  .nb-datagrid__row--saving {
@@ -1726,43 +1727,156 @@ html[data-density=compact] .nb-datagrid .nb-badge {
1726
1727
  pointer-events: none;
1727
1728
  }
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:not(.nb-datagrid__cell--active) {
1742
+ background: color-mix(in srgb, #4caf50 30%, var(--surface-1, #fff));
1743
+ }
1744
+
1745
+ .nb-datagrid--zebra .nb-datagrid__row:nth-child(even) td.nb-datagrid__cell--dirty:not(.nb-datagrid__cell--active),
1746
+ .nb-datagrid__row:hover td.nb-datagrid__cell--dirty:not(.nb-datagrid__cell--active),
1747
+ .nb-datagrid__row--selected td.nb-datagrid__cell--dirty:not(.nb-datagrid__cell--active) {
1748
+ background: color-mix(in srgb, #4caf50 30%, var(--surface-1, #fff));
1749
+ }
1750
+
1751
+ .nb-datagrid__table td.nb-datagrid__cell--active {
1752
+ background: var(--surface-1);
1753
+ box-shadow: none;
1754
+ }
1755
+
1756
+ .nb-datagrid--zebra .nb-datagrid__row:nth-child(even) td.nb-datagrid__cell--active,
1757
+ .nb-datagrid__row:hover td.nb-datagrid__cell--active,
1758
+ .nb-datagrid__row--selected td.nb-datagrid__cell--active {
1759
+ background: var(--surface-1);
1760
+ box-shadow: none;
1761
+ }
1762
+
1729
1763
  .nb-datagrid__edit-cell {
1730
- padding: 3px 4px;
1764
+ height: var(--row-height);
1765
+ padding: 0;
1731
1766
  vertical-align: middle;
1732
1767
  }
1733
1768
 
1734
1769
  .nb-inline-cell {
1770
+ align-items: stretch;
1771
+ display: flex;
1772
+ height: 100%;
1773
+ min-height: var(--row-height);
1774
+ min-width: 0;
1735
1775
  width: 100%;
1736
1776
  }
1737
1777
  .nb-inline-cell .nb-inline-control,
1738
1778
  .nb-inline-cell .nb-inline-control input,
1739
1779
  .nb-inline-cell .nb-inline-control select,
1740
- .nb-inline-cell .nb-inline-control textarea {
1741
- font-size: 13px;
1742
- height: 30px;
1743
- min-height: 30px;
1744
- padding: 0 6px;
1745
- border-radius: var(--radius-sm);
1780
+ .nb-inline-cell .nb-inline-control textarea,
1781
+ .nb-inline-cell .nb-form__control,
1782
+ .nb-inline-cell .nb-form__control input,
1783
+ .nb-inline-cell .nb-form__control select,
1784
+ .nb-inline-cell .nb-form__control textarea {
1785
+ background: transparent;
1786
+ border: 0;
1787
+ border-bottom: 2px solid var(--accent-color, var(--accent));
1788
+ border-radius: 0;
1789
+ box-shadow: none;
1746
1790
  box-sizing: border-box;
1791
+ color: var(--accent-color, var(--accent));
1792
+ flex: 1 1 auto;
1793
+ font-size: 13px;
1794
+ font-weight: var(--font-weight-medium);
1795
+ height: 100%;
1796
+ line-height: var(--row-height);
1797
+ min-height: var(--row-height);
1798
+ padding: 0 var(--space-2);
1799
+ transition: border-color 0.12s;
1747
1800
  width: 100%;
1748
1801
  }
1749
- .nb-inline-cell .nb-inline-control textarea {
1750
- height: 56px;
1751
- padding: 4px 6px;
1752
- resize: none;
1802
+ .nb-inline-cell .nb-inline-control:focus,
1803
+ .nb-inline-cell .nb-inline-control input:focus,
1804
+ .nb-inline-cell .nb-inline-control select:focus,
1805
+ .nb-inline-cell .nb-inline-control textarea:focus,
1806
+ .nb-inline-cell .nb-form__control:focus,
1807
+ .nb-inline-cell .nb-form__control input:focus,
1808
+ .nb-inline-cell .nb-form__control select:focus,
1809
+ .nb-inline-cell .nb-form__control textarea:focus {
1810
+ border-bottom-color: var(--accent-color, var(--accent));
1811
+ box-shadow: none;
1812
+ outline: none;
1813
+ }
1814
+ .nb-inline-cell .nb-inline-control textarea,
1815
+ .nb-inline-cell .nb-form__control textarea {
1816
+ height: 52px;
1817
+ padding: 4px 8px;
1818
+ resize: vertical;
1753
1819
  }
1754
1820
  .nb-inline-cell .nb-form-switch,
1755
1821
  .nb-inline-cell .nb-form-checkbox {
1756
1822
  margin: 0;
1757
1823
  }
1758
- .nb-inline-cell .nb-lookup__trigger {
1759
- height: 30px;
1824
+ .nb-inline-cell .nb-dropdown {
1825
+ width: 100%;
1826
+ }
1827
+ .nb-inline-cell .nb-dropdown__trigger {
1828
+ background: transparent;
1829
+ border: 0;
1830
+ border-bottom: 2px solid var(--accent-color, var(--accent));
1831
+ border-radius: 0;
1832
+ color: var(--accent-color, var(--accent));
1833
+ font-size: 13px;
1834
+ height: 100%;
1835
+ min-height: var(--row-height);
1836
+ padding: 0 var(--space-2);
1837
+ }
1838
+ .nb-inline-cell .nb-date-picker {
1839
+ flex: 1 1 auto;
1840
+ width: 100%;
1841
+ }
1842
+ .nb-inline-cell .nb-date-picker__trigger {
1843
+ background: transparent;
1844
+ border: 0;
1845
+ border-bottom: 2px solid var(--accent-color, var(--accent));
1846
+ border-radius: 0;
1847
+ color: var(--accent-color, var(--accent));
1848
+ height: 100%;
1849
+ min-height: var(--row-height);
1850
+ }
1851
+ .nb-inline-cell .nb-date-picker__input {
1760
1852
  font-size: 13px;
1853
+ padding: 0 4px;
1854
+ }
1855
+ .nb-inline-cell .nb-form__lookup {
1856
+ flex: 1 1 auto;
1857
+ height: 100%;
1858
+ width: 100%;
1859
+ }
1860
+ .nb-inline-cell .nb-form__lookup .nb-form__control,
1861
+ .nb-inline-cell .nb-form__lookup.has-value .nb-form__control {
1862
+ font-size: 13px;
1863
+ height: 100%;
1864
+ min-height: var(--row-height);
1865
+ padding-right: 52px;
1866
+ }
1867
+ .nb-inline-cell .nb-form__lookup-toggle,
1868
+ .nb-inline-cell .nb-form__lookup-clear {
1869
+ width: 24px;
1870
+ height: 24px;
1761
1871
  }
1762
1872
  .nb-inline-cell.nb-inline-cell--error .nb-inline-control,
1763
1873
  .nb-inline-cell.nb-inline-cell--error .nb-inline-control input,
1764
- .nb-inline-cell.nb-inline-cell--error .nb-inline-control select {
1765
- border-color: var(--color-danger);
1874
+ .nb-inline-cell.nb-inline-cell--error .nb-inline-control select,
1875
+ .nb-inline-cell.nb-inline-cell--error .nb-form__control,
1876
+ .nb-inline-cell.nb-inline-cell--error .nb-date-picker__trigger,
1877
+ .nb-inline-cell.nb-inline-cell--error .nb-dropdown__trigger {
1878
+ border-bottom-color: var(--color-danger);
1879
+ color: var(--color-danger);
1766
1880
  }
1767
1881
 
1768
1882
  .nb-datagrid__inline-actions {
@@ -1805,15 +1919,33 @@ html[data-density=compact] .nb-datagrid .nb-badge {
1805
1919
  color: var(--text-primary);
1806
1920
  }
1807
1921
 
1922
+ .nb-datagrid__toolbar-icon-action--save {
1923
+ color: var(--accent);
1924
+ }
1925
+ .nb-datagrid__toolbar-icon-action--save:hover {
1926
+ background: color-mix(in srgb, var(--accent) 12%, transparent);
1927
+ }
1928
+
1929
+ .nb-datagrid__toolbar-icon-action--revert {
1930
+ color: var(--text-secondary);
1931
+ }
1932
+ .nb-datagrid__toolbar-icon-action--revert:hover {
1933
+ background: var(--surface-2);
1934
+ color: var(--text-primary);
1935
+ }
1936
+
1808
1937
  .nb-datagrid__batch-bar {
1809
1938
  display: flex;
1810
1939
  align-items: center;
1811
1940
  gap: var(--space-3);
1812
1941
  padding: 8px 14px;
1813
- background: color-mix(in srgb, var(--accent) 10%, var(--surface-0));
1814
- border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
1942
+ background: color-mix(in srgb, #4caf50 10%, var(--surface-0));
1943
+ border-bottom: 1px solid color-mix(in srgb, #4caf50 24%, transparent);
1815
1944
  font-size: 13px;
1816
1945
  }
1946
+ .nb-datagrid__batch-bar--compact {
1947
+ padding-block: 6px;
1948
+ }
1817
1949
 
1818
1950
  .nb-datagrid__batch-bar-label {
1819
1951
  flex: 1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nubitio/crud",
3
- "version": "0.5.26",
3
+ "version": "0.5.28",
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",
@@ -59,8 +59,8 @@
59
59
  "react-dom": "^19.0.0",
60
60
  "react-i18next": "^14.0.0",
61
61
  "react-router-dom": "^6.0.0",
62
- "@nubitio/core": "^0.5.26",
63
- "@nubitio/ui": "^0.5.26"
62
+ "@nubitio/ui": "^0.5.28",
63
+ "@nubitio/core": "^0.5.28"
64
64
  },
65
65
  "peerDependenciesMeta": {
66
66
  "@tiptap/extension-link": {