@vue-ui-kit/ant 2.0.1 → 2.0.3

package/dist/packages/components/PCanvasTable.vue.d.ts

@@ -8,6 +8,7 @@ declare const _default: <T extends Recordable = Recordable, B extends Recordable
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onChange" | "onReady"> & CanvasTableProps<T, B> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         $table: null;
+        selectedRecords: import('vue').ComputedRef<import('@vue/reactivity').UnwrapRefSimple<T>[]>;
     }>): void;
     attrs: any;
     slots: Partial<Record<string, (_: {

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}.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 .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

@@ -209,7 +209,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 +228,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 +248,9 @@
       width: 100px;
     }
   }
+  .ant-table-cell:not(.normal-break) {
+    word-break: break-all;
+  }
 }
 .p-error-group-tab {
   position: relative;
@@ -255,6 +267,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 +286,7 @@
     display: none;
   }
 }
+
 .no-error-border {
   border-color: #d9d9d9 !important;
 
@@ -276,6 +294,11 @@
     border-color: #4096ff !important;
   }
 }
+@media (max-width: 575px) {
+  .p-wrapper .ant-form .ant-form-item .ant-form-item-label {
+    justify-content: flex-start;
+  }
+}
 //endregion
 
 /* #region EVirtTable */

package/package.json

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

package/src/declarations/antProxy.ts

@@ -5,6 +5,7 @@ import { FormProps } from 'ant-design-vue/lib/form/Form';
 import { TableColumnType, TableProps, TooltipProps } from 'ant-design-vue';
 import { ButtonType } from 'ant-design-vue/lib/button/buttonTypes';
 import type { ConfigType, Column as EVirtColumn } from 'e-virt-table';
+import EVirtTable from 'e-virt-table';
 
 export interface CellFuncArg<D extends Recordable = Recordable> {
   row: D;
@@ -371,3 +372,7 @@ export interface PFormGroupInstance {
   validate: (index: number, ignoreTabError?: boolean) => Promise<void>;
   validateFields: (index: number, fields: string[], ignoreTabError?: boolean) => Promise<void>;
 }
+export interface PCanvasTableInstance<T extends Recordable = Recordable> {
+  $table: InstanceType<typeof EVirtTable>;
+  selectedRecords: T[];
+}

package/src/packages/components/PCanvasTable.vue

@@ -28,6 +28,7 @@
   const defaultConfig = {
     DISABLED: true,
   };
+  const selectedRecords = ref<T[]>([]);
   const props = defineProps<CanvasTableProps<T, B>>();
   let eVirtTable: EVirtTable | null = null;
   const attrs = useAttrs();
@@ -134,6 +135,7 @@
       },
       columns: props.columns.map((col) => parseToEVirtColumn(col)),
       data: props.data,
+      footerData: props.footerData,
       emptyElement: eVirtTableEmptyRef.value || undefined,
       overlayerElement: eVirtTableOverlayerRef.value || undefined,
       editorElement: eVirtTableEditorRef.value || undefined,
@@ -164,7 +166,7 @@
       editorType.value = 'text';
     });
     eVirtTable.on('selectionChange', (selection) => {
-      console.log('selection', selection);
+      selectedRecords.value = selection;
     });
     emit('ready', eVirtTable);
   });
@@ -210,6 +212,7 @@
   );
   defineExpose({
     $table: eVirtTable,
+    selectedRecords: computed(() => selectedRecords.value),
   });
 </script>
 <template>

package/src/packages/components/PromisePicker.vue

@@ -4,7 +4,7 @@
   name="PromisePicker"
   generic="D extends Recordable = Recordable, F extends Recordable = Recordable"
 >
-  import { reactive, ref, computed } from 'vue';
+  import { reactive, ref, computed, onMounted, nextTick } from 'vue';
   import { PGridInstance, PromisePickerProps } from '#/antProxy';
   import PGrid from '@/components/PGrid.vue';
   import { $warning } from '@/hooks/useMessage';
@@ -12,6 +12,7 @@
 
   const gridEl = ref<PGridInstance<D>>();
 
+  const rendered = ref(false);
   const props = withDefaults(defineProps<PromisePickerProps<D, F>>(), {
     title: '数据选择',
     width: '70%',
@@ -60,18 +61,27 @@
       });
     }
   };
+  onMounted(() => {});
   defineExpose({
     pick: () =>
       new Promise<{ row: D; field?: string } | D[]>((resolve, reject) => {
         resolvePromise = resolve;
         rejectPromise = reject;
+        rendered.value = false;
         visible.modal = true;
+        nextTick(() => {
+          rendered.value = true;
+        });
       }),
     pickMultiple: () =>
       new Promise<{ row: D; field?: string } | D[]>((resolve, reject) => {
         multipleResolver = resolve;
         rejectPromise = reject;
+        rendered.value = false;
         visible.modal = true;
+        nextTick(() => {
+          rendered.value = true;
+        });
       }),
     grid: gridEl,
     hide: () => {
@@ -89,7 +99,9 @@
     @cancel="handleCancel"
     :body-style="bodyStyle"
   >
-    <p-grid v-bind="gridSetting" ref="gridEl" @pick="selectRow" />
+    <div :style="{ minHeight: rendered ? 'unset' : '642px' }">
+      <p-grid v-bind="gridSetting" ref="gridEl" @pick="selectRow" />
+    </div>
     <template v-if="isMultiple" #footer>
       <div class="w-full text-right p-2">
         <span>

package/src/packages/styles/index.scss

@@ -205,7 +205,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%;
@@ -219,11 +224,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;
+            }
           }
         }
       }
@@ -235,6 +244,9 @@
       width: 100px;
     }
   }
+  .ant-table-cell:not(.normal-break) {
+    word-break: break-all;
+  }
 }
 .p-error-group-tab {
   position: relative;
@@ -251,6 +263,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
@@ -265,6 +282,7 @@
     display: none;
   }
 }
+
 .no-error-border {
   border-color: #d9d9d9 !important;
 
@@ -272,6 +290,11 @@
     border-color: #4096ff !important;
   }
 }
+@media (max-width: 575px) {
+  .p-wrapper .ant-form .ant-form-item .ant-form-item-label {
+    justify-content: flex-start;
+  }
+}
 //endregion
 
 /* #region EVirtTable */