@vue-ui-kit/ant 2.3.0 → 2.3.1

package/dist/packages/utils/config.d.ts

@@ -10,6 +10,7 @@ export interface UIKitConfig {
         lazyReset?: boolean;
         fitHeight?: number;
         fitCanvasHeight?: number;
+        striped?: boolean;
     };
     canvasTable?: ConfigType;
 }

package/dist/style.css

@@ -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-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: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)}}
+@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

@@ -189,7 +189,22 @@
       }
     }
   }
-
+  .ant-table-wrapper .ant-table {
+    background-color: var(--p-table-row-bg-color, #fff);
+  }
+  .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover {
+    background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
+  }
+  .ant-table-wrapper .ant-table-pagination.ant-pagination {
+    margin: unset;
+    padding: 16px 0;
+  }
+  .ant-table-wrapper tr.p-grid-row-striped {
+    background-color: var(--p-striped-bg-color, #f2f3f6);
+  }
+  .ant-table-wrapper .ant-table-thead > tr > th {
+    background-color: var(--p-table-thead-bg-color, #f2f3f6);
+  }
   .ant-table-sticky-scroll {
     visibility: hidden;
   }
@@ -207,11 +222,30 @@
       top: -16px;
     }
   }
-
-  .ant-table-wrapper .ant-table-pagination.ant-pagination {
-    margin: unset;
-    padding: 16px 0;
+  .ant-table-wrapper .ant-pagination {
+    .ant-pagination-item {
+      border: 1px solid var(--p-pagination-border-color, #bbbdbf);
+      &:not(.ant-pagination-item-active) {
+        background-color: var(--p-pagination-bg-color, #fff);
+        & > a {
+          color: var(--p-pagination-color, #323335);
+        }
+        &:hover {
+          background-color: var(--p-pagination-hover-bg-color, #4d4d4d);
+          & > a {
+            color: var(--p-pagination-active-color, #fff);
+          }
+        }
+      }
+      &.ant-pagination-item-active {
+        background-color: var(--p-pagination-active-bg-color, #323335);
+        & > a {
+          color: var(--p-pagination-active-color, #fff);
+        }
+      }
+    }
   }
+
   .h-lack {
     .ant-table-wrapper .ant-table-pagination.ant-pagination {
       padding: unset;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/declarations/antProxy.ts

@@ -216,6 +216,7 @@ export interface SelectConfig<D extends Recordable = Recordable> {
 export type PGridProps<D extends Recordable = Recordable, F extends Recordable = Recordable> = {
   selectConfig?: SelectConfig<D>;
   rowKey?: string;
+  striped?: boolean;
   manualFetch?: boolean;
   align?: 'left' | 'right' | 'center';
   formConfig?: PFormProps<F>;

package/src/packages/components/PGrid.vue

@@ -55,6 +55,7 @@
     align: () => getGridDefaults().align ?? 'left',
     lazyReset: () => getGridDefaults().lazyReset ?? false,
     fitHeight: () => getGridDefaults().fitHeight ?? 170,
+    striped: () => getGridDefaults().striped ?? false,
   });
 
   const {
@@ -607,6 +608,9 @@
           :key="renderTableKey + '_table'"
           :row-key="rowKey ?? 'id'"
           ref="tableEl"
+          :row-class-name="
+            striped ? (_record, index) => (index % 2 === 1 ? 'p-grid-row-striped' : '') : ''
+          "
           :columns="passDefaultColumnProps(columns ?? []).map((c) => cleanCol(c as ColumnProps))"
           :data-source="tableData"
           :loading="loading.table"

package/src/packages/styles/index.scss

@@ -189,7 +189,22 @@
       }
     }
   }
-
+  .ant-table-wrapper .ant-table {
+    background-color: var(--p-table-row-bg-color, #fff);
+  }
+  .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover {
+    background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
+  }
+  .ant-table-wrapper .ant-table-pagination.ant-pagination {
+    margin: unset;
+    padding: 16px 0;
+  }
+  .ant-table-wrapper tr.p-grid-row-striped {
+    background-color: var(--p-striped-bg-color, #f2f3f6);
+  }
+  .ant-table-wrapper .ant-table-thead > tr > th {
+    background-color: var(--p-table-thead-bg-color, #f2f3f6);
+  }
   .ant-table-sticky-scroll {
     visibility: hidden;
   }
@@ -207,11 +222,30 @@
       top: -16px;
     }
   }
-
-  .ant-table-wrapper .ant-table-pagination.ant-pagination {
-    margin: unset;
-    padding: 16px 0;
+  .ant-table-wrapper .ant-pagination {
+    .ant-pagination-item {
+      border: 1px solid var(--p-pagination-border-color, #bbbdbf);
+      &:not(.ant-pagination-item-active) {
+        background-color: var(--p-pagination-bg-color, #fff);
+        & > a {
+          color: var(--p-pagination-color, #323335);
+        }
+        &:hover {
+          background-color: var(--p-pagination-hover-bg-color, #4d4d4d);
+          & > a {
+            color: var(--p-pagination-active-color, #fff);
+          }
+        }
+      }
+      &.ant-pagination-item-active {
+        background-color: var(--p-pagination-active-bg-color, #323335);
+        & > a {
+          color: var(--p-pagination-active-color, #fff);
+        }
+      }
+    }
   }
+
   .h-lack {
     .ant-table-wrapper .ant-table-pagination.ant-pagination {
       padding: unset;

package/src/packages/utils/config.ts

@@ -13,6 +13,7 @@ export interface UIKitConfig {
     lazyReset?: boolean;
     fitHeight?: number;
     fitCanvasHeight?: number;
+    striped?: boolean;
   };
   canvasTable?: ConfigType;
 }
@@ -27,6 +28,7 @@ const defaultConfig: UIKitConfig = {
     align: 'left',
     lazyReset: false,
     fitHeight: 170,
+    striped: false,
   },
   canvasTable: {
     DISABLED: true,
@@ -73,6 +75,7 @@ export function getGridDefaults(): Partial<PGridProps> {
     align: currentConfig.grid?.align,
     lazyReset: currentConfig.grid?.lazyReset,
     fitHeight: currentConfig.grid?.fitHeight,
+    striped: currentConfig.grid?.striped,
   };
 }