@vue-ui-kit/ant 1.2.0 → 1.3.0

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%}.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-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 .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-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}
+@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}.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-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-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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -21,7 +21,6 @@
     "build": "ts-patch install && vite build",
     "prepack": "rimraf dist && yarn build",
     "prepare": "husky",
-    "publish": "npm publish",
     "lint:lint-staged": "lint-staged",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
   },

package/src/declarations/antProxy.ts

@@ -1,9 +1,9 @@
-import type { Rule } from 'ant-design-vue/lib/form'
-import { ButtonProps } from 'ant-design-vue/lib/button'
-import { ColProps } from 'ant-design-vue/lib/grid/Col'
-import { FormProps } from 'ant-design-vue/lib/form/Form'
-import { TableColumnType, TableProps } from 'ant-design-vue'
-import { ButtonType } from 'ant-design-vue/lib/button/buttonTypes'
+import type { Rule } from 'ant-design-vue/lib/form';
+import { ButtonProps } from 'ant-design-vue/lib/button';
+import { ColProps } from 'ant-design-vue/lib/grid/Col';
+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';
 
 export interface CellFuncArg<D = Recordable> {
   row: D;
@@ -42,15 +42,21 @@ export interface Responsive {
   xxl?: number;
 }
 
+export interface TooltipConfig extends TooltipProps {
+  title: TooltipProps['title'] | (() => any);
+}
+
 export interface PFormItemProps<F = Recordable> {
   field?: string;
   title?: string;
   span?: number;
-  colon?: boolean
+  colon?: boolean;
+  forceRequired?: boolean; // 在页面需要必填标示，但field不需要必填校验时使用
   align?: 'left' | 'right' | 'center';
   col?: ColProps;
   rule?: Rule[];
   itemRender?: ItemRender;
+  tooltipConfig?: TooltipConfig;
   slots?: {
     default?: (
       { data, field }: ItemFuncArg<F>,
@@ -259,7 +265,7 @@ export interface PromisePickerInstance<D = Recordable> {
 }
 
 export interface PFormBlockInstance {
-  $form: Recordable
+  $form: Recordable;
 }
 
 export interface PFormGroupInstance<F = Recordable> {

package/src/packages/components/PForm.vue

@@ -1,106 +1,138 @@
 <script generic="F = Recordable" lang="ts" name="PForm" setup>
-import { PFormItemProps, PFormProps } from '#/antProxy'
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
-import { debounce, omit } from 'lodash-es'
-import { v4 as uuid_v4 } from 'uuid'
-import RenderAntItem from '@/components/RenderAntItem'
-import RenderItemSlots from '@/components/RenderItemSlots'
-import { valued } from '@/utils/is'
-import { eachTree } from '@/utils/treeHelper'
-import { defaultItemResponsive } from '@/utils/core'
-import { Form as AForm, Row as ARow, Col as ACol, FormItem as AFormItem } from 'ant-design-vue'
+  import { PFormItemProps, PFormProps } from '#/antProxy';
+  import { computed, onMounted, ref, toRefs, watch } from 'vue';
+  import { debounce, omit, isFunction } from 'lodash-es';
+  import { v4 as uuid_v4 } from 'uuid';
+  import RenderAntItem from '@/components/RenderAntItem';
+  import RenderItemSlots from '@/components/RenderItemSlots';
+  import { valued } from '@/utils/is';
+  import { eachTree } from '@/utils/treeHelper';
+  import { defaultItemResponsive } from '@/utils/core';
+  import {
+    Form as AForm,
+    Row as ARow,
+    Col as ACol,
+    FormItem as AFormItem,
+    Tooltip as ATooltip,
+  } from 'ant-design-vue';
+  import { InfoCircleOutlined } from '@ant-design/icons-vue';
 
-const props = defineProps<PFormProps<F> & { data: F }>()
-const emit = defineEmits(['apply', 'reset'])
-const { items, data: formData } = toRefs(props)
+  const props = defineProps<PFormProps<F> & { data: F }>();
+  const emit = defineEmits(['apply', 'reset']);
+  const { items, data: formData } = toRefs(props);
 
-function handleSubmit () {
-  emit('apply', formData.value)
-}
+  function handleSubmit() {
+    emit('apply', formData.value);
+  }
 
-const formEl = ref()
-const renderFormKey = ref(uuid_v4())
-const resetForm = () => {
-  renderFormKey.value = uuid_v4()
-}
-const debounceResetForm = debounce(resetForm, 100)
-watch(() => items.value, debounceResetForm, { deep: true })
-const resetFormData = () => {
-  if (props.customReset) {
-    props.customReset()
-  } else {
-    const obj: Partial<F> = {}
-    eachTree(items.value, (item) => {
-      if (item.field && item.itemRender) {
-        if (valued(item.itemRender.defaultValue)) {
-          obj[item.field] = item.itemRender.defaultValue
-        } else {
-          obj[item.field] = undefined
+  const formEl = ref();
+  const renderFormKey = ref(uuid_v4());
+  const resetForm = () => {
+    renderFormKey.value = uuid_v4();
+  };
+  const debounceResetForm = debounce(resetForm, 100);
+  watch(() => items.value, debounceResetForm, { deep: true });
+  const resetFormData = () => {
+    if (props.customReset) {
+      props.customReset();
+    } else {
+      const obj: Partial<F> = {};
+      eachTree(items.value, (item) => {
+        if (item.field && item.itemRender) {
+          if (valued(item.itemRender.defaultValue)) {
+            obj[item.field] = item.itemRender.defaultValue;
+          } else {
+            obj[item.field] = undefined;
+          }
         }
-      }
-    })
-    Object.assign(formData.value, obj)
-  }
-}
-// omit({labelCol:defaultLabelCol,...props},['items','data','model'])
-const fc = computed(() => ({
-  ...omit(props, ['items', 'data', 'model', 'labelCol', 'wrapperCol']),
-  labelCol: props.labelCol ?? { span: 6 },
-  wrapperCol: props.wrapperCol ?? { span: 16 },
-}))
-const validateField = (fields?: string | string[]) => {
-  if (fields) {
-    formEl.value?.validateFields(fields)
-  }
-}
-const handleTrigger = (cusFields?: string | string[]) => {
-  validateField(cusFields)
-}
-defineExpose({
-  reset: resetForm,
-  $form: computed(() => formEl.value),
-})
-onMounted(() => {
-  resetForm()
-})
+      });
+      Object.assign(formData.value, obj);
+    }
+  };
+  // omit({labelCol:defaultLabelCol,...props},['items','data','model'])
+  const fc = computed(() => ({
+    ...omit(props, ['items', 'data', 'model', 'labelCol', 'wrapperCol']),
+    labelCol: props.labelCol ?? { span: 6 },
+    wrapperCol: props.wrapperCol ?? { span: 16 },
+  }));
+  const validateField = (fields?: string | string[]) => {
+    if (fields) {
+      formEl.value?.validateFields(fields);
+    }
+  };
+  const handleTrigger = (cusFields?: string | string[]) => {
+    validateField(cusFields);
+  };
+  defineExpose({
+    reset: resetForm,
+    $form: computed(() => formEl.value),
+  });
+  onMounted(() => {
+    resetForm();
+  });
 </script>
 <template>
   <div
-      v-if="items.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
-      class="p-pane p-wrapper"
+    v-if="items.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
+    class="p-pane p-wrapper"
   >
     <a-form :key="renderFormKey" ref="formEl" :model="formData" v-bind="fc" @submit="handleSubmit">
       <a-row :gutter="[6, 12]">
         <a-col
-            v-for="(item, idx) in items"
-            :key="'_col_' + idx"
-            v-bind="item.col ?? (item.span ? { span: item.span } : defaultItemResponsive)"
+          v-for="(item, idx) in items"
+          :key="'_col_' + idx"
+          v-bind="item.col ?? (item.span ? { span: item.span } : defaultItemResponsive)"
         >
           <a-form-item
-              :key="'_item_' + idx"
-              :label="item.title"
-              :name="item.field"
-              :wrapper-col="item.wrapperCol ?? (item.title ? undefined : { span: 24 })"
-              colon
-              :class="`p-content-align-${item.align ?? 'left'}`"
-              v-bind="omit(item, ['field', 'title', 'span', 'col', 'wrapperCol', 'itemRender'])"
+            :key="'_item_' + idx"
+            :label="item.title"
+            :name="item.field"
+            :wrapper-col="item.wrapperCol ?? (item.title ? undefined : { span: 24 })"
+            colon
+            :class="`p-content-align-${item.align ?? 'left'} ${item.forceRequired ? 'p-required' : ''}`"
+            v-bind="
+              omit(item, [
+                'field',
+                'title',
+                'span',
+                'col',
+                'wrapperCol',
+                'itemRender',
+                'forceRequired',
+                'tooltip',
+              ])
+            "
           >
             <render-item-slots
-                v-if="item.slots?.default"
-                :form-data="formData"
-                :item="item"
-                :key="'_sl_'+(item.field??'_')+'_'+idx"
-                :pass-trigger="handleTrigger"
+              v-if="item.slots?.default"
+              :form-data="formData"
+              :item="item"
+              :key="'_sl_' + (item.field ?? '_') + '_' + idx"
+              :pass-trigger="handleTrigger"
             />
             <render-ant-item
-                v-else-if="item.itemRender?.name"
-                :key="'_re_'+(item.field??'_')+'_'+idx"
-                :default-handler="{ reset: resetFormData }"
-                :item-render="item.itemRender"
-                @trigger="handleTrigger"
-                :render-form-params="{ data: formData, field: item.field }"
+              v-else-if="item.itemRender?.name"
+              :key="'_re_' + (item.field ?? '_') + '_' + idx"
+              :default-handler="{ reset: resetFormData }"
+              :item-render="item.itemRender"
+              @trigger="handleTrigger"
+              :render-form-params="{ data: formData, field: item.field }"
             />
             <span v-else></span>
+            <template #tooltip v-if="item.tooltipConfig">
+              <a-tooltip
+                v-if="isFunction(item.tooltipConfig.title)"
+                v-bind="omit(item.tooltipConfig, ['title'])"
+              >
+                <InfoCircleOutlined class="cursor-pointer py-4x px-2x" />
+                <template #title>
+                  <div v-html="item.tooltipConfig.title()"></div>
+                </template>
+              </a-tooltip>
+              <a-tooltip v-else v-bind="item.tooltipConfig">
+                <InfoCircleOutlined class="cursor-pointer py-4x px-2x" />
+              </a-tooltip>
+            </template>
           </a-form-item>
         </a-col>
       </a-row>

package/src/packages/components/PFormGroup.vue

@@ -1,61 +1,67 @@
 <script lang="ts" generic="F = Recordable" setup name="PFormGroup">
-import { computed, PropType, ref } from 'vue'
-import { PFormGroupProps, PFormBlockInstance } from '#/antProxy'
-import { MoreOutlined } from '@ant-design/icons-vue'
-import { cloneDeep, toString, isFunction, omit } from 'lodash-es'
-import PGroupBlock from '@/components/PGroupBlock.vue'
-import {
-  Card as ACard,
-  Tabs as ATabs,
-  TabPane as ATabPane,
-  Button as AButton,
-  Dropdown as ADropdown,
-  Menu as AMenu,
-  MenuItem as AMenuItem,
-} from 'ant-design-vue'
+  import { computed, nextTick, PropType, ref } from 'vue';
+  import { PFormGroupProps, PFormBlockInstance } from '#/antProxy';
+  import { MoreOutlined } from '@ant-design/icons-vue';
+  import { cloneDeep, toString, isFunction, omit } from 'lodash-es';
+  import PGroupBlock from '@/components/PGroupBlock.vue';
+  import {
+    Card as ACard,
+    Tabs as ATabs,
+    TabPane as ATabPane,
+    Button as AButton,
+    Dropdown as ADropdown,
+    Menu as AMenu,
+    MenuItem as AMenuItem,
+  } from 'ant-design-vue';
 
-const props = defineProps<PFormGroupProps<F>>()
-const model = defineModel({
-  type: Array as PropType<Partial<F>[]>,
-  default: () => [],
-})
-const activeKey = ref(0)
-const blockInstance = ref<PFormBlockInstance[]>([])
-const setActiveKey = (key: number) => {
-  activeKey.value = key
-}
-const maxLen = props.max ?? Infinity
-const handleAddItem = (idx: number) => {
-  const creator = props.creatItem ?? (() => Promise.resolve({} as Partial<F>))
-  creator({ list: model.value }).then((item) => {
-    model.value = [...model.value, item]
-    activeKey.value = idx
-  })
-}
-const itemMenus = props.itemMenus ?? [{ content: '删除', code: 'delete' }]
-const handleMenu = (key: string, item: Partial<F>, idx: number) => {
-  if (props.menuHandler && isFunction(props.menuHandler)) {
-    props.menuHandler({ code: key, data: item, index: idx })
-  } else {
-    switch (key) {
-      case 'delete':
-        model.value = model.value.filter((_, i) => i !== idx)
-        break
-      case 'copy':
-        model.value = [...model.value, cloneDeep(omit(item, ['id']))]
-        break
+  const props = defineProps<PFormGroupProps<F>>();
+  const model = defineModel({
+    type: Array as PropType<Partial<F>[]>,
+    default: () => [],
+  });
+  const activeKey = ref(0);
+  const blockInstance = ref<PFormBlockInstance[]>([]);
+  const setActiveKey = (key: number) => {
+    activeKey.value = key;
+  };
+  const maxLen = props.max ?? Infinity;
+  const handleAddItem = (idx: number) => {
+    const creator = props.creatItem ?? (() => Promise.resolve({} as Partial<F>));
+    creator({ list: model.value }).then((item) => {
+      model.value = [...model.value, item];
+      activeKey.value = idx;
+    });
+  };
+  const itemMenus = props.itemMenus ?? [{ content: '删除', code: 'delete' }];
+  const handleMenu = (key: string, item: Partial<F>, idx: number) => {
+    if (props.menuHandler && isFunction(props.menuHandler)) {
+      props.menuHandler({ code: key, data: item, index: idx });
+    } else {
+      switch (key) {
+        case 'delete':
+          model.value = model.value.filter((_, i) => i !== idx);
+          nextTick(() => {
+            blockInstance.value = blockInstance.value.filter((f) => !!f);
+            if (idx <= activeKey.value && activeKey.value > 0) {
+              activeKey.value--;
+            }
+          });
+          break;
+        case 'copy':
+          model.value = [...model.value, cloneDeep(omit(item, ['id']))];
+          break;
+      }
     }
-  }
-}
-defineExpose({
-  activeKey: computed(() => activeKey.value),
-  setActiveKey,
-  validateAll: () => {
-    return Promise.all(blockInstance.value.map((block) =>
-        block.$form?.validate() ?? Promise.resolve()
-    ))
-  },
-})
+  };
+  defineExpose({
+    activeKey: computed(() => activeKey.value),
+    setActiveKey,
+    validateAll: () => {
+      return Promise.all(
+        blockInstance.value.map((block) => block.$form?.validate() ?? Promise.resolve()),
+      );
+    },
+  });
 </script>
 <template>
   <a-card :title="title" size="small">
@@ -63,25 +69,30 @@ defineExpose({
       <template #rightExtra>
         <slot name="rightExtra">
           <a-button
-              type="link"
-              @click="handleAddItem(model.length)"
-              v-if="showAdd && model.length < maxLen"
+            type="link"
+            @click="handleAddItem(model.length)"
+            v-if="showAdd && model.length < maxLen"
           >
             + 新增
           </a-button>
         </slot>
       </template>
-      <a-tab-pane v-for="(item, idx) in model" :key="idx" :tab="`${tabLabel} ${idx + 1}`" force-render>
+      <a-tab-pane
+        v-for="(item, idx) in model"
+        :key="idx"
+        :tab="`${tabLabel} ${idx + 1}`"
+        force-render
+      >
         <template #closeIcon>
           <a-dropdown v-if="editAble && itemMenus?.length">
-            <MoreOutlined/>
+            <MoreOutlined />
             <template #overlay>
               <a-menu @click="(e) => handleMenu(toString(e.key), item, idx)">
                 <a-menu-item
-                    v-for="menu in itemMenus.filter(
+                  v-for="menu in itemMenus.filter(
                     (f) => f.visibleMethod?.({ data: item, index: idx }) ?? true,
                   )"
-                    :key="menu.code"
+                  :key="menu.code"
                 >
                   <div>{{ menu.content }}</div>
                 </a-menu-item>
@@ -90,13 +101,20 @@ defineExpose({
           </a-dropdown>
         </template>
         <!-- @vue-ignore -->
-        <p-group-block :ref="(i:PFormBlockInstance)=>{
-          if(i){
-            blockInstance[idx] = i
-          }else if(blockInstance){
-            blockInstance = blockInstance.filter((_,i)=>i!==idx)
-          }
-        }" :key="idx" :source="item" :get-form-setting="getFormSetting"/>
+        <p-group-block
+          :ref="
+            (i: PFormBlockInstance) => {
+              if (i) {
+                blockInstance[idx] = i;
+              } else if (blockInstance) {
+                blockInstance = blockInstance.filter((_, i) => i !== idx);
+              }
+            }
+          "
+          :key="idx"
+          :source="item"
+          :get-form-setting="getFormSetting"
+        />
       </a-tab-pane>
     </a-tabs>
   </a-card>