Skip to content

Commit f7c4a3c

Browse files
aibayanyu20aibayanyu20
committed
chore: test component
1 parent 210471d commit f7c4a3c

150 files changed

Lines changed: 6474 additions & 208 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎eslint.config.mjs‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,8 @@ export default createConfigForNuxt({
1616
},
1717
})
1818
.append(
19-
// your custom flat config here...
19+
{
20+
// Keep upstream copied basic demos as-is for accurate hydration reproduction.
21+
ignores: ['playground/components/basic-demos/**'],
22+
},
2023
)

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,11 @@
4949
"@nuxt/module-builder": "^1.0.2",
5050
"@nuxt/schema": "^4.3.1",
5151
"@nuxt/test-utils": "^4.0.0",
52+
"@types/jsdom": "^27.0.0",
5253
"@types/node": "latest",
5354
"changelogen": "^0.6.2",
5455
"eslint": "^9.39.2",
56+
"jsdom": "^28.0.0",
5557
"nitropack": "^2.13.1",
5658
"nuxt": "^4.3.1",
5759
"typescript": "~5.9.3",

‎playground/app.vue‎

Lines changed: 25 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,29 @@
1+
<script setup lang="ts">
2+
import { theme } from 'antdv-next'
3+
4+
const dark = ref(false)
5+
</script>
6+
17
<template>
2-
<a-config-provider :theme="{ zeroRuntime: true }">
3-
Nuxt module playground!
4-
<a-button type="primary">
5-
测试
6-
</a-button>
7-
<a-alert
8-
message="Antdv Next Alert 测试"
9-
type="success"
10-
show-icon
11-
/>
12-
<a-select style="width: 200px;" />
13-
<a-space
14-
direction="vertical"
15-
:size="16"
16-
>
17-
<a-space
18-
wrap
19-
:size="16"
20-
>
21-
<a-avatar :size="64">
22-
<template #icon>
23-
<UserOutlined />
24-
</template>
25-
</a-avatar>
26-
<a-avatar size="large">
27-
<template #icon>
28-
<UserOutlined />
29-
</template>
30-
</a-avatar>
31-
<a-avatar>
32-
<template #icon>
33-
<UserOutlined />
34-
</template>
35-
</a-avatar>
36-
<a-avatar size="small">
37-
<template #icon>
38-
<UserOutlined />
39-
</template>
40-
</a-avatar>
41-
<a-avatar :size="14">
42-
<template #icon>
43-
<UserOutlined />
44-
</template>
45-
</a-avatar>
46-
</a-space>
47-
<a-space
48-
wrap
49-
:size="16"
50-
>
51-
<a-avatar
52-
shape="square"
53-
:size="64"
8+
<a-config-provider :theme="{ algorithm: dark ? theme.darkAlgorithm : theme.defaultAlgorithm, zeroRuntime: true }">
9+
<a-layout style="min-height: 100vh;">
10+
<a-layout-header style="display: flex; align-items: center; gap: 12px;">
11+
<a-typography-title
12+
:level="4"
13+
style="margin: 0; color: #fff;"
5414
>
55-
<template #icon>
56-
<UserOutlined />
57-
</template>
58-
</a-avatar>
59-
<a-avatar
60-
shape="square"
61-
size="large"
62-
>
63-
<template #icon>
64-
<UserOutlined />
65-
</template>
66-
</a-avatar>
67-
<a-avatar shape="square">
68-
<template #icon>
69-
<UserOutlined />
70-
</template>
71-
</a-avatar>
72-
<a-avatar
73-
shape="square"
74-
size="small"
75-
>
76-
<template #icon>
77-
<UserOutlined />
78-
</template>
79-
</a-avatar>
80-
<a-avatar
81-
shape="square"
82-
:size="14"
83-
>
84-
<template #icon>
85-
<UserOutlined />
86-
</template>
87-
</a-avatar>
88-
</a-space>
89-
</a-space>
90-
<TableTest />
91-
<a-qrcode
92-
error-level="H"
93-
value="'https://www.antdv-next.com"
94-
icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
95-
/>
15+
Antdv Next Nuxt Playground
16+
</a-typography-title>
17+
<a-switch
18+
:checked="dark"
19+
checked-children="Dark"
20+
un-checked-children="Light"
21+
@update:checked="dark = !!$event"
22+
/>
23+
</a-layout-header>
24+
<a-layout-content style="padding: 24px;">
25+
<NuxtPage />
26+
</a-layout-content>
27+
</a-layout>
9628
</a-config-provider>
9729
</template>

‎playground/assets/entry.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
@import "antdv-next/dist/reset.css";
2-
@import "antdv-next/dist/antd.css";

‎playground/components/basic-demos/affix/demo.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
4+
const top = ref(100)
5+
const bottom = ref(100)
6+
</script>
7+
8+
<template>
9+
<a-affix :offset-top="top">
10+
<a-button type="primary" @click="() => top = top + 10">
11+
Affix top
12+
</a-button>
13+
</a-affix>
14+
<br>
15+
<a-affix :offset-bottom="bottom">
16+
<a-button type="primary" @click="() => bottom = bottom + 10">
17+
Affix bottom
18+
</a-button>
19+
</a-affix>
20+
</template>

‎playground/components/basic-demos/alert/demo.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<a-alert title="Success Text" type="success" />
3+
</template>

‎playground/components/basic-demos/anchor/demo.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<a-row>
3+
<a-col :span="16">
4+
<div id="part-1" style="height: 100vh;background: rgba(255,0,0,0.02)" />
5+
<div id="part-2" style="height: 100vh;background: rgba(0,255,0,0.02)" />
6+
<div id="part-3" style="height: 100vh;background: rgba(0,0,255,0.02)" />
7+
</a-col>
8+
<a-col :span="8">
9+
<a-anchor
10+
:items="[
11+
{
12+
key: 'part-1',
13+
href: '#part-1',
14+
title: 'Part 1',
15+
},
16+
{
17+
key: 'part-2',
18+
href: '#part-2',
19+
title: 'Part 2',
20+
},
21+
{
22+
key: 'part-3',
23+
href: '#part-3',
24+
title: 'Part 3',
25+
},
26+
]"
27+
/>
28+
</a-col>
29+
</a-row>
30+
</template>

‎playground/components/basic-demos/app/demo.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup lang="ts">
2+
import MyPage from './myPage.vue'
3+
</script>
4+
5+
<template>
6+
<a-app>
7+
<MyPage />
8+
</a-app>
9+
</template>

‎playground/components/basic-demos/app/myPage.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script setup lang="ts">
2+
import { App } from 'antdv-next'
3+
4+
const { message, modal, notification } = App.useApp()
5+
6+
function showMessage() {
7+
message.success('Success!')
8+
}
9+
10+
function showModal() {
11+
modal.warning({
12+
title: 'This is a warning message',
13+
content: 'some messages...some messages...',
14+
})
15+
}
16+
17+
function showNotification() {
18+
notification.info({
19+
title: 'Notification topLeft',
20+
description: 'Hello, Antdv Next!!',
21+
placement: 'topLeft',
22+
})
23+
}
24+
</script>
25+
26+
<template>
27+
<a-space wrap>
28+
<a-button type="primary" @click="showMessage">
29+
Open message
30+
</a-button>
31+
<a-button type="primary" @click="showModal">
32+
Open modal
33+
</a-button>
34+
<a-button type="primary" @click="showNotification">
35+
Open notification
36+
</a-button>
37+
</a-space>
38+
</template>

‎playground/components/basic-demos/auto-complete/demo.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
4+
const value = ref('')
5+
const options = ref<{ value: string }[]>([])
6+
const anotherOptions = ref<{ value: string }[]>([])
7+
8+
const mockVal = (str: string, repeat = 1) => ({ value: str.repeat(repeat) })
9+
10+
function getPanelValue(searchText: string) {
11+
return searchText
12+
? [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]
13+
: []
14+
}
15+
16+
function handleSearch(text: string) {
17+
options.value = getPanelValue(text)
18+
}
19+
20+
function handleAnotherSearch(text: string) {
21+
anotherOptions.value = getPanelValue(text)
22+
}
23+
24+
function handleSelect(data: string) {
25+
console.log('onSelect', data)
26+
}
27+
</script>
28+
29+
<template>
30+
<a-flex vertical gap="middle">
31+
<a-auto-complete
32+
:options="options"
33+
style="width: 200px"
34+
placeholder="input here"
35+
:show-search="{ onSearch: handleSearch }"
36+
@select="handleSelect"
37+
/>
38+
<a-auto-complete
39+
v-model:value="value"
40+
:options="anotherOptions"
41+
style="width: 200px"
42+
placeholder="control mode"
43+
:show-search="{ onSearch: handleAnotherSearch }"
44+
@select="handleSelect"
45+
/>
46+
</a-flex>
47+
</template>

0 commit comments

Comments
 (0)