@vue-ui-kit/ant 2.0.2 → 2.0.4

package/src/packages/components/PromisePicker.vue

@@ -4,22 +4,15 @@
   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';
   import { Button as AButton, Modal as AModal } from 'ant-design-vue';
 
   const gridEl = ref<PGridInstance<D>>();
-  const defaultBodyStyle = {
-    minHeight: '642px',
-  };
-  const mergedBodyStyle = computed(() => {
-    return {
-      ...defaultBodyStyle,
-      ...props.bodyStyle,
-    };
-  });
+
+  const rendered = ref(false);
   const props = withDefaults(defineProps<PromisePickerProps<D, F>>(), {
     title: '数据选择',
     width: '70%',
@@ -68,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: () => {
@@ -95,9 +97,11 @@
     :width="width"
     :footer="isMultiple ? undefined : null"
     @cancel="handleCancel"
-    :body-style="mergedBodyStyle"
+    :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

@@ -5,8 +5,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%;
 }
@@ -88,9 +90,9 @@
   overflow-y: auto;
 }
 
-//endregion
+/* #endregion */
 
-//region P family styles
+/* #region P family styles */
 .p-theme-bg {
   background-color: var(--p-theme-bg);
 }
@@ -99,6 +101,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
@@ -137,6 +142,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 {
@@ -205,7 +214,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 +233,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 +253,9 @@
       width: 100px;
     }
   }
+  .ant-table-cell:not(.normal-break) {
+    word-break: break-all;
+  }
 }
 .p-error-group-tab {
   position: relative;
@@ -251,6 +272,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 +291,7 @@
     display: none;
   }
 }
+
 .no-error-border {
   border-color: #d9d9d9 !important;
 
@@ -272,10 +299,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/src/packages/utils/config.ts

@@ -1,4 +1,5 @@
 import { PFormProps, PGridProps } from '#/antProxy';
+import { ConfigType } from 'e-virt-table';
 import { clone } from 'xe-utils';
 
 // 全局配置接口
@@ -11,7 +12,9 @@ export interface UIKitConfig {
     align?: 'left' | 'right' | 'center';
     lazyReset?: boolean;
     fitHeight?: number;
+    fitCanvasHeight?: number;
   };
+  canvasTable?: ConfigType;
 }
 
 // 默认配置
@@ -25,6 +28,9 @@ const defaultConfig: UIKitConfig = {
     lazyReset: false,
     fitHeight: 170,
   },
+  canvasTable: {
+    DISABLED: true,
+  },
 };
 
 // 当前配置（可被修改）
@@ -41,6 +47,10 @@ export function setUIKitConfig(config: Partial<UIKitConfig>): void {
       ...currentConfig.grid,
       ...config.grid,
     },
+    canvasTable: {
+      ...currentConfig.canvasTable,
+      ...config.canvasTable,
+    },
   };
 }
 
@@ -66,7 +76,12 @@ export function getGridDefaults(): Partial<PGridProps> {
   };
 }
 
+// 获取CanvasTable默认配置
+export function getCanvasTableDefaults(): ConfigType {
+  return currentConfig.canvasTable || ({} as ConfigType);
+}
+
 // 重置为默认配置
 export function resetUIKitConfig(): void {
   currentConfig = JSON.parse(JSON.stringify(defaultConfig));
-} 
+}