@vue-ui-kit/ant 2.0.7 → 2.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +3 -3
- package/dist/declarations/antProxy.d.ts +3 -0
- package/dist/es/index.js +1686 -1604
- package/dist/packages/components/CollapseCard.vue.d.ts +33 -0
- package/dist/packages/components/PFormGroup.vue.d.ts +2 -0
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/declarations/antProxy.ts +4 -0
- package/src/packages/components/CollapseCard.vue +74 -0
- package/src/packages/components/PFormGroup.vue +10 -3
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
interface Props {
|
|
2
|
+
/** 是否默认折叠 */
|
|
3
|
+
defaultCollapsed?: boolean;
|
|
4
|
+
title?: string;
|
|
5
|
+
/** 是否可以折叠 */
|
|
6
|
+
collapsible?: boolean;
|
|
7
|
+
}
|
|
8
|
+
declare function __VLS_template(): {
|
|
9
|
+
attrs: Partial<{}>;
|
|
10
|
+
slots: Readonly<{
|
|
11
|
+
title: () => any;
|
|
12
|
+
}> & {
|
|
13
|
+
title: () => any;
|
|
14
|
+
};
|
|
15
|
+
refs: {};
|
|
16
|
+
rootEl: any;
|
|
17
|
+
};
|
|
18
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
19
|
+
declare const __VLS_component: import('vue').DefineComponent<Props, {
|
|
20
|
+
collapse: () => void;
|
|
21
|
+
expand: () => void;
|
|
22
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
23
|
+
title: string;
|
|
24
|
+
defaultCollapsed: boolean;
|
|
25
|
+
collapsible: boolean;
|
|
26
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
27
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
28
|
+
export default _default;
|
|
29
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
30
|
+
new (): {
|
|
31
|
+
$slots: S;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
@@ -10,6 +10,8 @@ declare const _default: <F extends Recordable = Recordable>(__VLS_props: NonNull
|
|
|
10
10
|
}>[];
|
|
11
11
|
} & PFormGroupProps<F>) & Partial<{}>> & import('vue').PublicProps;
|
|
12
12
|
expose(exposed: import('vue').ShallowUnwrapRef<{
|
|
13
|
+
collapse: () => void;
|
|
14
|
+
expand: () => void;
|
|
13
15
|
activeKey: import('vue').ComputedRef<number>;
|
|
14
16
|
setActiveKey: (key: number) => void;
|
|
15
17
|
validateAll: () => Promise<PromiseSettledResult<any>[]>;
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8"
|
|
1
|
+
@charset "UTF-8";.collapsible-card[data-v-e5901b25]{background-color:#fff;border-color:#f0f0f0}.collapsible-card[data-v-e5901b25] .ant-collapse-header{padding:0 12px;min-height:38px;display:flex;align-items:center;font-weight:600}.collapsible-card[data-v-e5901b25] .ant-collapse-content{border-color:#f0f0f0}.collapsible-card[data-v-e5901b25] .ant-collapse-content .ant-collapse-content-box{padding:var(--collapsible-card-body-padding, 12px)}.collapsible-card[data-v-e5901b25] .ant-collapse-item{border-color:#f0f0f0}: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)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-ui-kit/ant",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.8",
|
|
4
4
|
"description": "Vue3 UI Kit based on Ant Design",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/cjs/index.js",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"email": "adoin@qq.com"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"e-virt-table": "^1.2.
|
|
49
|
+
"e-virt-table": "^1.2.27",
|
|
50
50
|
"uuid": "^10.0.0",
|
|
51
51
|
"xe-utils": "^3.7.6"
|
|
52
52
|
},
|
|
@@ -120,6 +120,10 @@ export interface PFormGroupProps<F extends Recordable = Recordable> {
|
|
|
120
120
|
tabLabel?: string;
|
|
121
121
|
editAble?: boolean;
|
|
122
122
|
showAdd?: boolean;
|
|
123
|
+
/* 是否启用折叠 */
|
|
124
|
+
collapsible?: boolean;
|
|
125
|
+
/** 是否默认折叠 */
|
|
126
|
+
defaultCollapsed?: boolean
|
|
123
127
|
lazyErrorMark?: boolean;
|
|
124
128
|
forceRender?: boolean;
|
|
125
129
|
/* 是否保持连续编号 */
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
/** 是否默认折叠 */
|
|
6
|
+
defaultCollapsed?: boolean
|
|
7
|
+
title?: string
|
|
8
|
+
/** 是否可以折叠 */
|
|
9
|
+
collapsible?: boolean
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
13
|
+
title: undefined,
|
|
14
|
+
defaultCollapsed: false,
|
|
15
|
+
collapsible: false,
|
|
16
|
+
})
|
|
17
|
+
const slots = defineSlots<{
|
|
18
|
+
title: () => any
|
|
19
|
+
}>()
|
|
20
|
+
const activeKey = ref(props.defaultCollapsed ? [] : ['content'])
|
|
21
|
+
defineExpose({
|
|
22
|
+
collapse: () => {
|
|
23
|
+
activeKey.value = []
|
|
24
|
+
},
|
|
25
|
+
expand: () => {
|
|
26
|
+
activeKey.value = ['content']
|
|
27
|
+
},
|
|
28
|
+
})
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<template>
|
|
32
|
+
<a-collapse
|
|
33
|
+
v-if="collapsible"
|
|
34
|
+
v-model:active-key="activeKey"
|
|
35
|
+
class="collapsible-card"
|
|
36
|
+
>
|
|
37
|
+
<a-collapse-panel key="content" force-render :header="title">
|
|
38
|
+
<template v-if="slots.title" #header>
|
|
39
|
+
<slot name="title" />
|
|
40
|
+
</template>
|
|
41
|
+
<slot />
|
|
42
|
+
</a-collapse-panel>
|
|
43
|
+
</a-collapse>
|
|
44
|
+
<a-card v-else size="small" :title="title">
|
|
45
|
+
<template v-if="slots.title" #title>
|
|
46
|
+
<slot name="title" />
|
|
47
|
+
</template>
|
|
48
|
+
<slot />
|
|
49
|
+
</a-card>
|
|
50
|
+
</template>
|
|
51
|
+
|
|
52
|
+
<style scoped lang="scss">
|
|
53
|
+
//样式改成card样式
|
|
54
|
+
.collapsible-card {
|
|
55
|
+
background-color: #fff;
|
|
56
|
+
border-color: #f0f0f0;
|
|
57
|
+
:deep(.ant-collapse-header) {
|
|
58
|
+
padding: 0 12px;
|
|
59
|
+
min-height: 38px;
|
|
60
|
+
display: flex;
|
|
61
|
+
align-items: center;
|
|
62
|
+
font-weight: 600;
|
|
63
|
+
}
|
|
64
|
+
:deep(.ant-collapse-content) {
|
|
65
|
+
border-color: #f0f0f0;
|
|
66
|
+
.ant-collapse-content-box {
|
|
67
|
+
padding: var(--collapsible-card-body-padding, 12px);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
:deep(.ant-collapse-item) {
|
|
71
|
+
border-color: #f0f0f0;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
</style>
|
|
@@ -19,11 +19,12 @@
|
|
|
19
19
|
import { valued } from '@/utils/is';
|
|
20
20
|
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
|
|
21
21
|
import { $warning } from '@/hooks/useMessage';
|
|
22
|
+
import CollapseCard from './CollapseCard.vue';
|
|
22
23
|
|
|
23
24
|
const useForm = Form.useForm;
|
|
24
25
|
const tabsRef = ref<InstanceType<typeof Tabs>>();
|
|
25
26
|
const props = defineProps<PFormGroupProps<F>>();
|
|
26
|
-
const rootRef = ref<InstanceType<typeof
|
|
27
|
+
const rootRef = ref<InstanceType<typeof CollapseCard>>();
|
|
27
28
|
const model = defineModel({
|
|
28
29
|
type: Array as PropType<Partial<F & { __index: number }>[]>,
|
|
29
30
|
default: () => [],
|
|
@@ -146,6 +147,12 @@
|
|
|
146
147
|
}
|
|
147
148
|
});
|
|
148
149
|
defineExpose({
|
|
150
|
+
collapse: () => {
|
|
151
|
+
rootRef.value?.collapse?.();
|
|
152
|
+
},
|
|
153
|
+
expand: () => {
|
|
154
|
+
rootRef.value?.expand?.();
|
|
155
|
+
},
|
|
149
156
|
activeKey: computed(() => activeKey.value),
|
|
150
157
|
setActiveKey,
|
|
151
158
|
validateAll: () => {
|
|
@@ -227,7 +234,7 @@
|
|
|
227
234
|
});
|
|
228
235
|
</script>
|
|
229
236
|
<template>
|
|
230
|
-
<
|
|
237
|
+
<collapse-card ref="rootRef" :title="title" size="small" :collapsible="collapsible" :default-collapsed="defaultCollapsed">
|
|
231
238
|
<a-spin v-if="loading" class="w-full" />
|
|
232
239
|
<a-tabs
|
|
233
240
|
v-else
|
|
@@ -281,5 +288,5 @@
|
|
|
281
288
|
/>
|
|
282
289
|
</a-tab-pane>
|
|
283
290
|
</a-tabs>
|
|
284
|
-
</
|
|
291
|
+
</collapse-card>
|
|
285
292
|
</template>
|