@vue-ui-kit/ant 2.0.6 → 2.0.7

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

@@ -1,8 +1,10 @@
 import { ColumnProps, Responsive } from '../../declarations/antProxy';
 import { TableColumnGroupType, TableColumnType } from 'ant-design-vue';
+import { WatchOptions, WatchSource } from 'vue';
 export declare const cleanCol: (col: ColumnProps) => TableColumnType | TableColumnGroupType<Recordable>;
 export declare const defaultItemResponsive: Responsive;
 export declare const defaultLabelCol: Responsive;
 export declare const labelColDict: Record<number, Responsive>;
 export declare const get24rest: (exist: number[]) => number;
 export declare const getButtonResponsive: (itemResponsive: number | Responsive[]) => any;
+export declare function watchPreviousDeep<T extends object>(source: WatchSource<T>, cb: (value: T, oldValue: T, onCleanup: () => void) => void, options?: WatchOptions): import('vue').WatchHandle;

package/package.json

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

package/src/packages/components/PCanvasTable.vue

@@ -21,6 +21,7 @@
   import { v4 as uuidv4 } from 'uuid';
   import { antFormatters } from '@/utils/AFormatters';
   import { getCanvasTableDefaults } from '@/utils/config';
+  import { watchPreviousDeep } from '@/utils/core';
 
   const emit = defineEmits<{
     (e: 'change', value: any[]): void; // 需要默认实现change，不能动态绑定
@@ -197,7 +198,7 @@
     },
     { deep: true },
   );
-  watch(
+  watchPreviousDeep(
     () => props.columns,
     (newValue, oldValue) => {
       if (!isEqual(newValue, oldValue)) {

package/src/packages/components/PFormCol.vue

@@ -1,46 +1,50 @@
 <script setup lang="ts" generic="T extends Recordable = Recordable">
-import type { PFormItemProps } from '#/antProxy'
-import { defaultItemResponsive } from '@/utils/core';
-import RenderAntItem from '@/components/RenderAntItem';
-import RenderItemSlots from '@/components/RenderItemSlots';
-import { InfoCircleOutlined } from '@ant-design/icons-vue'
-import { v4 as uuid_v4 } from 'uuid'
-import { ref, watch } from 'vue'
-import { isEqual,debounce, isFunction, omit } from 'xe-utils'
+  import type { PFormItemProps } from '#/antProxy';
+  import { defaultItemResponsive, watchPreviousDeep } from '@/utils/core';
+  import RenderAntItem from '@/components/RenderAntItem';
+  import RenderItemSlots from '@/components/RenderItemSlots';
+  import { InfoCircleOutlined } from '@ant-design/icons-vue';
+  import { v4 as uuid_v4 } from 'uuid';
+  import { ref } from 'vue';
+  import { isEqual, debounce, isFunction, omit } from 'xe-utils';
 
-const props = defineProps<{
-  item: PFormItemProps<T>
-  formData: T
-}>()
-const emit = defineEmits<{
-  (e: 'trigger', cusFields?: string | string[]): void
-  (e: 'reset'): void
-}>()
-const hangOut = ref(false)
-const renderFormKey = ref(uuid_v4())
-const handleDelayTrigger = (cusFields?: string | string[], time?: number) => {
-  const delayTime = time ?? 222
-  hangOut.value = true
-  setTimeout(() => {
-    hangOut.value = false
-    emit('trigger', cusFields)
-  }, delayTime)
-}
-const handleTrigger = (cusFields?: string | string[]) => {
-  emit('trigger', cusFields)
-}
-const resetFormData = () => {
-  emit('reset')
-}
-const refreshCol = () => {
-  renderFormKey.value = uuid_v4()
-}
-const debounceRefreshCol = debounce(refreshCol, 100)
-watch(() => props.item, (cur, old) => {
-  if (!isEqual(cur, old)) {
-    debounceRefreshCol()
-  }
-}, { deep: true })
+  const props = defineProps<{
+    item: PFormItemProps<T>;
+    formData: T;
+  }>();
+  const emit = defineEmits<{
+    (e: 'trigger', cusFields?: string | string[]): void;
+    (e: 'reset'): void;
+  }>();
+  const hangOut = ref(false);
+  const renderFormKey = ref(uuid_v4());
+  const handleDelayTrigger = (cusFields?: string | string[], time?: number) => {
+    const delayTime = time ?? 222;
+    hangOut.value = true;
+    setTimeout(() => {
+      hangOut.value = false;
+      emit('trigger', cusFields);
+    }, delayTime);
+  };
+  const handleTrigger = (cusFields?: string | string[]) => {
+    emit('trigger', cusFields);
+  };
+  const resetFormData = () => {
+    emit('reset');
+  };
+  const refreshCol = () => {
+    renderFormKey.value = uuid_v4();
+  };
+  const debounceRefreshCol = debounce(refreshCol, 100);
+  watchPreviousDeep(
+    () => props.item,
+    (cur, old) => {
+      if (!isEqual(cur, old)) {
+        debounceRefreshCol();
+      }
+    },
+    { deep: true },
+  );
 </script>
 
 <template>
@@ -58,7 +62,18 @@ watch(() => props.item, (cur, old) => {
       :label="item.title"
       :name="item.field"
       :wrapper-col="item.wrapperCol ?? (item.title ? undefined : { span: 24 })"
-      v-bind="omit(item, ['field', 'title', 'span', 'col', 'wrapperCol', 'itemRender', 'forceRequired', 'tooltip'])"
+      v-bind="
+        omit(item, [
+          'field',
+          'title',
+          'span',
+          'col',
+          'wrapperCol',
+          'itemRender',
+          'forceRequired',
+          'tooltip',
+        ])
+      "
     >
       <template v-if="item.slots?.title" #label>
         <component :is="item.slots.title" />
@@ -82,7 +97,10 @@ watch(() => props.item, (cur, old) => {
       />
       <span v-else />
       <template v-if="item.tooltipConfig" #tooltip>
-        <a-tooltip v-if="isFunction(item.tooltipConfig.title)" v-bind="omit(item.tooltipConfig, ['title'])">
+        <a-tooltip
+          v-if="isFunction(item.tooltipConfig.title)"
+          v-bind="omit(item.tooltipConfig, ['title'])"
+        >
           <info-circle-outlined class="cursor-pointer py-4 px-2" />
           <template #title>
             <div v-html="item.tooltipConfig.title()" />

package/src/packages/components/PFormGroup.vue

@@ -52,7 +52,7 @@
     { content: '复制', code: 'copy' },
     { content: '删除', code: 'delete' },
   ];
-  const getPopupContainer = (el) =>
+  const getPopupContainer = (el: HTMLElement) =>
     el?.parentElement?.parentElement?.parentElement?.parentElement?.parentElement?.parentElement ??
     rootRef.value?.$el ??
     document.body;

package/src/packages/utils/core.ts

@@ -1,7 +1,8 @@
 import { ColumnProps, Responsive } from '#/antProxy';
 import { TableColumnGroupType, TableColumnType } from 'ant-design-vue';
-import { isArray, isNumber, omit, zipObject } from 'xe-utils';
+import { clone, isArray, isNumber, omit, zipObject } from 'xe-utils';
 import { valued } from '@/utils/is';
+import { toValue, watch, WatchCallback, WatchOptions, WatchSource } from 'vue';
 
 export const cleanCol = (col: ColumnProps): TableColumnType | TableColumnGroupType<Recordable> => {
   return {
@@ -50,3 +51,23 @@ export const getButtonResponsive = (itemResponsive: number | Responsive[]) => {
     ),
   );
 };
+
+export function watchPreviousDeep<T extends object>(
+  source: WatchSource<T>,
+  cb: (value: T, oldValue: T, onCleanup: () => void) => void,
+  options?: WatchOptions,
+) {
+  const val = toValue(source);
+  if (typeof val !== 'object' || val === null) {
+    return watch(source, cb as WatchCallback<T>, options);
+  }
+  let previousValue = clone(val) as T;
+  return watch(
+    source,
+    (crtValue, _, onCleanup) => {
+      cb(crtValue as T, previousValue, onCleanup as () => void);
+      previousValue = clone(crtValue) as T;
+    },
+    options,
+  );
+}