@vue-ui-kit/ant 1.9.4 → 2.0.0

package/src/packages/components/PForm.vue

@@ -1,4 +1,4 @@
-<script generic="F = Recordable" lang="ts" name="PForm" setup>
+<script generic="F extends Recordable = Recordable" lang="ts" name="PForm" setup>
   import { PFormItemProps, PFormProps } from '#/antProxy';
   import { computed, ref, toRefs } from 'vue';
   import { omit } from 'xe-utils';
@@ -39,15 +39,15 @@
       eachTree(items.value, (item) => {
         if (item.field && item.itemRender) {
           if (isGoodValue(item.itemRender.defaultValue)) {
-            obj[item.field] = item.itemRender.defaultValue;
+            obj[item.field as keyof F] = item.itemRender.defaultValue;
           } else {
-            obj[item.field] = undefined;
+            obj[item.field as keyof F] = undefined;
           }
         } else if (item.field && item.slots) {
           if (isGoodValue(item.slots.defaultValue)) {
-            obj[item.field] = item.slots.defaultValue;
+            obj[item.field as keyof F] = item.slots.defaultValue;
           } else {
-            obj[item.field] = undefined;
+            obj[item.field as keyof F] = undefined;
           }
         }
       });

package/src/packages/components/PFormGroup.vue

@@ -1,4 +1,4 @@
-<script lang="ts" generic="F = Recordable" setup name="PFormGroup">
+<script lang="ts" generic="F extends Recordable = Recordable" setup name="PFormGroup">
   import { computed, nextTick, PropType, ref, watch, watchEffect } from 'vue';
   import { PFormGroupProps, PFormBlockInstance } from '#/antProxy';
   import { MoreOutlined } from '@ant-design/icons-vue';

package/src/packages/components/PGrid.vue

@@ -1,4 +1,9 @@
-<script generic="D = Recordable, F = Recordable" lang="ts" name="PGrid" setup>
+<script
+  generic="D extends Recordable = Recordable, F extends Recordable = Recordable"
+  lang="ts"
+  name="PGrid"
+  setup
+>
   import { ColumnProps, PFormItemProps, PGridProps, ResponsePathConfig } from '#/antProxy';
   import {
     computed,
@@ -236,15 +241,15 @@
         eachTree(formConfig.value.items, (item) => {
           if (item.field && item.itemRender) {
             if (isGoodValue(item.itemRender.defaultValue)) {
-              obj[item.field] = item.itemRender.defaultValue;
+              obj[item.field as keyof F] = item.itemRender.defaultValue;
             } else {
-              obj[item.field] = undefined;
+              obj[item.field as keyof F] = undefined;
             }
           } else if (item.field && item.slots) {
             if (isGoodValue(item.slots.defaultValue)) {
-              obj[item.field] = item.slots.defaultValue;
+              obj[item.field as keyof F] = item.slots.defaultValue;
             } else {
-              obj[item.field] = undefined;
+              obj[item.field as keyof F] = undefined;
             }
           }
         });

package/src/packages/components/PGroupBlock.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="PGroupBlock" generic="F = Recordable">
+<script lang="ts" setup name="PGroupBlock" generic="F extends Recordable = Recordable">
   import { PBlockProps, PFormInstance, PFormProps } from '#/antProxy';
   import { computed, ref, toRefs } from 'vue';
   import PForm from '@/components/PForm.vue';

package/src/packages/components/PromisePicker.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="PromisePicker" generic="D = Recordable, F = Recordable">
+<script lang="ts" setup name="PromisePicker" generic="D extends Recordable = Recordable, F extends Recordable = Recordable">
   import { reactive, ref, computed } from 'vue';
   import { PGridInstance, PromisePickerProps } from '#/antProxy';
   import PGrid from '@/components/PGrid.vue';

package/src/packages/components/RenderAntCell.tsx

@@ -3,10 +3,10 @@ import { CellRender, RenderTableParams } from '#/antProxy';
 import renderStore from '@/store/renderStore';
 
 export default defineComponent(
-  <D = Recordable,>(props: {
+  <D extends Recordable = Recordable>(props: {
     cellRender: CellRender;
     renderTableParams: RenderTableParams<D>;
-    defaultHandler?: {
+    defaultHandler: {
       [key: string]: (...args: any[]) => any;
     };
   }) => {

package/src/packages/components/RenderAntItem.tsx

@@ -3,11 +3,11 @@ import { ItemRender, RenderFormParams } from '#/antProxy';
 import renderStore from '@/store/renderStore';
 
 export default defineComponent(
-  <F = Recordable,>(
+  <F extends Recordable = Recordable>(
     props: {
       itemRender: ItemRender;
       renderFormParams: RenderFormParams<F>;
-      defaultHandler?: {
+      defaultHandler: {
         [key: string]: (...args: any[]) => any;
       };
     },

package/src/packages/components/RenderDefaultSlots.tsx

@@ -4,7 +4,7 @@ import { renderAntFormat } from '@/utils/AFormatters';
 import RenderAntCell from '@/components/RenderAntCell';
 
 export default defineComponent(
-  <D = Recordable,>(props: {
+  <D extends Recordable = Recordable>(props: {
     tableData: D[];
     row: D;
     column: ColumnProps<D>;

package/src/packages/components/RenderEditCell.tsx

@@ -0,0 +1,36 @@
+import { defineComponent, ref } from 'vue';
+import { CellRender, RenderTableParams } from '#/antProxy';
+import renderStore from '@/store/renderStore';
+
+export default defineComponent(
+  <D extends Recordable = Recordable>(
+    props: {
+      cellRender: CellRender;
+      renderTableParams: RenderTableParams<D>;
+    },
+    { emit },
+  ) => {
+    const { cellRender, renderTableParams } = props;
+    const { row, field } = renderTableParams!;
+    if (field) {
+      const innerValue = ref(row[field]);
+      return () => {
+        return (
+          renderStore.renders[cellRender!.name]?.renderEdit?.(
+            innerValue,
+            cellRender!,
+            renderTableParams,
+            emit,
+          ) ?? null
+        );
+      };
+    } else {
+      return () => null;
+    }
+  },
+  {
+    name: 'RenderEditCell',
+    props: ['cellRender', 'renderTableParams'],
+    emits: ['blur'],
+  },
+);

package/src/packages/components/RenderItemSlots.tsx

@@ -2,7 +2,7 @@ import { defineComponent, toRefs } from 'vue';
 import { PFormItemProps } from '#/antProxy';
 
 export default defineComponent(
-  <F = Recordable,>(props: {
+  <F extends Recordable = Recordable>(props: {
     formData: F;
     item: PFormItemProps<F>;
     passTrigger: (cusFields?: string | string[]) => void;

package/src/packages/components/RenderTitleSlots.tsx

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 import { ColumnProps } from '#/antProxy';
 
 export default defineComponent(
-  <D = Recordable,>(props: { column: ColumnProps<D> }) => {
+  <D extends Recordable = Recordable>(props: { column: ColumnProps<D> }) => {
     const { column } = props;
     return () => {
       return column.slots?.title?.({ column }) ?? column.title;

package/src/packages/renders/TableInput.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="TableInput" generic="D = Recordable">
+<script lang="ts" setup name="TableInput" generic="D extends Recordable = Recordable">
   import { computed, PropType, watch } from 'vue';
   import { TableProps } from 'ant-design-vue';
   import { ColumnProps } from '#/antProxy';

package/src/packages/store/renderStore.tsx

@@ -26,7 +26,7 @@ import { ButtonProps } from 'ant-design-vue/lib/button';
 import { isBadValue, isGoodValue, valued } from '@/utils/is';
 import TableInput from '@/renders/TableInput.vue';
 import Icon from '@/renders/Icon';
-import { computed } from 'vue';
+import { computed, Ref } from 'vue';
 
 interface BtnOptions extends ButtonProps {
   content?: string;
@@ -36,7 +36,27 @@ interface BtnOptions extends ButtonProps {
   clickEvt?: (p: RenderTableParams) => any;
   hiddenIf?: (p: RenderTableParams) => boolean;
 }
-
+export interface RenderWorkshop {
+  renderItemContent?: (
+    options: RenderOptions,
+    params: RenderFormParams,
+    defaultHandler: Recordable,
+  ) => any;
+  renderDefault?: (
+    options: RenderOptions,
+    params: RenderTableParams,
+    defaultHandler: Recordable,
+  ) => any;
+  renderEdit?: (
+    model: Ref<any>,
+    options: RenderOptions,
+    params: RenderTableParams,
+    emit?: (e: 'blur', value: any) => void,
+  ) => any;
+}
+interface RenderFactory {
+  [key: string]: RenderWorkshop;
+}
 const antDefaultProps = {
   AInput: {
     autocomplete: 'off',
@@ -169,6 +189,25 @@ const renderBasic = (name: string) => {
         <DynamicComponent is={name} {...props} />
       );
     },
+    renderEdit(
+      model: Ref<any>,
+      { props = antDefaultProps[name] ?? {}, attrs = {}, events = {} }: RenderOptions,
+      params: RenderTableParams,
+      emit?: (e: 'blur', value: any[]) => void,
+    ) {
+      return (
+        <DynamicComponent
+          is={name}
+          v-model:value={model.value}
+          {...attrs}
+          {...merge({}, antDefaultProps[name], props)}
+          onBlur={(...args) => {
+            emit?.('blur', model.value);
+            events.blur?.(params, ...args);
+          }}
+        />
+      );
+    },
   };
 };
 
@@ -224,7 +263,7 @@ const renderBtn = (btnOpt: BtnOptions, params: RenderTableParams) =>
       {btnOpt.content || (btnOpt?.getContent?.(params) ?? '')}
     </Button>
   );
-const renders = {
+const renders: RenderFactory = {
   ...Object.fromEntries(Object.keys(componentsMap).map((name) => [name, renderBasic(name)])),
   // 简单按钮
   $button: {
@@ -617,21 +656,7 @@ const renders = {
 };
 export const addRender = (
   name: string,
-  {
-    renderItemContent,
-    renderDefault,
-  }: {
-    renderItemContent?: (
-      options: RenderOptions,
-      params: RenderFormParams,
-      defaultHandler: Recordable,
-    ) => any;
-    renderDefault?: (
-      options: RenderOptions,
-      params: RenderTableParams,
-      defaultHandler: Recordable,
-    ) => any;
-  },
+  { renderItemContent, renderDefault, renderEdit }: RenderWorkshop,
 ) => {
   if (renders.hasOwnProperty(name)) {
     console.warn(`render ${name} already exists, you are trying to override it`);
@@ -639,6 +664,7 @@ export const addRender = (
   renders[name] = {
     renderItemContent,
     renderDefault,
+    renderEdit,
   };
 };
 export default {

package/src/packages/styles/index.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@use 'variables';
 
 .p-pane {
   background-color: var(--p-theme-bg);
@@ -100,9 +100,9 @@
     z-index: 4;
   }
   .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 {
+    .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;
 
       &:focus {
@@ -122,7 +122,9 @@
     transform: translateY(-10px);
     max-height: 0;
     overflow: hidden;
-    transition: opacity 0.3s ease-out 0.3s, transform 0.3s ease-out 0.3s,
+    transition:
+      opacity 0.3s ease-out 0.3s,
+      transform 0.3s ease-out 0.3s,
       max-height 0.3s ease-out 0.3s;
   }
   .ant-form-item-has-error .ant-form-item-explain-error {
@@ -234,25 +236,25 @@
     }
   }
 }
-.p-error-group-tab{
-  position:relative;
+.p-error-group-tab {
+  position: relative;
   overflow: visible;
-  color:#f5222d!important;
-  &:after{
-    content:'🏷️';
-    position:absolute;
-    top:-1em;
-    right:0;
-    width:1em;
-    height:1em;
-    font-size:0.8em;
+  color: #f5222d !important;
+  &:after {
+    content: '🏷️';
+    position: absolute;
+    top: -1em;
+    right: 0;
+    width: 1em;
+    height: 1em;
+    font-size: 0.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 {
+  .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;
 
     &:focus {
@@ -272,6 +274,10 @@
 }
 //endregion
 
+/* #region EVirtTable */
+
+/* #endregion */
+
 @each $align in right center {
   /**/
   .p-content-align-#{$align}.ant-form-item .ant-form-item-control-input-content {
@@ -287,15 +293,37 @@
 }
 
 @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); }
-  100% { transform: scale(1); }   // 长停顿
-}
+  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);
+  }
+  100% {
+    transform: scale(1);
+  } // 长停顿
+}

package/src/packages/utils/AFormatters.ts

@@ -1,9 +1,9 @@
 import { isArray, isFunction, isString, toNumber } from 'xe-utils';
 import { valued } from '@/utils/is';
-import { CellFuncArg, ColumnProps } from '#/antProxy';
+import { CellFuncArg, ColumnProps, PFormatter } from '#/antProxy';
 
 const emptyStr = `-`;
-export const antFormatters = {
+export const antFormatters: PFormatter = {
   toString: ({ cellValue }) => (cellValue ? (cellValue.toString?.() ?? emptyStr) : emptyStr),
   // 格式化选项
   formatByOptions: ({ cellValue }, options: IOption[], separator = ',') => {
@@ -28,7 +28,7 @@ export const antFormatters = {
     return valued(cellValue) ? (toNumber(cellValue) === 1 ? '男' : '女') : emptyStr;
   },
 };
-export const renderAntFormat = <D = Recordable>(
+export const renderAntFormat = <D extends Recordable = Recordable>(
   formatter: string | [string, ...Array<any>] | ((arg: CellFuncArg<D>) => any),
   {
     record,