Skip to content
This repository was archived by the owner on Jan 9, 2022. It is now read-only.

Commit 8a2905c

Browse files
committed
feat: upgrade demo
1 parent 23f0b81 commit 8a2905c

File tree

10 files changed

+96
-12
lines changed

10 files changed

+96
-12
lines changed

demo/src/App.vue

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,41 @@
11
<template>
2-
<div class="app p-3">
3-
<DialogLayout />
2+
<div
3+
class="app"
4+
p="x-5 y-12"
5+
gradient="to-r from-purple-400 via-pink-500 to-red-500"
6+
>
7+
<div
8+
class="container"
9+
bg="white"
10+
p="y-8 x-6"
11+
m="x-auto"
12+
border="rounded"
13+
>
14+
<div
15+
class="flex items-end"
16+
m="b-8"
17+
>
18+
<h1
19+
m="r-4"
20+
>
21+
Vue Dialog
22+
</h1>
23+
24+
<a
25+
m="r-2"
26+
href="https://www.npmjs.com/package/gitart-vue-dialog"
27+
target="_blank"
28+
>
29+
npm
30+
</a>
31+
32+
<a href="https://github.com/MichaelGitArt/gitart-vue-dialog" target="_blank">
33+
github
34+
</a>
35+
</div>
36+
37+
<DialogLayout />
38+
</div>
439
</div>
540
</template>
641

demo/src/components/Dialog/DialogToolbar.vue

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
<template>
22
<div
3-
class="flex justify-between items-center"
3+
class="flex"
4+
justify="between"
5+
items="center"
46
p="y-3 x-5"
5-
shadow="lg"
7+
:shadow="shadow ? 'lg' : ''"
68
>
79
<slot />
810

911
<div
10-
class="w-8 h-8 flex items-center justify-center cursor-pointer"
12+
class="flex transition"
13+
cursor="pointer"
14+
h="8"
15+
w="8"
16+
justify="center"
17+
items="center"
1118
text="red-500"
19+
border="rounded-full"
1220
bg="gray-200 hover:gray-300"
1321
p="a-2"
1422

@@ -25,6 +33,13 @@ import { defineComponent } from 'vue'
2533
export default defineComponent({
2634
name: 'DialogToolbar',
2735
36+
props: {
37+
shadow: {
38+
type: Boolean,
39+
default: true,
40+
},
41+
},
42+
2843
emits: ['close'],
2944
3045
setup(_, { emit }) {

demo/src/components/Dialogs/BaseDialog/BaseDialog.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
:max-width="400"
55
:depressed="depressed"
66
>
7-
<h4 class="mb-3 text-lg font-medium">
7+
<h4 class="mb-3">
88
Base component
99
</h4>
1010

demo/src/components/Dialogs/BaseDialog/BaseDialogWrapper.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div>
33
<BaseDialog v-model="model" />
44
<Btn @click="open">
5-
BaseDialog
5+
Base
66
</Btn>
77
</div>
88
</template>

demo/src/components/Dialogs/StyledDialog/StyledDialog.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
border="rounded"
99
>
1010
<DialogToolbar @close="onClose">
11-
<h4 class="text-lg font-medium">
11+
<h4>
1212
Styled Dialog
1313
</h4>
1414
</DialogToolbar>

demo/src/components/Dialogs/StyledDialog/StyledDialogWrapper.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<StyledDialog v-model="model" />
44

55
<Btn @click="open">
6-
StyledDialog
6+
Styled
77
</Btn>
88
</div>
99
</template>

demo/src/scss/main.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@import 'plugin-css'
1+
@import 'plugin-css';

demo/src/scss/plugin-css-placeholder.css

Whitespace-only changes.

demo/vite.config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import WindiCSS from 'vite-plugin-windicss'
55

66
export default ({ mode }: { mode: 'production'| 'development' }) => {
77
const dialogPlugin = mode === 'development'
8-
? path.resolve(__dirname, '../dist/index.js')
8+
? path.resolve(__dirname, '../src/index.ts')
99
: 'gitart-vue-dialog'
1010

1111
const dialogPluginCss = mode === 'development'
12-
? path.resolve(__dirname, '../dist/style.css')
12+
? path.resolve(__dirname, './src/scss/plugin-css-placeholder.css')
1313
: 'gitart-vue-dialog/dist/style.css'
1414

1515
return defineConfig({

demo/windi.config.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// windi.config.js
22
import { defineConfig } from 'windicss/helpers'
3+
import plugin from 'windicss/plugin'
34

45
export default defineConfig({
56
attributify: true,
@@ -9,4 +10,37 @@ export default defineConfig({
910
'.git/**/*',
1011
],
1112
},
13+
14+
plugins: [
15+
plugin(({ addBase, theme }) => {
16+
addBase({
17+
'h1': {
18+
fontSize: theme('fontSize.3xl'),
19+
fontWeight: theme('fontWeight.semibold'),
20+
},
21+
'h2': {
22+
fontSize: theme('fontSize.2xl'),
23+
fontWeight: theme('fontWeight.semibold'),
24+
},
25+
'h3': {
26+
fontSize: theme('fontSize.xl'),
27+
fontWeight: theme('fontWeight.semibold'),
28+
},
29+
'h4': {
30+
fontSize: theme('fontSize.lg'),
31+
fontWeight: theme('fontWeight.medium'),
32+
},
33+
'h5': {
34+
fontSize: theme('fontSize.md'),
35+
fontWeight: theme('fontWeight.medium'),
36+
},
37+
'a': {
38+
textDecoration: 'underline',
39+
},
40+
'a:hover': {
41+
textDecoration: 'none',
42+
},
43+
})
44+
}),
45+
],
1246
})

0 commit comments

Comments
 (0)