This repository was archived by the owner on Jan 9, 2022. It is now read-only.
File tree Expand file tree Collapse file tree 10 files changed +96
-12
lines changed Expand file tree Collapse file tree 10 files changed +96
-12
lines changed Original file line number Diff line number Diff line change 1
1
<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 >
4
39
</div >
5
40
</template >
6
41
Original file line number Diff line number Diff line change 1
1
<template >
2
2
<div
3
- class =" flex justify-between items-center"
3
+ class =" flex"
4
+ justify =" between"
5
+ items =" center"
4
6
p =" y-3 x-5"
5
- shadow =" lg "
7
+ : shadow =" shadow ? 'lg' : '' "
6
8
>
7
9
<slot />
8
10
9
11
<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"
11
18
text =" red-500"
19
+ border =" rounded-full"
12
20
bg =" gray-200 hover:gray-300"
13
21
p =" a-2"
14
22
@@ -25,6 +33,13 @@ import { defineComponent } from 'vue'
25
33
export default defineComponent ({
26
34
name: ' DialogToolbar' ,
27
35
36
+ props: {
37
+ shadow: {
38
+ type: Boolean ,
39
+ default: true ,
40
+ },
41
+ },
42
+
28
43
emits: [' close' ],
29
44
30
45
setup(_ , { emit }) {
Original file line number Diff line number Diff line change 4
4
:max-width =" 400"
5
5
:depressed =" depressed"
6
6
>
7
- <h4 class =" mb-3 text-lg font-medium " >
7
+ <h4 class =" mb-3" >
8
8
Base component
9
9
</h4 >
10
10
Original file line number Diff line number Diff line change 2
2
<div >
3
3
<BaseDialog v-model =" model" />
4
4
<Btn @click =" open" >
5
- BaseDialog
5
+ Base
6
6
</Btn >
7
7
</div >
8
8
</template >
Original file line number Diff line number Diff line change 8
8
border =" rounded"
9
9
>
10
10
<DialogToolbar @close =" onClose" >
11
- <h4 class = " text-lg font-medium " >
11
+ <h4 >
12
12
Styled Dialog
13
13
</h4 >
14
14
</DialogToolbar >
Original file line number Diff line number Diff line change 3
3
<StyledDialog v-model =" model" />
4
4
5
5
<Btn @click =" open" >
6
- StyledDialog
6
+ Styled
7
7
</Btn >
8
8
</div >
9
9
</template >
Original file line number Diff line number Diff line change 1
- @import ' plugin-css'
1
+ @import ' plugin-css' ;
Original file line number Diff line number Diff line change @@ -5,11 +5,11 @@ import WindiCSS from 'vite-plugin-windicss'
5
5
6
6
export default ( { mode } : { mode : 'production' | 'development' } ) => {
7
7
const dialogPlugin = mode === 'development'
8
- ? path . resolve ( __dirname , '../dist /index.js ' )
8
+ ? path . resolve ( __dirname , '../src /index.ts ' )
9
9
: 'gitart-vue-dialog'
10
10
11
11
const dialogPluginCss = mode === 'development'
12
- ? path . resolve ( __dirname , '../dist/style .css' )
12
+ ? path . resolve ( __dirname , './src/scss/plugin-css-placeholder .css' )
13
13
: 'gitart-vue-dialog/dist/style.css'
14
14
15
15
return defineConfig ( {
Original file line number Diff line number Diff line change 1
1
// windi.config.js
2
2
import { defineConfig } from 'windicss/helpers'
3
+ import plugin from 'windicss/plugin'
3
4
4
5
export default defineConfig ( {
5
6
attributify : true ,
@@ -9,4 +10,37 @@ export default defineConfig({
9
10
'.git/**/*' ,
10
11
] ,
11
12
} ,
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
+ ] ,
12
46
} )
You can’t perform that action at this time.
0 commit comments