@peng_kai/kit 0.2.0-beta.30 → 0.2.0-beta.31
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/admin/components/filter/src/FilterDrawer.vue +153 -153
- package/admin/components/scroll-nav/index.ts +1 -1
- package/admin/components/text/index.ts +13 -13
- package/admin/components/text/src/Amount.vue +121 -121
- package/admin/components/text/src/Duration.vue +26 -26
- package/admin/components/text/src/Hash.vue +51 -51
- package/admin/components/text/src/createTagGetter.ts +13 -13
- package/admin/route-guards/index.ts +3 -3
- package/admin/route-guards/pageProgress.ts +27 -27
- package/admin/styles/classCover.scss +16 -3
- package/admin/styles/globalCover.scss +54 -54
- package/antd/components/InputNumberRange.vue +59 -59
- package/antd/directives/formLabelAlign.ts +36 -36
- package/antd/hooks/useAntdDrawer.ts +73 -73
- package/package.json +1 -1
- package/request/helpers.ts +68 -68
- package/request/interceptors/toLogin.ts +43 -43
- package/request/type.d.ts +92 -92
- package/stylelint.config.cjs +7 -7
- package/tsconfig.json +50 -50
- package/vue/components/infinite-query/index.ts +1 -1
- package/vue/components/infinite-query/src/InfiniteQuery.vue +199 -199
- package/vue/components/infinite-query/src/useCreateTrigger.ts +39 -39
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { Tooltip as ATooltip, TypographyLink as ATypographyLink } from 'ant-design-vue';
|
|
3
|
-
import { computed } from 'vue';
|
|
4
|
-
import { desensitize, getScanBrowser } from '../../../../utils';
|
|
5
|
-
|
|
6
|
-
type HashType = Parameters<typeof getScanBrowser>[2];
|
|
7
|
-
|
|
8
|
-
defineOptions({
|
|
9
|
-
inheritAttrs: false,
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
const props = withDefaults(
|
|
13
|
-
defineProps<{
|
|
14
|
-
hash: string
|
|
15
|
-
hide?: boolean
|
|
16
|
-
chain?: string
|
|
17
|
-
type?: HashType
|
|
18
|
-
empty?: string
|
|
19
|
-
}>(),
|
|
20
|
-
{
|
|
21
|
-
hide: true,
|
|
22
|
-
type: 'transaction',
|
|
23
|
-
empty: '-',
|
|
24
|
-
},
|
|
25
|
-
);
|
|
26
|
-
|
|
27
|
-
const href = computed(() => {
|
|
28
|
-
const { hash, chain, type } = props;
|
|
29
|
-
|
|
30
|
-
if (!hash || !chain || !type)
|
|
31
|
-
return;
|
|
32
|
-
return getScanBrowser(chain, hash, type);
|
|
33
|
-
});
|
|
34
|
-
const text = computed(() => {
|
|
35
|
-
if (props.hash)
|
|
36
|
-
return props.hide ? desensitize(props.hash) : props.hash;
|
|
37
|
-
else
|
|
38
|
-
return props.empty;
|
|
39
|
-
});
|
|
40
|
-
</script>
|
|
41
|
-
|
|
42
|
-
<template>
|
|
43
|
-
<ATypographyLink :href="href" :copyable="{ text: props.hash, tooltip: false }" target="_blank">
|
|
44
|
-
<ATooltip>
|
|
45
|
-
<template v-if="props.hide" #title>
|
|
46
|
-
<span class="font-mono">{{ props.hash }}</span>
|
|
47
|
-
</template>
|
|
48
|
-
<span v-bind="$attrs"><slot><span class="font-mono">{{ text }}</span></slot></span>
|
|
49
|
-
</ATooltip>
|
|
50
|
-
</ATypographyLink>
|
|
51
|
-
</template>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { Tooltip as ATooltip, TypographyLink as ATypographyLink } from 'ant-design-vue';
|
|
3
|
+
import { computed } from 'vue';
|
|
4
|
+
import { desensitize, getScanBrowser } from '../../../../utils';
|
|
5
|
+
|
|
6
|
+
type HashType = Parameters<typeof getScanBrowser>[2];
|
|
7
|
+
|
|
8
|
+
defineOptions({
|
|
9
|
+
inheritAttrs: false,
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
const props = withDefaults(
|
|
13
|
+
defineProps<{
|
|
14
|
+
hash: string
|
|
15
|
+
hide?: boolean
|
|
16
|
+
chain?: string
|
|
17
|
+
type?: HashType
|
|
18
|
+
empty?: string
|
|
19
|
+
}>(),
|
|
20
|
+
{
|
|
21
|
+
hide: true,
|
|
22
|
+
type: 'transaction',
|
|
23
|
+
empty: '-',
|
|
24
|
+
},
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
const href = computed(() => {
|
|
28
|
+
const { hash, chain, type } = props;
|
|
29
|
+
|
|
30
|
+
if (!hash || !chain || !type)
|
|
31
|
+
return;
|
|
32
|
+
return getScanBrowser(chain, hash, type);
|
|
33
|
+
});
|
|
34
|
+
const text = computed(() => {
|
|
35
|
+
if (props.hash)
|
|
36
|
+
return props.hide ? desensitize(props.hash) : props.hash;
|
|
37
|
+
else
|
|
38
|
+
return props.empty;
|
|
39
|
+
});
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<template>
|
|
43
|
+
<ATypographyLink :href="href" :copyable="{ text: props.hash, tooltip: false }" target="_blank">
|
|
44
|
+
<ATooltip>
|
|
45
|
+
<template v-if="props.hide" #title>
|
|
46
|
+
<span class="font-mono">{{ props.hash }}</span>
|
|
47
|
+
</template>
|
|
48
|
+
<span v-bind="$attrs"><slot><span class="font-mono">{{ text }}</span></slot></span>
|
|
49
|
+
</ATooltip>
|
|
50
|
+
</ATypographyLink>
|
|
51
|
+
</template>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { computed, h } from 'vue';
|
|
2
|
-
import { Tag as ATag } from 'ant-design-vue';
|
|
3
|
-
import type { TagProps } from 'ant-design-vue';
|
|
4
|
-
|
|
5
|
-
export function createTagGetter(typeMapFn: () => { [code: number | string]: [ text: string, color: TagProps['color'] ] }) {
|
|
6
|
-
const typeMap = computed(typeMapFn);
|
|
7
|
-
|
|
8
|
-
return (type: number | string) => {
|
|
9
|
-
const [text, color] = typeMap.value[type] ?? [];
|
|
10
|
-
|
|
11
|
-
return text ? h(ATag, { color }, () => text) : h('span', null, '-');
|
|
12
|
-
};
|
|
13
|
-
}
|
|
1
|
+
import { computed, h } from 'vue';
|
|
2
|
+
import { Tag as ATag } from 'ant-design-vue';
|
|
3
|
+
import type { TagProps } from 'ant-design-vue';
|
|
4
|
+
|
|
5
|
+
export function createTagGetter(typeMapFn: () => { [code: number | string]: [ text: string, color: TagProps['color'] ] }) {
|
|
6
|
+
const typeMap = computed(typeMapFn);
|
|
7
|
+
|
|
8
|
+
return (type: number | string) => {
|
|
9
|
+
const [text, color] = typeMap.value[type] ?? [];
|
|
10
|
+
|
|
11
|
+
return text ? h(ATag, { color }, () => text) : h('span', null, '-');
|
|
12
|
+
};
|
|
13
|
+
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { setupPageProgress } from './pageProgress';
|
|
2
|
-
export { setupPageTitle } from './pageTitle';
|
|
3
|
-
export { setupCollapseMenu } from './collapseMenu';
|
|
1
|
+
export { setupPageProgress } from './pageProgress';
|
|
2
|
+
export { setupPageTitle } from './pageTitle';
|
|
3
|
+
export { setupCollapseMenu } from './collapseMenu';
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import type { Router } from 'vue-router';
|
|
2
|
-
import { useStyleTag } from '@vueuse/core';
|
|
3
|
-
import NProgress from 'nprogress';
|
|
4
|
-
import 'nprogress/nprogress.css';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* 用于显示页面跳转时,页面顶部进度条
|
|
8
|
-
*/
|
|
9
|
-
export function setupPageProgress(router: Router) {
|
|
10
|
-
NProgress.configure({ showSpinner: false });
|
|
11
|
-
useStyleTag(`
|
|
12
|
-
#nprogress .bar {
|
|
13
|
-
height: 3px;
|
|
14
|
-
background: var(--antd-colorPrimary);
|
|
15
|
-
}
|
|
16
|
-
#nprogress .peg {
|
|
17
|
-
box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
|
|
18
|
-
}
|
|
19
|
-
`);
|
|
20
|
-
|
|
21
|
-
router.beforeEach(() => {
|
|
22
|
-
NProgress.start();
|
|
23
|
-
});
|
|
24
|
-
router.afterEach(() => {
|
|
25
|
-
setTimeout(() => NProgress.done(), 200);
|
|
26
|
-
});
|
|
27
|
-
}
|
|
1
|
+
import type { Router } from 'vue-router';
|
|
2
|
+
import { useStyleTag } from '@vueuse/core';
|
|
3
|
+
import NProgress from 'nprogress';
|
|
4
|
+
import 'nprogress/nprogress.css';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* 用于显示页面跳转时,页面顶部进度条
|
|
8
|
+
*/
|
|
9
|
+
export function setupPageProgress(router: Router) {
|
|
10
|
+
NProgress.configure({ showSpinner: false });
|
|
11
|
+
useStyleTag(`
|
|
12
|
+
#nprogress .bar {
|
|
13
|
+
height: 3px;
|
|
14
|
+
background: var(--antd-colorPrimary);
|
|
15
|
+
}
|
|
16
|
+
#nprogress .peg {
|
|
17
|
+
box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
|
|
18
|
+
}
|
|
19
|
+
`);
|
|
20
|
+
|
|
21
|
+
router.beforeEach(() => {
|
|
22
|
+
NProgress.start();
|
|
23
|
+
});
|
|
24
|
+
router.afterEach(() => {
|
|
25
|
+
setTimeout(() => NProgress.done(), 200);
|
|
26
|
+
});
|
|
27
|
+
}
|
|
@@ -196,11 +196,24 @@
|
|
|
196
196
|
flex-wrap: wrap;
|
|
197
197
|
--uno: 'gap-4 mb-4';
|
|
198
198
|
|
|
199
|
+
.ant-form-item-label {
|
|
200
|
+
line-height: 1.2em;
|
|
201
|
+
width: 4.8em;
|
|
202
|
+
text-align: start;
|
|
203
|
+
overflow: unset;
|
|
204
|
+
white-space: unset;
|
|
205
|
+
|
|
206
|
+
> label::after {
|
|
207
|
+
// display: none;
|
|
208
|
+
content: "";
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
199
212
|
.ant-form-item {
|
|
200
213
|
margin-bottom: 0;
|
|
201
|
-
min-width:
|
|
202
|
-
width:
|
|
203
|
-
max-width:
|
|
214
|
+
min-width: 250px;
|
|
215
|
+
width: 300px;
|
|
216
|
+
max-width: 380px;
|
|
204
217
|
flex: 1 1 auto;
|
|
205
218
|
}
|
|
206
219
|
}
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
// table 组件头部圆角设为 0
|
|
3
|
-
.ant-table-wrapper {
|
|
4
|
-
.ant-table .ant-table-header,
|
|
5
|
-
table,
|
|
6
|
-
.ant-table-container table > thead > tr:first-child > *:first-child,
|
|
7
|
-
.ant-table-container table > thead > tr:first-child > *:last-child {
|
|
8
|
-
border-radius: 0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.ant-pagination {
|
|
12
|
-
margin-bottom: 0;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
// 隐藏在 sticky 模式下的滚动条
|
|
18
|
-
.ant-table-sticky-scroll {
|
|
19
|
-
display: none;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// 卡片
|
|
23
|
-
.ant-card .ant-card-actions > li > span {
|
|
24
|
-
cursor: inherit;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// Tab 溢出出现下列框时
|
|
28
|
-
.ant-tabs-dropdown-menu-title-content {
|
|
29
|
-
display: flex;
|
|
30
|
-
align-items: center;
|
|
31
|
-
justify-content: space-between;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
// 表格
|
|
35
|
-
.ant-table-wrapper {
|
|
36
|
-
.ant-table-row-expand-icon-collapsed::before {
|
|
37
|
-
height: 1.5px;
|
|
38
|
-
}
|
|
39
|
-
.ant-table-row-expand-icon-collapsed::after {
|
|
40
|
-
width: 1.5px;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.ant-drawer {
|
|
45
|
-
&:focus {
|
|
46
|
-
outline: none;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&.ant-drawer-bottom .ant-drawer-content {
|
|
50
|
-
border-top-left-radius: 8px;
|
|
51
|
-
border-top-right-radius: 8px;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
// table 组件头部圆角设为 0
|
|
3
|
+
.ant-table-wrapper {
|
|
4
|
+
.ant-table .ant-table-header,
|
|
5
|
+
table,
|
|
6
|
+
.ant-table-container table > thead > tr:first-child > *:first-child,
|
|
7
|
+
.ant-table-container table > thead > tr:first-child > *:last-child {
|
|
8
|
+
border-radius: 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ant-pagination {
|
|
12
|
+
margin-bottom: 0;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
// 隐藏在 sticky 模式下的滚动条
|
|
18
|
+
.ant-table-sticky-scroll {
|
|
19
|
+
display: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// 卡片
|
|
23
|
+
.ant-card .ant-card-actions > li > span {
|
|
24
|
+
cursor: inherit;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Tab 溢出出现下列框时
|
|
28
|
+
.ant-tabs-dropdown-menu-title-content {
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: space-between;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// 表格
|
|
35
|
+
.ant-table-wrapper {
|
|
36
|
+
.ant-table-row-expand-icon-collapsed::before {
|
|
37
|
+
height: 1.5px;
|
|
38
|
+
}
|
|
39
|
+
.ant-table-row-expand-icon-collapsed::after {
|
|
40
|
+
width: 1.5px;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.ant-drawer {
|
|
45
|
+
&:focus {
|
|
46
|
+
outline: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&.ant-drawer-bottom .ant-drawer-content {
|
|
50
|
+
border-top-left-radius: 8px;
|
|
51
|
+
border-top-right-radius: 8px;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -1,59 +1,59 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { computed } from 'vue';
|
|
3
|
-
import { InputNumber as AInputNumber, Form } from 'ant-design-vue';
|
|
4
|
-
</script>
|
|
5
|
-
|
|
6
|
-
<script setup lang="ts">
|
|
7
|
-
const props = withDefaults(
|
|
8
|
-
defineProps<{
|
|
9
|
-
value: [number | undefined, number | undefined]
|
|
10
|
-
placeholder?: [string, string]
|
|
11
|
-
min?: number
|
|
12
|
-
max?: number
|
|
13
|
-
}>(),
|
|
14
|
-
{
|
|
15
|
-
min: Number.NEGATIVE_INFINITY,
|
|
16
|
-
max: Number.POSITIVE_INFINITY,
|
|
17
|
-
},
|
|
18
|
-
);
|
|
19
|
-
const emits = defineEmits<{
|
|
20
|
-
(e: 'update:value', value: typeof props.value): void
|
|
21
|
-
}>();
|
|
22
|
-
|
|
23
|
-
const formItemContext = Form.useInjectFormItemContext();
|
|
24
|
-
const minValue = computed({
|
|
25
|
-
get() {
|
|
26
|
-
return props.value[0];
|
|
27
|
-
},
|
|
28
|
-
set(value) {
|
|
29
|
-
updateValue(value, maxValue.value);
|
|
30
|
-
},
|
|
31
|
-
});
|
|
32
|
-
const maxValue = computed({
|
|
33
|
-
get() {
|
|
34
|
-
return props.value[1];
|
|
35
|
-
},
|
|
36
|
-
set(value) {
|
|
37
|
-
updateValue(minValue.value, value);
|
|
38
|
-
},
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
function updateValue(...args: typeof props.value) {
|
|
42
|
-
emits('update:value', args.sort());
|
|
43
|
-
formItemContext.onFieldChange();
|
|
44
|
-
}
|
|
45
|
-
</script>
|
|
46
|
-
|
|
47
|
-
<template>
|
|
48
|
-
<div class="flex items-center">
|
|
49
|
-
<AInputNumber
|
|
50
|
-
v-model:value="minValue" class="w-full" :min="props.min"
|
|
51
|
-
:max="props.max" :placeholder="props.placeholder?.[0]"
|
|
52
|
-
/>
|
|
53
|
-
<span> - </span>
|
|
54
|
-
<AInputNumber
|
|
55
|
-
v-model:value="maxValue" class="w-full" :min="props.min"
|
|
56
|
-
:max="props.max" :placeholder="props.placeholder?.[1]"
|
|
57
|
-
/>
|
|
58
|
-
</div>
|
|
59
|
-
</template>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { computed } from 'vue';
|
|
3
|
+
import { InputNumber as AInputNumber, Form } from 'ant-design-vue';
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<script setup lang="ts">
|
|
7
|
+
const props = withDefaults(
|
|
8
|
+
defineProps<{
|
|
9
|
+
value: [number | undefined, number | undefined]
|
|
10
|
+
placeholder?: [string, string]
|
|
11
|
+
min?: number
|
|
12
|
+
max?: number
|
|
13
|
+
}>(),
|
|
14
|
+
{
|
|
15
|
+
min: Number.NEGATIVE_INFINITY,
|
|
16
|
+
max: Number.POSITIVE_INFINITY,
|
|
17
|
+
},
|
|
18
|
+
);
|
|
19
|
+
const emits = defineEmits<{
|
|
20
|
+
(e: 'update:value', value: typeof props.value): void
|
|
21
|
+
}>();
|
|
22
|
+
|
|
23
|
+
const formItemContext = Form.useInjectFormItemContext();
|
|
24
|
+
const minValue = computed({
|
|
25
|
+
get() {
|
|
26
|
+
return props.value[0];
|
|
27
|
+
},
|
|
28
|
+
set(value) {
|
|
29
|
+
updateValue(value, maxValue.value);
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
const maxValue = computed({
|
|
33
|
+
get() {
|
|
34
|
+
return props.value[1];
|
|
35
|
+
},
|
|
36
|
+
set(value) {
|
|
37
|
+
updateValue(minValue.value, value);
|
|
38
|
+
},
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
function updateValue(...args: typeof props.value) {
|
|
42
|
+
emits('update:value', args.sort());
|
|
43
|
+
formItemContext.onFieldChange();
|
|
44
|
+
}
|
|
45
|
+
</script>
|
|
46
|
+
|
|
47
|
+
<template>
|
|
48
|
+
<div class="flex items-center">
|
|
49
|
+
<AInputNumber
|
|
50
|
+
v-model:value="minValue" class="w-full" :min="props.min"
|
|
51
|
+
:max="props.max" :placeholder="props.placeholder?.[0]"
|
|
52
|
+
/>
|
|
53
|
+
<span> - </span>
|
|
54
|
+
<AInputNumber
|
|
55
|
+
v-model:value="maxValue" class="w-full" :min="props.min"
|
|
56
|
+
:max="props.max" :placeholder="props.placeholder?.[1]"
|
|
57
|
+
/>
|
|
58
|
+
</div>
|
|
59
|
+
</template>
|
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
import type { App } from 'vue';
|
|
2
|
-
|
|
3
|
-
export function formLabelAlign(app: App) {
|
|
4
|
-
const directiveName = 'antd-form-label-align';
|
|
5
|
-
const resizeObserverKey = `${directiveName}@resizeObserver`;
|
|
6
|
-
|
|
7
|
-
function init(el: HTMLElement) {
|
|
8
|
-
const labels = el.querySelectorAll('.ant-form-item .ant-form-item-label');
|
|
9
|
-
const resizeObserver = new ResizeObserver((entries) => {
|
|
10
|
-
const widths = entries.map(e => e.borderBoxSize?.[0]?.inlineSize ?? 0);
|
|
11
|
-
const maxWidth = Math.max(...widths);
|
|
12
|
-
|
|
13
|
-
if (maxWidth <= 0)
|
|
14
|
-
return;
|
|
15
|
-
|
|
16
|
-
el.style.setProperty('--max-label-width', `${maxWidth}px`);
|
|
17
|
-
entries.forEach((e) => {
|
|
18
|
-
const target = e.target as HTMLElement;
|
|
19
|
-
target.style.setProperty('width', 'var(--max-label-width)');
|
|
20
|
-
});
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
Array.from(labels).forEach(label => resizeObserver.observe(label));
|
|
24
|
-
|
|
25
|
-
return resizeObserver;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
app.directive(directiveName, {
|
|
29
|
-
mounted(el: HTMLElement) {
|
|
30
|
-
(el as any)[resizeObserverKey] = init(el);
|
|
31
|
-
},
|
|
32
|
-
updated(el) {
|
|
33
|
-
(el as any)[resizeObserverKey] = init(el);
|
|
34
|
-
},
|
|
35
|
-
});
|
|
36
|
-
}
|
|
1
|
+
import type { App } from 'vue';
|
|
2
|
+
|
|
3
|
+
export function formLabelAlign(app: App) {
|
|
4
|
+
const directiveName = 'antd-form-label-align';
|
|
5
|
+
const resizeObserverKey = `${directiveName}@resizeObserver`;
|
|
6
|
+
|
|
7
|
+
function init(el: HTMLElement) {
|
|
8
|
+
const labels = el.querySelectorAll('.ant-form-item .ant-form-item-label');
|
|
9
|
+
const resizeObserver = new ResizeObserver((entries) => {
|
|
10
|
+
const widths = entries.map(e => e.borderBoxSize?.[0]?.inlineSize ?? 0);
|
|
11
|
+
const maxWidth = Math.max(...widths);
|
|
12
|
+
|
|
13
|
+
if (maxWidth <= 0)
|
|
14
|
+
return;
|
|
15
|
+
|
|
16
|
+
el.style.setProperty('--max-label-width', `${maxWidth}px`);
|
|
17
|
+
entries.forEach((e) => {
|
|
18
|
+
const target = e.target as HTMLElement;
|
|
19
|
+
target.style.setProperty('width', 'var(--max-label-width)');
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
Array.from(labels).forEach(label => resizeObserver.observe(label));
|
|
24
|
+
|
|
25
|
+
return resizeObserver;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
app.directive(directiveName, {
|
|
29
|
+
mounted(el: HTMLElement) {
|
|
30
|
+
(el as any)[resizeObserverKey] = init(el);
|
|
31
|
+
},
|
|
32
|
+
updated(el) {
|
|
33
|
+
(el as any)[resizeObserverKey] = init(el);
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
}
|
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
import { Button as AButton, Drawer as ADrawer, Space as ASpace } from 'ant-design-vue';
|
|
2
|
-
import { defineComponent, h, isProxy, reactive, toRef, toRefs } from 'vue';
|
|
3
|
-
import type { Component } from 'vue';
|
|
4
|
-
import type { ButtonProps, DrawerProps } from 'ant-design-vue';
|
|
5
|
-
import type { ComponentProps } from 'vue-component-type-helpers';
|
|
6
|
-
import type { Writable } from 'type-fest';
|
|
7
|
-
import { useComponentRef } from '../../vue';
|
|
8
|
-
|
|
9
|
-
const defaultDrawerProps: DrawerProps = { open: false, destroyOnClose: true, rootClassName: 'antd-cover__basic-drawer' };
|
|
10
|
-
|
|
11
|
-
interface IComponentConfig<Comp extends Component> {
|
|
12
|
-
is: Comp
|
|
13
|
-
props?: Writable<ComponentProps<Comp>>
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export function useAntdDrawer<Comp extends Component>(
|
|
17
|
-
comp: IComponentConfig<Comp> | Comp,
|
|
18
|
-
drawerProps = defaultDrawerProps,
|
|
19
|
-
) {
|
|
20
|
-
const _comp = ({ props: {}, ...((comp as any)?.is ? comp : { is: comp }) }) as Required<IComponentConfig<Comp>>;
|
|
21
|
-
const compProps = reactive(_comp.props);
|
|
22
|
-
const compRef = useComponentRef(_comp.is);
|
|
23
|
-
const _drawerProps: DrawerProps = reactive({
|
|
24
|
-
...defaultDrawerProps,
|
|
25
|
-
...isProxy(drawerProps) ? toRefs(drawerProps) : drawerProps,
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
const open = (newBodyProps?: Partial<typeof compProps>, newAntdModalProps?: Omit<Partial<DrawerProps>, 'open'>) => {
|
|
29
|
-
Object.assign(_drawerProps, newAntdModalProps);
|
|
30
|
-
Object.assign(compProps, newBodyProps);
|
|
31
|
-
_drawerProps.open = true;
|
|
32
|
-
};
|
|
33
|
-
const close = () => {
|
|
34
|
-
_drawerProps.open = false;
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const DrawerFooter = defineComponent({
|
|
38
|
-
setup() {
|
|
39
|
-
const cancelBtnProps: ButtonProps = reactive({ onClick: close });
|
|
40
|
-
const confirmBtnProps: ButtonProps = reactive({
|
|
41
|
-
type: 'primary',
|
|
42
|
-
loading: toRef(() => (compRef as any)?.loading),
|
|
43
|
-
onClick: () => (compRef as any)?.confirm?.(),
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
return { cancelBtnProps, confirmBtnProps };
|
|
47
|
-
},
|
|
48
|
-
render() {
|
|
49
|
-
const { cancelBtnProps, confirmBtnProps } = this;
|
|
50
|
-
|
|
51
|
-
return h(ASpace, {}, () => [
|
|
52
|
-
h(AButton, cancelBtnProps, () => '取消'),
|
|
53
|
-
h(AButton, confirmBtnProps, () => '确定'),
|
|
54
|
-
]);
|
|
55
|
-
},
|
|
56
|
-
});
|
|
57
|
-
const PresetComponent = defineComponent({
|
|
58
|
-
render() {
|
|
59
|
-
return h(ADrawer, _drawerProps, {
|
|
60
|
-
default: () => h(_comp.is, compProps as any),
|
|
61
|
-
});
|
|
62
|
-
},
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
_drawerProps.footer = _drawerProps.footer === undefined ? h(DrawerFooter) : _drawerProps.footer;
|
|
66
|
-
_drawerProps['onUpdate:open'] = (visiable) => {
|
|
67
|
-
_drawerProps.open = visiable;
|
|
68
|
-
};
|
|
69
|
-
(compProps as any).ref = compRef;
|
|
70
|
-
(compProps as any).onClose = close;
|
|
71
|
-
|
|
72
|
-
return { PresetComponent, drawerProps: _drawerProps, open, close };
|
|
73
|
-
}
|
|
1
|
+
import { Button as AButton, Drawer as ADrawer, Space as ASpace } from 'ant-design-vue';
|
|
2
|
+
import { defineComponent, h, isProxy, reactive, toRef, toRefs } from 'vue';
|
|
3
|
+
import type { Component } from 'vue';
|
|
4
|
+
import type { ButtonProps, DrawerProps } from 'ant-design-vue';
|
|
5
|
+
import type { ComponentProps } from 'vue-component-type-helpers';
|
|
6
|
+
import type { Writable } from 'type-fest';
|
|
7
|
+
import { useComponentRef } from '../../vue';
|
|
8
|
+
|
|
9
|
+
const defaultDrawerProps: DrawerProps = { open: false, destroyOnClose: true, rootClassName: 'antd-cover__basic-drawer' };
|
|
10
|
+
|
|
11
|
+
interface IComponentConfig<Comp extends Component> {
|
|
12
|
+
is: Comp
|
|
13
|
+
props?: Writable<ComponentProps<Comp>>
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export function useAntdDrawer<Comp extends Component>(
|
|
17
|
+
comp: IComponentConfig<Comp> | Comp,
|
|
18
|
+
drawerProps = defaultDrawerProps,
|
|
19
|
+
) {
|
|
20
|
+
const _comp = ({ props: {}, ...((comp as any)?.is ? comp : { is: comp }) }) as Required<IComponentConfig<Comp>>;
|
|
21
|
+
const compProps = reactive(_comp.props);
|
|
22
|
+
const compRef = useComponentRef(_comp.is);
|
|
23
|
+
const _drawerProps: DrawerProps = reactive({
|
|
24
|
+
...defaultDrawerProps,
|
|
25
|
+
...isProxy(drawerProps) ? toRefs(drawerProps) : drawerProps,
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
const open = (newBodyProps?: Partial<typeof compProps>, newAntdModalProps?: Omit<Partial<DrawerProps>, 'open'>) => {
|
|
29
|
+
Object.assign(_drawerProps, newAntdModalProps);
|
|
30
|
+
Object.assign(compProps, newBodyProps);
|
|
31
|
+
_drawerProps.open = true;
|
|
32
|
+
};
|
|
33
|
+
const close = () => {
|
|
34
|
+
_drawerProps.open = false;
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const DrawerFooter = defineComponent({
|
|
38
|
+
setup() {
|
|
39
|
+
const cancelBtnProps: ButtonProps = reactive({ onClick: close });
|
|
40
|
+
const confirmBtnProps: ButtonProps = reactive({
|
|
41
|
+
type: 'primary',
|
|
42
|
+
loading: toRef(() => (compRef as any)?.loading),
|
|
43
|
+
onClick: () => (compRef as any)?.confirm?.(),
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
return { cancelBtnProps, confirmBtnProps };
|
|
47
|
+
},
|
|
48
|
+
render() {
|
|
49
|
+
const { cancelBtnProps, confirmBtnProps } = this;
|
|
50
|
+
|
|
51
|
+
return h(ASpace, {}, () => [
|
|
52
|
+
h(AButton, cancelBtnProps, () => '取消'),
|
|
53
|
+
h(AButton, confirmBtnProps, () => '确定'),
|
|
54
|
+
]);
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
const PresetComponent = defineComponent({
|
|
58
|
+
render() {
|
|
59
|
+
return h(ADrawer, _drawerProps, {
|
|
60
|
+
default: () => h(_comp.is, compProps as any),
|
|
61
|
+
});
|
|
62
|
+
},
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
_drawerProps.footer = _drawerProps.footer === undefined ? h(DrawerFooter) : _drawerProps.footer;
|
|
66
|
+
_drawerProps['onUpdate:open'] = (visiable) => {
|
|
67
|
+
_drawerProps.open = visiable;
|
|
68
|
+
};
|
|
69
|
+
(compProps as any).ref = compRef;
|
|
70
|
+
(compProps as any).onClose = close;
|
|
71
|
+
|
|
72
|
+
return { PresetComponent, drawerProps: _drawerProps, open, close };
|
|
73
|
+
}
|