Skip to content

Commit 5a0fc97

Browse files
cc-heartscc-hearts
committed
refactor(attachments demos): migrate components to use ax- prefix and update placeholder handling
1 parent bcfb7b9 commit 5a0fc97

File tree

10 files changed

+374
-265
lines changed

10 files changed

+374
-265
lines changed

‎packages/docs/src/pages/components/attachments/demo/_semantic.vue‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<script setup lang="ts">
22
import { CloudUploadOutlined } from "@antdv-next/icons";
3-
import { Attachments } from "@antdv-next/x";
4-
import { Divider, Flex } from "antdv-next";
5-
import { computed, h } from "vue";
3+
import { computed } from "vue";
64
75
import { SemanticPreview } from "@/components/semantic";
86
import { useLocale } from "@/composables/use-locale";
@@ -77,7 +75,7 @@ const withItemSemantics = computed(() => [
7775
</script>
7876

7977
<template>
80-
<Flex vertical>
78+
<a-flex vertical>
8179
<SemanticPreview
8280
component-name="Attachments"
8381
:semantics="[
@@ -86,28 +84,31 @@ const withItemSemantics = computed(() => [
8684
]"
8785
>
8886
<template #default="{ classes }">
89-
<Attachments
87+
<ax-attachments
9088
:classes="classes"
9189
:placeholder="{
92-
icon: h(CloudUploadOutlined),
9390
title: 'Upload File',
9491
description: 'Drag or click to upload file.',
9592
}"
96-
/>
93+
>
94+
<template #placeholder-icon>
95+
<CloudUploadOutlined />
96+
</template>
97+
</ax-attachments>
9798
</template>
9899
</SemanticPreview>
99100

100-
<Divider :style="{ margin: 0, padding: 0 }" />
101+
<a-divider :style="{ margin: 0, padding: 0 }" />
101102

102103
<SemanticPreview
103104
component-name="Attachments"
104105
:semantics="withItemSemantics"
105106
>
106107
<template #default="{ classes }">
107-
<Attachments :items="items" :classes="classes" />
108+
<ax-attachments :items="items" :classes="classes" />
108109
</template>
109110
</SemanticPreview>
110-
</Flex>
111+
</a-flex>
111112
</template>
112113

113114
<docs lang="zh-CN">

‎packages/docs/src/pages/components/attachments/demo/basic.vue‎

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,46 @@
11
<template>
2-
<App>
2+
<a-app>
33
<div ref="containerRef">
4-
<Flex vertical gap="middle" align="flex-start">
5-
<Sender :prefix="prefixRender" />
4+
<a-flex vertical gap="middle" align="flex-start">
5+
<ax-sender>
6+
<template #prefix>
7+
<ax-attachments
8+
:before-upload="() => false"
9+
:on-change="onChange"
10+
:get-drop-container="getDropContainer"
11+
:placeholder="placeholder"
12+
>
13+
<template #placeholder-icon>
14+
<CloudUploadOutlined />
15+
</template>
16+
<a-button type="text">
17+
<template #icon>
18+
<LinkOutlined />
19+
</template>
20+
</a-button>
21+
</ax-attachments>
22+
</template>
23+
</ax-sender>
624

7-
<Switch
25+
<a-switch
826
v-model:checked="fullScreenDrop"
927
checked-children="Full screen drop"
1028
un-checked-children="Full screen drop"
1129
/>
12-
</Flex>
30+
</a-flex>
1331
</div>
14-
</App>
32+
</a-app>
1533
</template>
1634

1735
<script setup lang="ts">
1836
import { CloudUploadOutlined, LinkOutlined } from "@antdv-next/icons";
19-
import { Attachments, Sender } from "@antdv-next/x";
20-
import { App, Button, Flex, Switch, message } from "antdv-next";
21-
import { h, ref } from "vue";
37+
import { message } from "antdv-next";
38+
import { ref } from "vue";
2239
2340
const fullScreenDrop = ref(false);
2441
const containerRef = ref<HTMLDivElement>();
2542
2643
const placeholder = {
27-
icon: h(CloudUploadOutlined),
2844
title: "Drag & Drop files here",
2945
description: "Support file type: image, video, audio, document, etc.",
3046
};
@@ -37,18 +53,12 @@ const onChange = ({ file }: { file?: { name?: string } }) => {
3753
message.info(`Mock upload: ${file.name}`);
3854
}
3955
};
40-
41-
const prefixRender = () =>
42-
h(
43-
Attachments,
44-
{
45-
beforeUpload: () => false,
46-
onChange,
47-
getDropContainer,
48-
placeholder,
49-
},
50-
{
51-
default: () => h(Button, { type: "text", icon: h(LinkOutlined) }),
52-
},
53-
);
5456
</script>
57+
58+
<docs lang="zh-CN">
59+
基础用法，可以通过 `getDropContainer` 支持拖拽上传。
60+
</docs>
61+
62+
<docs lang="en-US">
63+
Basic usage. You can use `getDropContainer` to support drag and drop upload.
64+
</docs>

‎packages/docs/src/pages/components/attachments/demo/overflow.vue‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<Flex vertical gap="middle">
3-
<Flex gap="middle" align="center">
4-
<Segmented
2+
<a-flex vertical gap="middle">
3+
<a-flex gap="middle" align="center">
4+
<a-segmented
55
v-model:value="overflow"
66
:options="[
77
{ value: 'wrap', label: 'Wrap' },
@@ -10,34 +10,36 @@
1010
]"
1111
:style="{ marginInlineEnd: 'auto' }"
1212
/>
13-
<Switch
13+
<a-switch
1414
v-model:checked="hasData"
1515
checked-children="Data"
1616
un-checked-children="Data"
1717
/>
18-
<Switch
18+
<a-switch
1919
v-model:checked="disabled"
2020
checked-children="Disabled"
2121
un-checked-children="Disabled"
2222
/>
23-
</Flex>
23+
</a-flex>
2424

25-
<Attachments
25+
<ax-attachments
2626
:overflow="overflow"
2727
:items="items"
2828
@change="onChange"
2929
:before-upload="() => false"
3030
:placeholder="placeholder"
3131
:disabled="disabled"
32-
/>
33-
</Flex>
32+
>
33+
<template #placeholder-icon>
34+
<CloudUploadOutlined />
35+
</template>
36+
</ax-attachments>
37+
</a-flex>
3438
</template>
3539

3640
<script setup lang="ts">
3741
import { CloudUploadOutlined } from "@antdv-next/icons";
38-
import { Attachments } from "@antdv-next/x";
39-
import { Flex, Segmented, Switch } from "antdv-next";
40-
import { computed, h, ref } from "vue";
42+
import { computed, ref } from "vue";
4143
4244
interface Attachment {
4345
uid: string;
@@ -62,7 +64,6 @@ const presetFiles: Attachment[] = Array.from({ length: 30 }).map(
6264
);
6365
6466
const placeholder = {
65-
icon: h(CloudUploadOutlined),
6667
title: "Click or Drop files here",
6768
description: "Support file type: image, video, audio, document, etc.",
6869
};
@@ -82,3 +83,11 @@ const onChange = ({ fileList }: { fileList: Attachment[] }) => {
8283
items.value = fileList;
8384
};
8485
</script>
86+
87+
<docs lang="zh-CN">
88+
控制附件超出区域长度时的展示方式。
89+
</docs>
90+
91+
<docs lang="en-US">
92+
Controls the layout of attachments when they exceed the area.
93+
</docs>

‎packages/docs/src/pages/components/attachments/demo/placeholder.vue‎

Lines changed: 62 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<App>
3-
<Flex
2+
<a-app>
3+
<a-flex
44
vertical
55
gap="middle"
66
:style="{
@@ -9,7 +9,7 @@
99
}"
1010
>
1111
<div :style="sharedBorderStyle">
12-
<Attachments
12+
<ax-attachments
1313
:before-upload="() => false"
1414
:items="items"
1515
@change="onChange"
@@ -18,41 +18,80 @@
1818
</div>
1919

2020
<div :style="sharedBorderStyle">
21-
<Attachments
21+
<ax-attachments
2222
:before-upload="() => false"
2323
:items="items"
2424
@change="onChange"
2525
:placeholder="getPlaceholderFn(customPlaceholderNode)"
26-
/>
26+
>
27+
<template #placeholder="{ type }">
28+
<a-result
29+
v-if="type === 'inline'"
30+
title="Custom Placeholder Node"
31+
:style="{ padding: 0 }"
32+
>
33+
<template #icon>
34+
<CloudUploadOutlined />
35+
</template>
36+
<template #extra>
37+
<a-button type="primary">Do Upload</a-button>
38+
</template>
39+
</a-result>
40+
<template v-else>Drop file here</template>
41+
</template>
42+
</ax-attachments>
43+
</div>
44+
45+
<div :style="sharedBorderStyle">
46+
<ax-attachments
47+
:before-upload="() => false"
48+
:items="items"
49+
@change="onChange"
50+
:placeholder="getPlaceholderFn(defaultInlinePlaceholder)"
51+
>
52+
<template #placeholder-icon="{ originNode }">
53+
<CloudUploadOutlined style="color: #1677ff" />
54+
<template v-if="!originNode" />
55+
</template>
56+
<template #placeholder-title="{ type, originNode }">
57+
{{ type === "drop" ? "Drop file here" : originNode }}
58+
</template>
59+
<template #placeholder-description="{ type, originNode }">
60+
{{
61+
type === "drop"
62+
? "Release the mouse to start selecting files."
63+
: originNode
64+
}}
65+
</template>
66+
</ax-attachments>
2767
</div>
2868

29-
<Flex gap="middle">
30-
<Button
69+
<a-flex gap="middle">
70+
<a-button
3171
:style="{ flex: '1 1 50%' }"
3272
:disabled="!!items.length"
3373
type="primary"
3474
@click="fillFiles"
3575
>
3676
Fill Files
37-
</Button>
38-
<Button
77+
</a-button>
78+
<a-button
3979
:style="{ flex: '1 1 50%' }"
4080
:disabled="!items.length"
4181
@click="resetFiles"
4282
>
4383
Reset Files
44-
</Button>
45-
</Flex>
46-
</Flex>
47-
</App>
84+
</a-button>
85+
</a-flex>
86+
</a-flex>
87+
</a-app>
4888
</template>
4989

5090
<script setup lang="ts">
5191
import type { VNodeChild } from "vue";
5292
5393
import { CloudUploadOutlined } from "@antdv-next/icons";
54-
import { Attachments } from "@antdv-next/x";
55-
import { App, Button, Flex, Result, theme } from "antdv-next";
94+
import { Button, Result, theme } from "antdv-next";
5695
import { h, ref } from "vue";
5796
5897
const { token } = theme.useToken();
@@ -185,3 +224,11 @@ const resetFiles = () => {
185224
items.value = [];
186225
};
187226
</script>
227+
228+
<docs lang="zh-CN">
229+
修改占位信息。
230+
</docs>
231+
232+
<docs lang="en-US">
233+
Modify placeholder information.
234+
</docs>

0 commit comments

Comments
 (0)