Skip to content

Commit e3cedcf

Browse files
aibayanyu20aibayanyu20
committed
feat: add components && imports
1 parent 503ff76 commit e3cedcf

15 files changed

+482
-65
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
dist
22
node_modules
3+
*.json

‎package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,19 @@
2727
"test": "vitest run",
2828
"test:watch": "vitest watch"
2929
},
30-
"dependencies": {
30+
"peerDependencies": {
3131
"@ant-design/icons-vue": "^6.1.0",
32-
"@nuxt/kit": "^3.5.2",
3332
"ant-design-vue": "4.0.0-rc.5"
3433
},
34+
"dependencies": {
35+
"@nuxt/kit": "^3.5.2"
36+
},
3537
"devDependencies": {
3638
"@nuxt/eslint-config": "^0.1.1",
3739
"@nuxt/module-builder": "^0.4.0",
3840
"@nuxt/schema": "^3.5.2",
41+
"@ant-design/icons-vue": "^6.1.0",
42+
"ant-design-vue": "4.0.0-rc.5",
3943
"@nuxt/test-utils": "^3.5.1",
4044
"@types/node": "^18",
4145
"changelogen": "^0.5.3",

‎playground/app.vue

Lines changed: 174 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,178 @@
11
<template>
2-
<div>
3-
Nuxt module playground!
4-
</div>
2+
<a-config-provider :theme="theme">
3+
<div class="container">
4+
<div>
5+
<a-space>
6+
<a-button @click="changeTheme('dark')">
7+
dark
8+
</a-button>
9+
<a-button @click="changeTheme('light')">
10+
light
11+
</a-button>
12+
</a-space>
13+
</div>
14+
<a-alert
15+
message="Success Text"
16+
type="success"
17+
/>
18+
<div>
19+
icon:
20+
<AlertFilled />
21+
<LoadingOutlined />
22+
</div>
23+
<a-table v-bind="tableProps" />
24+
<a-space>
25+
<a-button
26+
type="primary"
27+
@click="handleMessage('success')"
28+
>
29+
message success
30+
</a-button>
31+
<a-button @click="handleMessage('info')">
32+
message info
33+
</a-button>
34+
</a-space>
35+
<a-space>
36+
<a-button
37+
type="primary"
38+
@click="handleModal('success')"
39+
>
40+
modal success
41+
</a-button>
42+
<a-button @click="handleModal('info')">
43+
modal info
44+
</a-button>
45+
</a-space>
46+
<a-space>
47+
<a-button
48+
type="primary"
49+
@click="handleNotification('success')"
50+
>
51+
notification success
52+
</a-button>
53+
<a-button @click="handleNotification('info')">
54+
notification info
55+
</a-button>
56+
</a-space>
57+
</div>
58+
</a-config-provider>
559
</template>
660

7-
<script setup>
61+
<script setup lang="ts">
62+
import { theme as antdTheme } from "ant-design-vue"
63+
import { reactive } from "#imports";
64+
const theme = reactive({
65+
algorithm: antdTheme.defaultAlgorithm
66+
})
67+
68+
const color = reactive({
69+
bg:"#fff",
70+
color:"#000"
71+
})
72+
const changeTheme = (type:'dark' | 'light') => {
73+
if(type === 'dark'){
74+
theme.algorithm = antdTheme.darkAlgorithm
75+
color.bg = "#000"
76+
color.color = "#fff"
77+
}else{
78+
theme.algorithm = antdTheme.defaultAlgorithm
79+
color.bg = "#fff"
80+
color.color = "#000"
81+
}
82+
}
83+
84+
85+
const tableProps = reactive({
86+
dataSource:[
87+
{
88+
key: '1',
89+
name: 'Mike',
90+
age: 32,
91+
address: '10 Downing Street',
92+
},
93+
{
94+
key: '2',
95+
name: 'John',
96+
age: 42,
97+
address: '10 Downing Street',
98+
},
99+
],
100+
columns:[
101+
{
102+
title: 'Name',
103+
dataIndex: 'name',
104+
key: 'name',
105+
},
106+
{
107+
title: 'Age',
108+
dataIndex: 'age',
109+
key: 'age',
110+
},
111+
{
112+
title: 'Address',
113+
dataIndex: 'address',
114+
key: 'address',
115+
},
116+
]
117+
})
118+
119+
type StatusType = 'success' | 'info'
120+
121+
const handleMessage = (type:StatusType) => {
122+
if(type === 'success')
123+
message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
124+
else if(type === 'info'){
125+
message.info('This is a prompt message for info, and it will disappear in 10 seconds', 10);
126+
}
127+
}
128+
129+
const handleModal = (type:StatusType) =>{
130+
if(type === 'success')
131+
Modal.success({
132+
title: 'This is a success message',
133+
content: 'some messages...some messages...',
134+
});
135+
else if(type === 'info'){
136+
Modal.info({
137+
title: 'This is a info message',
138+
content: 'some messages...some messages...',
139+
});
140+
}
141+
}
142+
143+
const handleNotification = (type:StatusType) =>{
144+
if(type === 'success')
145+
notification.success({
146+
message: 'Notification Title',
147+
description:
148+
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
149+
});
150+
else if(type === 'info'){
151+
notification.info({
152+
message: 'Notification Title',
153+
description:
154+
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
155+
});
156+
}
157+
}
8158
</script>
159+
160+
<style>
161+
*{
162+
margin: 0;
163+
padding: 0;
164+
}
165+
.container{
166+
padding: 10px;
167+
display: flex;
168+
overflow-x: hidden;
169+
overflow-y: auto;
170+
flex-direction: column;
171+
gap: 10px;
172+
height: 100vh;
173+
width: 100vw;
174+
background-color: v-bind("color.bg");
175+
color: v-bind("color.color");
176+
}
177+
178+
</style>

‎playground/nuxt.config.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
11
export default defineNuxtConfig({
22
modules: ['../src/module'],
3-
antd: {}
3+
antd: {},
4+
imports:{
5+
autoImport:true
6+
},
7+
vite:{
8+
resolve:{
9+
alias:{
10+
'ant-design-vue/es':"ant-design-vue/es",
11+
'ant-design-vue':"ant-design-vue/es"
12+
}
13+
}
14+
}
415
})

‎playground/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"private": true,
3-
"name": "my-module-playground"
3+
"name": "ant-design-vue-nuxt-playground"
44
}

0 commit comments

Comments
 (0)