@vue-ui-kit/ant 2.0.2 → 2.0.4

package/dist/packages/components/RenderItemSlots.d.ts

@@ -1,11 +1,11 @@
 declare const _default: import('vue').DefineSetupFnComponent<{
-    formData: any;
     item: any;
+    formData: any;
     passTrigger: any;
     passDelayTrigger: any;
 }, {}, {}, {
-    formData: any;
     item: any;
+    formData: any;
     passTrigger: any;
     passDelayTrigger: any;
 } & {}, import('vue').PublicProps>;

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

@@ -1,4 +1,5 @@
 import { PFormProps, PGridProps } from '../../declarations/antProxy';
+import { ConfigType } from 'e-virt-table';
 export interface UIKitConfig {
     form?: {
         labelCol?: any;
@@ -8,10 +9,13 @@ export interface UIKitConfig {
         align?: 'left' | 'right' | 'center';
         lazyReset?: boolean;
         fitHeight?: number;
+        fitCanvasHeight?: number;
     };
+    canvasTable?: ConfigType;
 }
 export declare function setUIKitConfig(config: Partial<UIKitConfig>): void;
 export declare function getUIKitConfig(): UIKitConfig;
 export declare function getFormDefaults(): Partial<PFormProps>;
 export declare function getGridDefaults(): Partial<PGridProps>;
+export declare function getCanvasTableDefaults(): ConfigType;
 export declare function resetUIKitConfig(): void;

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";:root{--p-theme-bg: #fff}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.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-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 .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 .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{border-radius:unset}.p-wrapper .ant-pagination-options .ant-select{width:100px}.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}.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}.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";:root{--p-theme-bg: #fff}.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}}.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

@@ -9,8 +9,10 @@
   padding: 16px;
   border-radius: 4px;
 }
-
-//region patch for env without unocss/tailwind/windicss
+.text-slate-5 {
+  color: #64748b;
+}
+/* #region patch for env without unocss/tailwind/windicss */
 .w-full {
   width: 100%;
 }
@@ -92,9 +94,9 @@
   overflow-y: auto;
 }
 
-//endregion
+/* #endregion */
 
-//region P family styles
+/* #region P family styles */
 .p-theme-bg {
   background-color: var(--p-theme-bg);
 }
@@ -103,6 +105,9 @@
   .p-form-wrapper {
     z-index: 4;
   }
+  .p-canvas-pagination.ant-pagination {
+    padding: 16px 0;
+  }
   .p-error-hang-out {
     .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
         .ant-input-affix-wrapper-borderless
@@ -141,6 +146,10 @@
     border-radius: 0.5em 0.5em 0 0;
     margin-bottom: -0.5em;
   }
+  .p-canvas-toolbar-wrapper {
+    box-shadow: 0 8px #fff;
+    border-radius: 0.5em 0.5em 0 0;
+  }
 
   .ant-form {
     .ant-form-item {
@@ -209,7 +218,12 @@
     margin: unset;
     padding: 16px 0;
   }
-
+  .h-lack {
+    .ant-table-wrapper .ant-table-pagination.ant-pagination {
+      padding: unset;
+      margin-top: 8px;
+    }
+  }
   .p-inner-scroll {
     & > .ant-table-wrapper {
       height: 100%;
@@ -223,11 +237,15 @@
           flex-direction: column;
 
           & > .ant-table {
-            //flex: 1;
-            //height: 0;
-            //overflow: auto;
+            flex: 1;
+            height: 0;
+            overflow-y: hidden;
             /*border-radius: unset; 修复模糊问题 according to https://stackoverflow.com/questions/49349337/chrome-text-blur-with-overflow-yscroll-and-fixed-height*/
             border-radius: unset;
+
+            & > .ant-table-container > .ant-table-body {
+              position: relative;
+            }
           }
         }
       }
@@ -239,6 +257,9 @@
       width: 100px;
     }
   }
+  .ant-table-cell:not(.normal-break) {
+    word-break: break-all;
+  }
 }
 .p-error-group-tab {
   position: relative;
@@ -255,6 +276,11 @@
     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
@@ -269,6 +295,7 @@
     display: none;
   }
 }
+
 .no-error-border {
   border-color: #d9d9d9 !important;
 
@@ -276,10 +303,17 @@
     border-color: #4096ff !important;
   }
 }
-//endregion
+@media (max-width: 575px) {
+  .p-wrapper .ant-form .ant-form-item .ant-form-item-label {
+    justify-content: flex-start;
+  }
+}
+/* #endregion */
 
 /* #region EVirtTable */
-
+// .canvas-cell{
+// tbd
+// }
 /* #endregion */
 
 @each $align in right center {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -14,12 +14,8 @@
       "import": "./dist/es/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./style": "./dist/style.css",
     "./style.css": "./dist/style.css",
-    "./style.scss": "./dist/style.scss",
-    "./dist/style.css": "./dist/style.css",
-    "./dist/style.scss": "./dist/style.scss",
-    "./package.json": "./package.json"
+    "./style.scss": "./src/packages/styles/index.scss"
   },
   "files": [
     "dist",

package/src/declarations/antProxy.ts

@@ -226,6 +226,10 @@ export type PGridProps<D extends Recordable = Recordable, F extends Recordable =
    * 适应展示区到页面顶部的高度，通常和容器最上的y值有关（正比）
    */
   fitHeight?: number;
+  /**
+   * 适应展示区到页面顶部的canvas渲染高度 通常比table的小
+   */
+  fitCanvasHeight?: number;
   /**
    * 虚拟列表 Y区计算高度
    */
@@ -325,10 +329,30 @@ export interface CanvasTableProps<
 > {
   columns: CanvasColumnProps<T>[];
   data: T[];
-  config: ConfigType;
+  config?: ConfigType;
   footerData?: B[];
   loading?: boolean;
 }
+
+export interface PCanvasGridProps<
+  D extends Recordable = Recordable,
+  F extends Recordable = Recordable,
+> {
+  selectConfig?: SelectConfig<D>;
+  manualFetch?: boolean;
+  formConfig?: PFormProps<F>;
+  columns: CanvasColumnProps<D>[];
+  toolbarConfig?: ToolbarConfig;
+  pageConfig?: PageConfig;
+  proxyConfig?: ProxyConfig<D, F>;
+  config?: ConfigType;
+  // 重置后不自动提交
+  lazyReset?: boolean;
+  /**
+   * 适应展示区到页面顶部的高度，通常和容器最上的y值有关（正比）
+   */
+  fitHeight?: number;
+}
 export interface PGridInstance<
   D extends Recordable = Recordable,
   F extends Recordable = Recordable,
@@ -375,4 +399,5 @@ export interface PFormGroupInstance {
 export interface PCanvasTableInstance<T extends Recordable = Recordable> {
   $table: InstanceType<typeof EVirtTable>;
   selectedRecords: T[];
+  setLoading: (value: boolean) => void;
 }