@vue-ui-kit/ant 2.0.7 → 2.0.9

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

@@ -0,0 +1,33 @@
+interface Props {
+    /** 是否默认折叠 */
+    defaultCollapsed?: boolean;
+    title?: string;
+    /** 是否可以折叠 */
+    collapsible?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        title: () => any;
+    }> & {
+        title: () => any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {
+    collapse: () => void;
+    expand: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    title: string;
+    defaultCollapsed: boolean;
+    collapsible: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -10,6 +10,8 @@ declare const _default: <F extends Recordable = Recordable>(__VLS_props: NonNull
         }>[];
     } & PFormGroupProps<F>) & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
+        collapse: () => void;
+        expand: () => void;
         activeKey: import('vue').ComputedRef<number>;
         setActiveKey: (key: number) => void;
         validateAll: () => Promise<PromiseSettledResult<any>[]>;

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}.text-slate-5{color:#64748b}.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-canvas-pagination.ant-pagination{padding:16px 0}.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 .p-canvas-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0}.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)}}
+@charset "UTF-8";:root{--p-theme-bg: #fff;--collapsible-card-body-padding: 12px}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.text-slate-5{color:#64748b}.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-canvas-pagination.ant-pagination{padding:16px 0}.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 .p-canvas-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0}.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}}.collapsible-card{background-color:#fff;border-color:#f0f0f0}.collapsible-card .ant-collapse-header{padding:0 12px;min-height:38px;display:flex;align-items:center;font-weight:600}.collapsible-card .ant-collapse-content{border-color:#f0f0f0}.collapsible-card .ant-collapse-content .ant-collapse-content-box{padding:var(--collapsible-card-body-padding, 12px)}.collapsible-card .ant-collapse-item{border-color:#f0f0f0}.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

@@ -1,6 +1,7 @@
 // Variables inlined for npm distribution
 :root {
   --p-theme-bg: #fff;
+  --collapsible-card-body-padding: 12px;
 }
 
 
@@ -308,6 +309,27 @@
     justify-content: flex-start;
   }
 }
+
+.collapsible-card {
+  background-color: #fff;
+  border-color: #f0f0f0;
+  .ant-collapse-header {
+    padding: 0 12px;
+    min-height: 38px;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+  }
+  .ant-collapse-content {
+    border-color: #f0f0f0;
+    .ant-collapse-content-box {
+      padding: var(--collapsible-card-body-padding, 12px);
+    }
+  }
+  .ant-collapse-item {
+    border-color: #f0f0f0;
+  }
+}
 /* #endregion */
 
 /* #region EVirtTable */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -46,7 +46,7 @@
     "email": "adoin@qq.com"
   },
   "dependencies": {
-    "e-virt-table": "^1.2.20",
+    "e-virt-table": "^1.2.27",
     "uuid": "^10.0.0",
     "xe-utils": "^3.7.6"
   },

package/src/declarations/antProxy.ts

@@ -120,6 +120,10 @@ export interface PFormGroupProps<F extends Recordable = Recordable> {
   tabLabel?: string;
   editAble?: boolean;
   showAdd?: boolean;
+  /* 是否启用折叠 */
+  collapsible?: boolean;
+  /** 是否默认折叠 */
+  defaultCollapsed?: boolean;
   lazyErrorMark?: boolean;
   forceRender?: boolean;
   /* 是否保持连续编号 */
@@ -399,6 +403,8 @@ export interface PFormGroupInstance {
   validateAll: () => Promise<void>;
   validate: (index: number, ignoreTabError?: boolean) => Promise<void>;
   validateFields: (index: number, fields: string[], ignoreTabError?: boolean) => Promise<void>;
+  collapse: () => void;
+  expand: () => void;
 }
 export interface PCanvasTableInstance<T extends Recordable = Recordable> {
   $table: InstanceType<typeof EVirtTable>;

package/src/packages/components/CollapseCard.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  interface Props {
+    /** 是否默认折叠 */
+    defaultCollapsed?: boolean;
+    title?: string;
+    /** 是否可以折叠 */
+    collapsible?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    title: undefined,
+    defaultCollapsed: false,
+    collapsible: false,
+  });
+  const slots = defineSlots<{
+    title: () => any;
+  }>();
+  const activeKey = ref(props.defaultCollapsed ? [] : ['content']);
+  defineExpose({
+    collapse: () => {
+      activeKey.value = [];
+    },
+    expand: () => {
+      activeKey.value = ['content'];
+    },
+  });
+</script>
+
+<template>
+  <a-collapse v-if="collapsible" v-model:active-key="activeKey" class="collapsible-card">
+    <a-collapse-panel key="content" force-render :header="title">
+      <template v-if="slots.title" #header>
+        <slot name="title" />
+      </template>
+      <slot />
+    </a-collapse-panel>
+  </a-collapse>
+  <a-card v-else size="small" :title="title">
+    <template v-if="slots.title" #title>
+      <slot name="title" />
+    </template>
+    <slot />
+  </a-card>
+</template>

package/src/packages/components/PFormGroup.vue

@@ -19,11 +19,12 @@
   import { valued } from '@/utils/is';
   import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
   import { $warning } from '@/hooks/useMessage';
+  import CollapseCard from './CollapseCard.vue';
 
   const useForm = Form.useForm;
   const tabsRef = ref<InstanceType<typeof Tabs>>();
   const props = defineProps<PFormGroupProps<F>>();
-  const rootRef = ref<InstanceType<typeof ACard>>();
+  const rootRef = ref<InstanceType<typeof CollapseCard>>();
   const model = defineModel({
     type: Array as PropType<Partial<F & { __index: number }>[]>,
     default: () => [],
@@ -146,6 +147,12 @@
     }
   });
   defineExpose({
+    collapse: () => {
+      rootRef.value?.collapse?.();
+    },
+    expand: () => {
+      rootRef.value?.expand?.();
+    },
     activeKey: computed(() => activeKey.value),
     setActiveKey,
     validateAll: () => {
@@ -227,7 +234,13 @@
   });
 </script>
 <template>
-  <a-card ref="rootRef" :title="title" size="small">
+  <collapse-card
+    ref="rootRef"
+    :title="title"
+    size="small"
+    :collapsible="collapsible"
+    :default-collapsed="defaultCollapsed"
+  >
     <a-spin v-if="loading" class="w-full" />
     <a-tabs
       v-else
@@ -281,5 +294,5 @@
         />
       </a-tab-pane>
     </a-tabs>
-  </a-card>
+  </collapse-card>
 </template>

package/src/packages/styles/index.scss

@@ -304,6 +304,27 @@
     justify-content: flex-start;
   }
 }
+
+.collapsible-card {
+  background-color: #fff;
+  border-color: #f0f0f0;
+  .ant-collapse-header {
+    padding: 0 12px;
+    min-height: 38px;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+  }
+  .ant-collapse-content {
+    border-color: #f0f0f0;
+    .ant-collapse-content-box {
+      padding: var(--collapsible-card-body-padding, 12px);
+    }
+  }
+  .ant-collapse-item {
+    border-color: #f0f0f0;
+  }
+}
 /* #endregion */
 
 /* #region EVirtTable */

package/src/packages/styles/variables.scss

@@ -1,3 +1,4 @@
 :root {
   --p-theme-bg: #fff;
+  --collapsible-card-body-padding: 12px;
 }