@vue-ui-kit/ant 2.2.2 → 2.3.1

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.
@@ -10,6 +10,7 @@ export interface UIKitConfig {
10
10
  lazyReset?: boolean;
11
11
  fitHeight?: number;
12
12
  fitCanvasHeight?: number;
13
+ striped?: boolean;
13
14
  };
14
15
  canvasTable?: ConfigType;
15
16
  }
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";:root{--p-theme-bg: #fff;--collapsible-card-body-padding: 12px}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.text-slate-5{color:#64748b}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.pl-4x{padding-left:1em}.pl-8{padding-left:2em}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .p-canvas-pagination.ant-pagination{padding:16px 0}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#d9d9d9!important}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:#4096ff!important}.p-wrapper .p-error-hang-out .ant-form-item-explain-error{opacity:0!important;transform:translateY(-10px)!important;max-height:0!important;overflow:hidden!important;transition:none!important}.p-wrapper .ant-form-item-explain-error{opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden;transition:opacity .3s ease-out .3s,transform .3s ease-out .3s,max-height .3s ease-out .3s}.p-wrapper .ant-form-item-has-error .ant-form-item-explain-error{opacity:1;transform:translateY(0);max-height:100px}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .p-canvas-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .h-lack .ant-table-wrapper .ant-table-pagination.ant-pagination{padding:unset;margin-top:8px}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{flex:1;height:0;overflow-y:hidden;border-radius:unset}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-container>.ant-table-body{position:relative}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-wrapper .ant-table-cell:not(.normal-break){word-break:break-all}.p-error-group-tab{position:relative;overflow:visible;color:#f5222d!important}.p-error-group-tab:after{content:"🏷️";position:absolute;top:-1em;right:0;width:1em;height:1em;font-size:.8em;animation:heartbeat 2s infinite}.ant-picker-dropdown .ant-picker-footer{padding-left:4px}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#d9d9d9!important}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:#4096ff!important}.p-error-hang-out .ant-form-item-explain-error{display:none}.no-error-border{border-color:#d9d9d9!important}.no-error-border:focus{border-color:#4096ff!important}@media (max-width: 575px){.p-wrapper .ant-form .ant-form-item .ant-form-item-label{justify-content:flex-start}}.collapsible-card{background-color:#fff;border-color:#f0f0f0}.collapsible-card .ant-collapse-header{padding:0 12px;min-height:38px;display:flex;align-items:center;font-weight:600}.collapsible-card .ant-collapse-content{border-color:#f0f0f0}.collapsible-card .ant-collapse-content .ant-collapse-content-box{padding:var(--collapsible-card-body-padding, 12px)}.collapsible-card .ant-collapse-item{border-color:#f0f0f0}.canvas-cell{display:flex;flex-direction:column;justify-content:center;align-items:start;padding:0 8px}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}@keyframes heartbeat{0%{transform:scale(1)}6%{transform:scale(1.22)}12%{transform:scale(1)}18%{transform:scale(1.18)}24%{transform:scale(1)}48%{transform:scale(1)}54%{transform:scale(1.22)}60%{transform:scale(1)}66%{transform:scale(1.18)}72%{transform:scale(1)}to{transform:scale(1)}}
1
+ @charset "UTF-8";.p-pane{background-color:var(--p-theme-bg, #fff);padding:16px;border-radius:4px}.text-slate-5{color:#64748b}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.pl-4x{padding-left:1em}.pl-8{padding-left:2em}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg, #fff)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .p-canvas-pagination.ant-pagination{padding:16px 0}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:var(--p-border-color, #d9d9d9)!important}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:var(--p-primary-color, #4096ff)!important}.p-wrapper .p-error-hang-out .ant-form-item-explain-error{opacity:0!important;transform:translateY(-10px)!important;max-height:0!important;overflow:hidden!important;transition:none!important}.p-wrapper .ant-form-item-explain-error{opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden;transition:opacity .3s ease-out .3s,transform .3s ease-out .3s,max-height .3s ease-out .3s}.p-wrapper .ant-form-item-has-error .ant-form-item-explain-error{opacity:1;transform:translateY(0);max-height:100px}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px var(--p-bg-color, #fff);border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .p-canvas-toolbar-wrapper{box-shadow:0 8px var(--p-bg-color, #fff);border-radius:.5em .5em 0 0}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:var(--p-danger-color, #ff4d4f);font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-wrapper .ant-table{background-color:var(--p-table-row-bg-color, #fff)}.p-wrapper .ant-table-wrapper .ant-table-tbody>tr>td.ant-table-cell-row-hover{background-color:var(--p-table-row-hover-bg-color, #e6e7ea)}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .ant-table-wrapper tr.p-grid-row-striped{background-color:var(--p-striped-bg-color, #f2f3f6)}.p-wrapper .ant-table-wrapper .ant-table-thead>tr>th{background-color:var(--p-table-thead-bg-color, #f2f3f6)}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item{border:1px solid var(--p-pagination-border-color, #bbbdbf)}.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item:not(.ant-pagination-item-active){background-color:var(--p-pagination-bg-color, #fff)}.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item:not(.ant-pagination-item-active)>a{color:var(--p-pagination-color, #323335)}.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item:not(.ant-pagination-item-active):hover{background-color:var(--p-pagination-hover-bg-color, #4d4d4d)}.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item:not(.ant-pagination-item-active):hover>a{color:var(--p-pagination-active-color, #fff)}.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item.ant-pagination-item-active{background-color:var(--p-pagination-active-bg-color, #323335)}.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item.ant-pagination-item-active>a{color:var(--p-pagination-active-color, #fff)}.p-wrapper .h-lack .ant-table-wrapper .ant-table-pagination.ant-pagination{padding:unset;margin-top:8px}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{flex:1;height:0;overflow-y:hidden;border-radius:unset}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-container>.ant-table-body{position:relative}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-wrapper .ant-table-cell:not(.normal-break){word-break:break-all}.p-error-group-tab{position:relative;overflow:visible;color:var(--p-danger-color, #f5222d)!important}.p-error-group-tab:after{content:"🏷️";position:absolute;top:-1em;right:0;width:1em;height:1em;font-size:.8em;animation:heartbeat 2s infinite}.ant-picker-dropdown .ant-picker-footer{padding-left:4px}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:var(--p-border-color, #d9d9d9)!important}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:var(--p-primary-color, #4096ff)!important}.p-error-hang-out .ant-form-item-explain-error{display:none}.no-error-border{border-color:var(--p-border-color, #d9d9d9)!important}.no-error-border:focus{border-color:var(--p-primary-color, #4096ff)!important}@media (max-width: 575px){.p-wrapper .ant-form .ant-form-item .ant-form-item-label{justify-content:flex-start}}.collapsible-card{background-color:var(--p-bg-color, #fff);border-color:var(--p-border-light-color, #f0f0f0)}.collapsible-card .ant-collapse-header{padding:0 12px;min-height:38px;display:flex;align-items:center;font-weight:600}.collapsible-card .ant-collapse-content{border-color:var(--p-border-light-color, #f0f0f0)}.collapsible-card .ant-collapse-content .ant-collapse-content-box{padding:var(--collapsible-card-body-padding, 12px)}.collapsible-card .ant-collapse-item{border-color:var(--p-border-light-color, #f0f0f0)}.canvas-cell{display:flex;flex-direction:column;justify-content:center;align-items:start;padding:0 8px}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}@keyframes heartbeat{0%{transform:scale(1)}6%{transform:scale(1.22)}12%{transform:scale(1)}18%{transform:scale(1.18)}24%{transform:scale(1)}48%{transform:scale(1)}54%{transform:scale(1.22)}60%{transform:scale(1)}66%{transform:scale(1.18)}72%{transform:scale(1)}to{transform:scale(1)}}
package/dist/style.scss CHANGED
@@ -1,12 +1,5 @@
1
- // Variables inlined for npm distribution
2
- :root {
3
- --p-theme-bg: #fff;
4
- --collapsible-card-body-padding: 12px;
5
- }
6
-
7
-
8
1
  .p-pane {
9
- background-color: var(--p-theme-bg);
2
+ background-color: var(--p-theme-bg, #fff);
10
3
  padding: 16px;
11
4
  border-radius: 4px;
12
5
  }
@@ -99,7 +92,7 @@
99
92
 
100
93
  /* #region P family styles */
101
94
  .p-theme-bg {
102
- background-color: var(--p-theme-bg);
95
+ background-color: var(--p-theme-bg, #fff);
103
96
  }
104
97
 
105
98
  .p-wrapper {
@@ -113,10 +106,10 @@
113
106
  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
114
107
  .ant-input-affix-wrapper-borderless
115
108
  ).ant-input-affix-wrapper {
116
- border-color: #d9d9d9 !important;
109
+ border-color: var(--p-border-color, #d9d9d9) !important;
117
110
 
118
111
  &:focus {
119
- border-color: #4096ff !important;
112
+ border-color: var(--p-primary-color, #4096ff) !important;
120
113
  }
121
114
  }
122
115
  .ant-form-item-explain-error {
@@ -143,12 +136,12 @@
143
136
  max-height: 100px;
144
137
  }
145
138
  .p-toolbar-wrapper {
146
- box-shadow: 0 8px #fff;
139
+ box-shadow: 0 8px var(--p-bg-color, #fff);
147
140
  border-radius: 0.5em 0.5em 0 0;
148
141
  margin-bottom: -0.5em;
149
142
  }
150
143
  .p-canvas-toolbar-wrapper {
151
- box-shadow: 0 8px #fff;
144
+ box-shadow: 0 8px var(--p-bg-color, #fff);
152
145
  border-radius: 0.5em 0.5em 0 0;
153
146
  }
154
147
 
@@ -160,7 +153,7 @@
160
153
  .ant-form-item-label > label:before {
161
154
  display: inline-block;
162
155
  margin-inline-end: 4px;
163
- color: #ff4d4f;
156
+ color: var(--p-danger-color, #ff4d4f);
164
157
  font-size: 14px;
165
158
  font-family: SimSun, sans-serif;
166
159
  line-height: 1;
@@ -196,7 +189,22 @@
196
189
  }
197
190
  }
198
191
  }
199
-
192
+ .ant-table-wrapper .ant-table {
193
+ background-color: var(--p-table-row-bg-color, #fff);
194
+ }
195
+ .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover {
196
+ background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
197
+ }
198
+ .ant-table-wrapper .ant-table-pagination.ant-pagination {
199
+ margin: unset;
200
+ padding: 16px 0;
201
+ }
202
+ .ant-table-wrapper tr.p-grid-row-striped {
203
+ background-color: var(--p-striped-bg-color, #f2f3f6);
204
+ }
205
+ .ant-table-wrapper .ant-table-thead > tr > th {
206
+ background-color: var(--p-table-thead-bg-color, #f2f3f6);
207
+ }
200
208
  .ant-table-sticky-scroll {
201
209
  visibility: hidden;
202
210
  }
@@ -214,11 +222,30 @@
214
222
  top: -16px;
215
223
  }
216
224
  }
217
-
218
- .ant-table-wrapper .ant-table-pagination.ant-pagination {
219
- margin: unset;
220
- padding: 16px 0;
225
+ .ant-table-wrapper .ant-pagination {
226
+ .ant-pagination-item {
227
+ border: 1px solid var(--p-pagination-border-color, #bbbdbf);
228
+ &:not(.ant-pagination-item-active) {
229
+ background-color: var(--p-pagination-bg-color, #fff);
230
+ & > a {
231
+ color: var(--p-pagination-color, #323335);
232
+ }
233
+ &:hover {
234
+ background-color: var(--p-pagination-hover-bg-color, #4d4d4d);
235
+ & > a {
236
+ color: var(--p-pagination-active-color, #fff);
237
+ }
238
+ }
239
+ }
240
+ &.ant-pagination-item-active {
241
+ background-color: var(--p-pagination-active-bg-color, #323335);
242
+ & > a {
243
+ color: var(--p-pagination-active-color, #fff);
244
+ }
245
+ }
246
+ }
221
247
  }
248
+
222
249
  .h-lack {
223
250
  .ant-table-wrapper .ant-table-pagination.ant-pagination {
224
251
  padding: unset;
@@ -265,7 +292,7 @@
265
292
  .p-error-group-tab {
266
293
  position: relative;
267
294
  overflow: visible;
268
- color: #f5222d !important;
295
+ color: var(--p-danger-color, #f5222d) !important;
269
296
  &:after {
270
297
  content: '🏷️';
271
298
  position: absolute;
@@ -286,10 +313,10 @@
286
313
  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
287
314
  .ant-input-affix-wrapper-borderless
288
315
  ).ant-input-affix-wrapper {
289
- border-color: #d9d9d9 !important;
316
+ border-color: var(--p-border-color, #d9d9d9) !important;
290
317
 
291
318
  &:focus {
292
- border-color: #4096ff !important;
319
+ border-color: var(--p-primary-color, #4096ff) !important;
293
320
  }
294
321
  }
295
322
  .ant-form-item-explain-error {
@@ -298,10 +325,10 @@
298
325
  }
299
326
 
300
327
  .no-error-border {
301
- border-color: #d9d9d9 !important;
328
+ border-color: var(--p-border-color, #d9d9d9) !important;
302
329
 
303
330
  &:focus {
304
- border-color: #4096ff !important;
331
+ border-color: var(--p-primary-color, #4096ff) !important;
305
332
  }
306
333
  }
307
334
  @media (max-width: 575px) {
@@ -311,8 +338,8 @@
311
338
  }
312
339
 
313
340
  .collapsible-card {
314
- background-color: #fff;
315
- border-color: #f0f0f0;
341
+ background-color: var(--p-bg-color, #fff);
342
+ border-color: var(--p-border-light-color, #f0f0f0);
316
343
  .ant-collapse-header {
317
344
  padding: 0 12px;
318
345
  min-height: 38px;
@@ -321,13 +348,13 @@
321
348
  font-weight: 600;
322
349
  }
323
350
  .ant-collapse-content {
324
- border-color: #f0f0f0;
351
+ border-color: var(--p-border-light-color, #f0f0f0);
325
352
  .ant-collapse-content-box {
326
353
  padding: var(--collapsible-card-body-padding, 12px);
327
354
  }
328
355
  }
329
356
  .ant-collapse-item {
330
- border-color: #f0f0f0;
357
+ border-color: var(--p-border-light-color, #f0f0f0);
331
358
  }
332
359
  }
333
360
  /* #endregion */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vue-ui-kit/ant",
3
- "version": "2.2.2",
3
+ "version": "2.3.1",
4
4
  "description": "Vue3 UI Kit based on Ant Design",
5
5
  "type": "module",
6
6
  "main": "./dist/cjs/index.js",
@@ -216,6 +216,7 @@ export interface SelectConfig<D extends Recordable = Recordable> {
216
216
  export type PGridProps<D extends Recordable = Recordable, F extends Recordable = Recordable> = {
217
217
  selectConfig?: SelectConfig<D>;
218
218
  rowKey?: string;
219
+ striped?: boolean;
219
220
  manualFetch?: boolean;
220
221
  align?: 'left' | 'right' | 'center';
221
222
  formConfig?: PFormProps<F>;
@@ -55,6 +55,7 @@
55
55
  align: () => getGridDefaults().align ?? 'left',
56
56
  lazyReset: () => getGridDefaults().lazyReset ?? false,
57
57
  fitHeight: () => getGridDefaults().fitHeight ?? 170,
58
+ striped: () => getGridDefaults().striped ?? false,
58
59
  });
59
60
 
60
61
  const {
@@ -607,6 +608,9 @@
607
608
  :key="renderTableKey + '_table'"
608
609
  :row-key="rowKey ?? 'id'"
609
610
  ref="tableEl"
611
+ :row-class-name="
612
+ striped ? (_record, index) => (index % 2 === 1 ? 'p-grid-row-striped' : '') : ''
613
+ "
610
614
  :columns="passDefaultColumnProps(columns ?? []).map((c) => cleanCol(c as ColumnProps))"
611
615
  :data-source="tableData"
612
616
  :loading="loading.table"
@@ -1,7 +1,5 @@
1
- @use 'variables';
2
-
3
1
  .p-pane {
4
- background-color: var(--p-theme-bg);
2
+ background-color: var(--p-theme-bg, #fff);
5
3
  padding: 16px;
6
4
  border-radius: 4px;
7
5
  }
@@ -94,7 +92,7 @@
94
92
 
95
93
  /* #region P family styles */
96
94
  .p-theme-bg {
97
- background-color: var(--p-theme-bg);
95
+ background-color: var(--p-theme-bg, #fff);
98
96
  }
99
97
 
100
98
  .p-wrapper {
@@ -108,10 +106,10 @@
108
106
  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
109
107
  .ant-input-affix-wrapper-borderless
110
108
  ).ant-input-affix-wrapper {
111
- border-color: #d9d9d9 !important;
109
+ border-color: var(--p-border-color, #d9d9d9) !important;
112
110
 
113
111
  &:focus {
114
- border-color: #4096ff !important;
112
+ border-color: var(--p-primary-color, #4096ff) !important;
115
113
  }
116
114
  }
117
115
  .ant-form-item-explain-error {
@@ -138,12 +136,12 @@
138
136
  max-height: 100px;
139
137
  }
140
138
  .p-toolbar-wrapper {
141
- box-shadow: 0 8px #fff;
139
+ box-shadow: 0 8px var(--p-bg-color, #fff);
142
140
  border-radius: 0.5em 0.5em 0 0;
143
141
  margin-bottom: -0.5em;
144
142
  }
145
143
  .p-canvas-toolbar-wrapper {
146
- box-shadow: 0 8px #fff;
144
+ box-shadow: 0 8px var(--p-bg-color, #fff);
147
145
  border-radius: 0.5em 0.5em 0 0;
148
146
  }
149
147
 
@@ -155,7 +153,7 @@
155
153
  .ant-form-item-label > label:before {
156
154
  display: inline-block;
157
155
  margin-inline-end: 4px;
158
- color: #ff4d4f;
156
+ color: var(--p-danger-color, #ff4d4f);
159
157
  font-size: 14px;
160
158
  font-family: SimSun, sans-serif;
161
159
  line-height: 1;
@@ -191,7 +189,22 @@
191
189
  }
192
190
  }
193
191
  }
194
-
192
+ .ant-table-wrapper .ant-table {
193
+ background-color: var(--p-table-row-bg-color, #fff);
194
+ }
195
+ .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover {
196
+ background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
197
+ }
198
+ .ant-table-wrapper .ant-table-pagination.ant-pagination {
199
+ margin: unset;
200
+ padding: 16px 0;
201
+ }
202
+ .ant-table-wrapper tr.p-grid-row-striped {
203
+ background-color: var(--p-striped-bg-color, #f2f3f6);
204
+ }
205
+ .ant-table-wrapper .ant-table-thead > tr > th {
206
+ background-color: var(--p-table-thead-bg-color, #f2f3f6);
207
+ }
195
208
  .ant-table-sticky-scroll {
196
209
  visibility: hidden;
197
210
  }
@@ -209,11 +222,30 @@
209
222
  top: -16px;
210
223
  }
211
224
  }
212
-
213
- .ant-table-wrapper .ant-table-pagination.ant-pagination {
214
- margin: unset;
215
- padding: 16px 0;
225
+ .ant-table-wrapper .ant-pagination {
226
+ .ant-pagination-item {
227
+ border: 1px solid var(--p-pagination-border-color, #bbbdbf);
228
+ &:not(.ant-pagination-item-active) {
229
+ background-color: var(--p-pagination-bg-color, #fff);
230
+ & > a {
231
+ color: var(--p-pagination-color, #323335);
232
+ }
233
+ &:hover {
234
+ background-color: var(--p-pagination-hover-bg-color, #4d4d4d);
235
+ & > a {
236
+ color: var(--p-pagination-active-color, #fff);
237
+ }
238
+ }
239
+ }
240
+ &.ant-pagination-item-active {
241
+ background-color: var(--p-pagination-active-bg-color, #323335);
242
+ & > a {
243
+ color: var(--p-pagination-active-color, #fff);
244
+ }
245
+ }
246
+ }
216
247
  }
248
+
217
249
  .h-lack {
218
250
  .ant-table-wrapper .ant-table-pagination.ant-pagination {
219
251
  padding: unset;
@@ -260,7 +292,7 @@
260
292
  .p-error-group-tab {
261
293
  position: relative;
262
294
  overflow: visible;
263
- color: #f5222d !important;
295
+ color: var(--p-danger-color, #f5222d) !important;
264
296
  &:after {
265
297
  content: '🏷️';
266
298
  position: absolute;
@@ -281,10 +313,10 @@
281
313
  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
282
314
  .ant-input-affix-wrapper-borderless
283
315
  ).ant-input-affix-wrapper {
284
- border-color: #d9d9d9 !important;
316
+ border-color: var(--p-border-color, #d9d9d9) !important;
285
317
 
286
318
  &:focus {
287
- border-color: #4096ff !important;
319
+ border-color: var(--p-primary-color, #4096ff) !important;
288
320
  }
289
321
  }
290
322
  .ant-form-item-explain-error {
@@ -293,10 +325,10 @@
293
325
  }
294
326
 
295
327
  .no-error-border {
296
- border-color: #d9d9d9 !important;
328
+ border-color: var(--p-border-color, #d9d9d9) !important;
297
329
 
298
330
  &:focus {
299
- border-color: #4096ff !important;
331
+ border-color: var(--p-primary-color, #4096ff) !important;
300
332
  }
301
333
  }
302
334
  @media (max-width: 575px) {
@@ -306,8 +338,8 @@
306
338
  }
307
339
 
308
340
  .collapsible-card {
309
- background-color: #fff;
310
- border-color: #f0f0f0;
341
+ background-color: var(--p-bg-color, #fff);
342
+ border-color: var(--p-border-light-color, #f0f0f0);
311
343
  .ant-collapse-header {
312
344
  padding: 0 12px;
313
345
  min-height: 38px;
@@ -316,13 +348,13 @@
316
348
  font-weight: 600;
317
349
  }
318
350
  .ant-collapse-content {
319
- border-color: #f0f0f0;
351
+ border-color: var(--p-border-light-color, #f0f0f0);
320
352
  .ant-collapse-content-box {
321
353
  padding: var(--collapsible-card-body-padding, 12px);
322
354
  }
323
355
  }
324
356
  .ant-collapse-item {
325
- border-color: #f0f0f0;
357
+ border-color: var(--p-border-light-color, #f0f0f0);
326
358
  }
327
359
  }
328
360
  /* #endregion */
@@ -13,6 +13,7 @@ export interface UIKitConfig {
13
13
  lazyReset?: boolean;
14
14
  fitHeight?: number;
15
15
  fitCanvasHeight?: number;
16
+ striped?: boolean;
16
17
  };
17
18
  canvasTable?: ConfigType;
18
19
  }
@@ -27,6 +28,7 @@ const defaultConfig: UIKitConfig = {
27
28
  align: 'left',
28
29
  lazyReset: false,
29
30
  fitHeight: 170,
31
+ striped: false,
30
32
  },
31
33
  canvasTable: {
32
34
  DISABLED: true,
@@ -73,6 +75,7 @@ export function getGridDefaults(): Partial<PGridProps> {
73
75
  align: currentConfig.grid?.align,
74
76
  lazyReset: currentConfig.grid?.lazyReset,
75
77
  fitHeight: currentConfig.grid?.fitHeight,
78
+ striped: currentConfig.grid?.striped,
76
79
  };
77
80
  }
78
81
 
@@ -1,4 +0,0 @@
1
- :root {
2
- --p-theme-bg: #fff;
3
- --collapsible-card-body-padding: 12px;
4
- }