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

Commit 8955c97

Browse files
MichaelGitArtMichaelGitArt
committed
feat(docs): upgrade docs
1 parent d3701c1 commit 8955c97

12 files changed

+266
-10
lines changed

‎packages/docs/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"@mdi/js": "^5.9.55",
1616
"@vueuse/core": "^6.0.0",
1717
"balm-ui": "9.37.2",
18-
"gitart-vue-dialog": "1.0.1",
18+
"gitart-vue-dialog": "1.0.3",
1919
"markdown-it-container": "^3.0.0",
2020
"prismjs": "^1.24.1",
2121
"sass": "^1.38.0"

‎packages/docs/src/components/Components/ButtonWrapper.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ export default {
1717
padding: 30px;
1818
border-radius: 4px;
1919
display: flex;
20-
justify-content: center;
20+
flex-wrap: wrap;
21+
gap: 15px;
22+
justify-content: space-around;
2123
background: rgba($primary, 0.2);
2224
}
2325
</style>

‎packages/docs/src/components/Examples/Guide/UsageFullscreenExample.vue

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<GDialog v-model="value" fullscreen>
3+
<UiButton @click="value = false">
4+
Close
5+
</UiButton>
6+
</GDialog>
7+
8+
<ButtonWrapper>
9+
<UiButton @click="value = true">
10+
Open Dialog
11+
</UiButton>
12+
</ButtonWrapper>
13+
</template>
14+
15+
<script>
16+
import { ref } from 'vue'
17+
18+
export default {
19+
setup() {
20+
const value = ref(false)
21+
22+
return {
23+
value,
24+
}
25+
},
26+
}
27+
</script>

‎packages/docs/src/components/Examples/Guide/UsagePersistentExample.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<GDialog
3+
v-model="value"
4+
max-width="300"
5+
persistent
6+
>
7+
<p>
8+
Try to click outside
9+
</p>
10+
11+
<UiButton @click="value = false">
12+
Close
13+
</UiButton>
14+
</GDialog>
15+
16+
<ButtonWrapper>
17+
<UiButton @click="value = true">
18+
Open Dialog
19+
</UiButton>
20+
</ButtonWrapper>
21+
</template>
22+
23+
<script>
24+
import { ref } from 'vue'
25+
26+
export default {
27+
setup() {
28+
const value = ref(false)
29+
30+
return {
31+
value,
32+
}
33+
},
34+
}
35+
</script>

‎packages/docs/src/components/Examples/Guide/UsageScrollableExample.vue

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<GDialog
3+
v-model="value"
4+
max-width="500"
5+
scrollable
6+
>
7+
<div class="usage-scrollable-dialog">
8+
<div class="usage-scrollable-dialog__content">
9+
<p v-for="i in 15" :key="i">
10+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum voluptas laboriosam voluptate ex consequuntur corporis, commodi animi architecto quidem fugiat.
11+
</p>
12+
</div>
13+
14+
<div class="usage-scrollable-dialog__actions">
15+
<UiButton @click="value = false">
16+
Close
17+
</UiButton>
18+
</div>
19+
</div>
20+
</GDialog>
21+
22+
<ButtonWrapper>
23+
<UiButton @click="value = true">
24+
Open Dialog
25+
</UiButton>
26+
</ButtonWrapper>
27+
</template>
28+
29+
<script>
30+
import { ref } from 'vue'
31+
32+
export default {
33+
setup() {
34+
const value = ref(false)
35+
36+
return {
37+
value,
38+
}
39+
},
40+
}
41+
</script>
42+
43+
<style lang="scss" scoped>
44+
.usage-scrollable-dialog {
45+
display: flex;
46+
flex-direction: column;
47+
48+
&__content {
49+
overflow: auto;
50+
padding: 20px;
51+
}
52+
53+
&__actions {
54+
padding: 10px;
55+
box-shadow: 0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%);
56+
}
57+
}
58+
</style>

‎packages/docs/src/components/Examples/Guide/UsageTransitionExample.vue

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<GDialog
3+
v-model="value"
4+
max-width="300"
5+
transition="custom-rotate-transition"
6+
>
7+
<UiButton @click="value = false">
8+
Close
9+
</UiButton>
10+
</GDialog>
11+
12+
<GDialog
13+
v-model="value2"
14+
max-width="300"
15+
transition="custom-from-bottom-transition"
16+
>
17+
<UiButton @click="value2 = false">
18+
Close
19+
</UiButton>
20+
21+
<p>
22+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae at, nostrum hic est a nulla?
23+
</p>
24+
<p>
25+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae at, nostrum hic est a nulla?
26+
</p>
27+
<p>
28+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae at, nostrum hic est a nulla?
29+
</p>
30+
</GDialog>
31+
32+
<ButtonWrapper>
33+
<UiButton @click="value = true">
34+
Rotate Transition
35+
</UiButton>
36+
37+
<UiButton @click="value2 = true">
38+
From Bottom
39+
</UiButton>
40+
</ButtonWrapper>
41+
</template>
42+
43+
<script>
44+
import { ref } from 'vue'
45+
46+
export default {
47+
setup() {
48+
const value = ref(false)
49+
const value2 = ref(false)
50+
51+
return {
52+
value,
53+
value2,
54+
}
55+
},
56+
}
57+
</script>
58+
59+
<style lang="scss">
60+
.custom-rotate-transition {
61+
&-enter-from {
62+
transform: translate(0, 30px) rotate(20deg);
63+
opacity: 0;
64+
}
65+
66+
&-leave-to {
67+
transform: translate(0, 30px) rotate(10deg);
68+
opacity: 0;
69+
}
70+
}
71+
72+
.custom-from-bottom-transition {
73+
&-enter-from {
74+
transform: translate(0, 100%);
75+
opacity: 0;
76+
}
77+
78+
&-leave-to {
79+
transform: translate(0, -30%);
80+
opacity: 0;
81+
}
82+
}
83+
</style>

‎packages/docs/src/components/Examples/Introduction/GettingStartedExample.vue

-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@
1414
import { ref } from 'vue'
1515
1616
export default {
17-
name: 'GettingStartedExample',
18-
1917
setup() {
2018
const value = ref(false)
2119
const onOpen = () => {

‎packages/docs/src/components/Examples/Introduction/GettingStartedExampleStyled.vue

-2
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@
2828
import { ref } from 'vue'
2929
3030
export default {
31-
name: 'GettingStartedExampleStyled',
32-
3331
setup() {
3432
const value = ref(false)
3533
const onOpen = () => {

‎packages/docs/src/docs/guide/component-usage.md

+26
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,29 @@ export default {
7676
Pretty **ugly** dialog, right? Let's add background and some content. Take a look:
7777

7878
<Example file="Introduction/GettingStartedExampleStyled" />
79+
80+
## Examples
81+
82+
### Fullscreen
83+
84+
Due to limited space, full-screen dialogs may be more appropriate for mobile devices
85+
86+
<Example file="Guide/UsageFullscreenExample" />
87+
88+
### Transitions
89+
90+
You can customize appearing with a custom transitions
91+
92+
<Example file="Guide/UsageTransitionExample" />
93+
94+
### Persistent
95+
96+
With `persistent` clicking ouside doesn't close the dialog
97+
98+
<Example file="Guide/UsagePersistentExample" />
99+
100+
### Scrollable
101+
102+
`scrollable` allows you to make scroll content somewhere inside your dialog
103+
104+
<Example file="Guide/UsageScrollableExample" />

‎packages/docs/src/imports.ts

+28
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,32 @@ export const imports = {
1313
raw: (await import('./components/Examples/Introduction/GettingStartedExampleStyled.vue?raw')).default,
1414
}
1515
},
16+
17+
async 'Guide/UsageFullscreenExample'() {
18+
return {
19+
component: (await import('./components/Examples/Guide/UsageFullscreenExample.vue')).default,
20+
raw: (await import('./components/Examples/Guide/UsageFullscreenExample.vue?raw')).default,
21+
}
22+
},
23+
24+
async 'Guide/UsageTransitionExample'() {
25+
return {
26+
component: (await import('./components/Examples/Guide/UsageTransitionExample.vue')).default,
27+
raw: (await import('./components/Examples/Guide/UsageTransitionExample.vue?raw')).default,
28+
}
29+
},
30+
31+
async 'Guide/UsagePersistentExample'() {
32+
return {
33+
component: (await import('./components/Examples/Guide/UsagePersistentExample.vue')).default,
34+
raw: (await import('./components/Examples/Guide/UsagePersistentExample.vue?raw')).default,
35+
}
36+
},
37+
38+
async 'Guide/UsageScrollableExample'() {
39+
return {
40+
component: (await import('./components/Examples/Guide/UsageScrollableExample.vue')).default,
41+
raw: (await import('./components/Examples/Guide/UsageScrollableExample.vue?raw')).default,
42+
}
43+
},
1644
} as any

‎packages/docs/tsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"extends": "../../tsconfig.json",
33
"compilerOptions": {
44
"baseUrl": ".",
5+
"allowJs": true,
56
"paths": {
67
"@/*": ["./src/*"],
78
}

‎packages/docs/yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -1407,10 +1407,10 @@ get-intrinsic@^1.0.2:
14071407
has "^1.0.3"
14081408
has-symbols "^1.0.1"
14091409

1410-
[email protected].1:
1411-
version "1.0.1"
1412-
resolved "https://registry.yarnpkg.com/gitart-vue-dialog/-/gitart-vue-dialog-1.0.1.tgz#5693cff27c05bb4393811ce27a96afba5f485783"
1413-
integrity sha512-4Q1JRlrlDW9EDNEWDoDs2DJV+G7MDA+PZZqh0VWIrYM8Nd/u8lurZDkxBoCgkCsAEMvrwqfUxxJzqXpQSwTsKg==
1410+
[email protected].3:
1411+
version "1.0.3"
1412+
resolved "https://registry.yarnpkg.com/gitart-vue-dialog/-/gitart-vue-dialog-1.0.3.tgz#216cf3bced44146616aa63a6c9af92babd597843"
1413+
integrity sha512-fmLKtJcwXIh8SB2kJYN//B9gySpPKpr8avdeTFeHGmJJuZVCnjn7QXiEGqUI9srqnfB7ZAixHaKdiepBRm4Qgg==
14141414

14151415
glob-parent@^5.1.2, glob-parent@~5.1.2:
14161416
version "5.1.2"

0 commit comments

Comments
 (0)