@cdmx/wappler_ag_grid 0.8.8 → 0.8.9
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/README.md +7 -0
- package/ag-theme-custom.css +79 -0
- package/app_connect/components.hjson +9 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,8 +12,15 @@ The AG Grid module allows you to create a flexible and customizable data grid wi
|
|
|
12
12
|
- "Alpine" (Default)
|
|
13
13
|
- "Balham"
|
|
14
14
|
- "Material"
|
|
15
|
+
- "Custom"
|
|
15
16
|
5. **Locale**: Select the locale for the grid. Currently supported locales: English (EN) and Hebrew (HE). (Default: EN)
|
|
16
17
|
|
|
18
|
+
**Note for Custom Theme:**
|
|
19
|
+
When you select the "Custom" theme option, you have the flexibility to define your own unique styling for the ag-Grid components.
|
|
20
|
+
This option allows you to customize the look and feel of the grid to match the design requirements of you pages and layouts.
|
|
21
|
+
You can override the default styles provided by ag-Grid with your own CSS rules by targeting the specific CSS variables and classes used by the grid.
|
|
22
|
+
The overrides for the "Custom" theme can be applied in the ag-theme-custom.css file located in the public/css folder. This file serves as a centralized place for customizing the grid's appearance.
|
|
23
|
+
|
|
17
24
|
## AG Grid Options
|
|
18
25
|
1. **Minimum Width**: The minimum width of the column. (Default: 150)
|
|
19
26
|
2. **Resizable**: Specifies if the column can be resized. (Default: true)
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
.ag-theme-custom.ag-theme-alpine {
|
|
2
|
+
--ag-odd-row-background-color: blue; /* Background color for odd rows */
|
|
3
|
+
--ag-alpine-active-color: red; /* Active color for Alpine theme */
|
|
4
|
+
--ag-data-color: #333; /* Color of text in grid cells */
|
|
5
|
+
--ag-header-foreground-color: rgb(12, 10, 10); /* Color of text and icons in the header */
|
|
6
|
+
--ag-header-background-color: rgb(226, 226, 219); /* Background color for all headers */
|
|
7
|
+
--ag-tooltip-background-color: #f6f8f1; /* Background color for tooltips */
|
|
8
|
+
--ag-disabled-foreground-color: gray; /* Color of disabled elements */
|
|
9
|
+
--ag-subheader-background-color: lightgray; /* Background color for second level headings */
|
|
10
|
+
--ag-subheader-toolbar-background-color: #ccc; /* Background color for toolbars under subheadings */
|
|
11
|
+
--ag-control-panel-background-color: #f5f5f5; /* Background for UI control areas */
|
|
12
|
+
--ag-side-button-selected-background-color: #007acc; /* Background for active side panel tab */
|
|
13
|
+
--ag-selected-row-background-color: #e6f7ff; /* Background color of selected rows */
|
|
14
|
+
--ag-odd-row-background-color: #f9f9f9; /* Background color applied to every other row */
|
|
15
|
+
--ag-modal-overlay-background-color: rgba(0, 0, 0, 0.5); /* Overlay background color */
|
|
16
|
+
--ag-row-hover-color: #e0e0e0; /* Background color when hovering over rows */
|
|
17
|
+
--ag-column-hover-color: #f0f0f0; /* Background color when hovering over columns */
|
|
18
|
+
--ag-range-selection-border-color: #007acc; /* Color around selected cell ranges */
|
|
19
|
+
--ag-range-selection-background-color: rgba(0, 122, 204, 0.2); /* Background color of selected cell ranges */
|
|
20
|
+
--ag-range-selection-background-color-2: rgba(0, 122, 204, 0.4); /* Background when 2 selected ranges overlap */
|
|
21
|
+
--ag-range-selection-background-color-3: rgba(0, 122, 204, 0.6); /* Background when 3 selected ranges overlap */
|
|
22
|
+
--ag-range-selection-background-color-4: rgba(0, 122, 204, 0.8); /* Background when 4+ selected ranges overlap */
|
|
23
|
+
--ag-range-selection-highlight-color: #007acc; /* Background color when copying/pasting ranges */
|
|
24
|
+
--ag-selected-tab-underline-color: #007acc; /* Color of the border under selected tabs */
|
|
25
|
+
/* --ag-borders: solid 1px grey; /* Enable borders around most UI elements */
|
|
26
|
+
/* --ag-border-color: #ccc; /* Color for border around major UI components */
|
|
27
|
+
/* --ag-borders-critical: solid 1px #ff6347; /* Enable borders critical to UX */
|
|
28
|
+
/* --ag-borders-secondary: solid 1px #eee; /* Draw decorative borders separating UI elements */
|
|
29
|
+
/* --ag-secondary-border-color: #eee; /* Color for decorative borders */
|
|
30
|
+
/* --ag-row-border-style: solid; /* Default border style for grid rows */
|
|
31
|
+
/* --ag-row-border-width: 1px; /* Thickness of the border between grid rows */
|
|
32
|
+
/* --ag-row-border-color: #ccc; /* Color of the border between grid rows
|
|
33
|
+
/* --ag-cell-horizontal-border: solid transparent; /* Default border for cells */
|
|
34
|
+
/* --ag-input-focus-border-color: #007acc; /* Border color around focused inputs */
|
|
35
|
+
/* --ag-checkbox-background-color: white; /* Background of checkboxes */
|
|
36
|
+
/* --ag-checkbox-border-radius: 3px; /* Border radius for checkboxes */
|
|
37
|
+
/* --ag-checkbox-checked-color: #007acc; /* Color of checked checkbox icon */
|
|
38
|
+
/* --ag-checkbox-unchecked-color: #ccc; /* Color of unchecked checkbox icon */
|
|
39
|
+
/* --ag-checkbox-indeterminate-color: #007acc; /* Color of indeterminate checkbox icon */
|
|
40
|
+
/* --ag-input-border-color: #ccc; /* Border color around inputs */
|
|
41
|
+
/* --ag-input-border-color-invalid: #ff6347; /* Border color around invalid inputs */
|
|
42
|
+
/* --ag-chip-background-color: #007acc; /* Background color for column drag indicator */
|
|
43
|
+
/* --ag-borders-input: solid 1px #ccc; /* Borders around inputs */
|
|
44
|
+
/* --ag-borders-input-invalid: solid 2px #ff6347; /* Borders around invalid inputs */
|
|
45
|
+
/* --ag-toggle-button-border-width: 1px; /* Thickness of the toggle button border */
|
|
46
|
+
/* --ag-toggle-button-on-border-color: #007acc; /* Border color of the toggle button in the 'on' state */
|
|
47
|
+
/* --ag-toggle-button-off-border-color: #ccc; /* Border color of the toggle button in the 'off' state */
|
|
48
|
+
/* --ag-toggle-button-on-background-color: #007acc; /* Background color of the toggle button in the 'on' state */
|
|
49
|
+
/* --ag-toggle-button-off-background-color: #ccc; /* Background color of the toggle button in the 'off' state */
|
|
50
|
+
/* --ag-toggle-button-switch-background-color: white; /* Background color of the toggle button switch */
|
|
51
|
+
/* --ag-toggle-button-switch-border-color: #ccc; /* Border color of the toggle button switch */
|
|
52
|
+
/* --ag-toggle-button-width: 40px; /* Width of the toggle button */
|
|
53
|
+
/* --ag-toggle-button-height: 20px; /* Height of the toggle button */
|
|
54
|
+
/* --ag-grid-size: 8px; /* Grid size for spacing */
|
|
55
|
+
/* --ag-icon-size: 16px; /* Size of icons */
|
|
56
|
+
/* --ag-widget-container-horizontal-padding: 8px; /* Horizontal padding for widget containers */
|
|
57
|
+
/* --ag-widget-container-vertical-padding: 8px; /* Vertical padding for widget containers */
|
|
58
|
+
/* --ag-widget-horizontal-spacing: 8px; /* Horizontal spacing between widgets */
|
|
59
|
+
/* --ag-widget-vertical-spacing: 8px; /* Vertical spacing between widgets */
|
|
60
|
+
/* --ag-cell-horizontal-padding: 8px; /* Horizontal padding for grid cells */
|
|
61
|
+
/* --ag-cell-widget-spacing: 4px; /* Horizontal spacing between widgets inside cells */
|
|
62
|
+
/* --ag-row-height: 32px; /* Height of grid rows */
|
|
63
|
+
/* --ag-header-height: 40px; /* Height of header rows */
|
|
64
|
+
/* --ag-list-item-height: 24px; /* Height of items in lists */
|
|
65
|
+
/* --ag-header-column-separator-display: block; /* Display header column separator */
|
|
66
|
+
/* --ag-header-column-separator-height: 100%; /* Height of header column separator */
|
|
67
|
+
/* --ag-header-column-separator-width: 1px; /* Width of header column separator */
|
|
68
|
+
/* --ag-header-column-separator-color: #ccc; /* Color of header column separator */
|
|
69
|
+
/* --ag-header-column-resize-handle-display: block; /* Display header column resize handle */
|
|
70
|
+
/* --ag-header-column-resize-handle-height: 100%; /* Height of header resize handle */
|
|
71
|
+
/* --ag-header-column-resize-handle-width: 10px; /* Width of header resize handle */
|
|
72
|
+
/* --ag-header-column-resize-handle-color: grey; /* Color of header resize handle */
|
|
73
|
+
/* --ag-font-family: 'Helvetica Neue', sans-serif; /* Font family for text */
|
|
74
|
+
/* --ag-font-size: 14px; /* Default font size */
|
|
75
|
+
/* --ag-icon-font-family: 'ag-Grid'; /* Icon font used by the grid */
|
|
76
|
+
/* --ag-card-radius: 4px; /* Border radius for cards */
|
|
77
|
+
/* --ag-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow for cards */
|
|
78
|
+
/* --ag-popup-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Shadow for popups */
|
|
79
|
+
}
|
|
@@ -76,6 +76,7 @@
|
|
|
76
76
|
{title: 'Alpine', value: 'ag-theme-alpine'},
|
|
77
77
|
{title: 'Balham', value: 'ag-theme-balham'},
|
|
78
78
|
{title: 'Material', value: 'ag-theme-material'},
|
|
79
|
+
{title: 'Custom', value: 'ag-theme-alpine ag-theme-custom'},
|
|
79
80
|
{title: 'Base', value: 'ag-grid'}
|
|
80
81
|
],
|
|
81
82
|
"help": "Select a theme for the grid"
|
|
@@ -1864,6 +1865,10 @@
|
|
|
1864
1865
|
"src": "../../../node_modules/ag-grid-community/styles/ag-theme-material.css",
|
|
1865
1866
|
"dst": "css/ag-theme-material.css"
|
|
1866
1867
|
},
|
|
1868
|
+
{
|
|
1869
|
+
"src": "ag-theme-custom.css",
|
|
1870
|
+
"dst": "css/ag-theme-custom.css"
|
|
1871
|
+
},
|
|
1867
1872
|
{
|
|
1868
1873
|
"src": "switch-toggle-slider.css",
|
|
1869
1874
|
"dst": "css/switch-toggle-slider.css"
|
|
@@ -1905,6 +1910,10 @@
|
|
|
1905
1910
|
"src": "css/ag-theme-material.css",
|
|
1906
1911
|
"type": "css"
|
|
1907
1912
|
},
|
|
1913
|
+
{
|
|
1914
|
+
"src": "css/ag-theme-custom.css",
|
|
1915
|
+
"type": "css"
|
|
1916
|
+
},
|
|
1908
1917
|
{
|
|
1909
1918
|
"src": "css/switch-toggle-slider.css",
|
|
1910
1919
|
"type": "css"
|