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

Commit 241769f

Browse files
MichaelGitArtMichaelGitArt
committed
feat(docs): update docs
- install gitart-vue-dialog to live examples - add new sections - make some global components
1 parent a07e6ff commit 241769f

File tree

21 files changed

+444
-91
lines changed

21 files changed

+444
-91
lines changed

‎docs/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,8 @@
1313
},
1414
"devDependencies": {
1515
"vitepress": "^0.16.1"
16+
},
17+
"dependencies": {
18+
"gitart-vue-dialog": "^0.2.0-alpha.3"
1619
}
1720
}

‎docs/src/.vitepress/components/Base/BaseBtn.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<button
3+
class="base-btn"
4+
v-bind="$attrs"
5+
>
6+
<slot />
7+
</button>
8+
</template>
9+
10+
<script lang="ts">
11+
import { defineComponent } from 'vue'
12+
13+
export default defineComponent({
14+
name: 'Btn',
15+
})
16+
</script>
17+
18+
<style lang="scss" scoped>
19+
.base-btn {
20+
cursor: pointer;
21+
display: inline-block;
22+
border-radius: 6px;
23+
padding: 0 20px;
24+
line-height: 44px;
25+
font-size: 1rem;
26+
font-weight: 500;
27+
color: var(--c-bg);
28+
background-color: var(--c-brand);
29+
border: 2px solid var(--c-brand);
30+
transition: background-color 0.1s ease;
31+
outline: none !important;
32+
33+
&:hover {
34+
text-decoration: none;
35+
color: var(--c-bg);
36+
background-color: var(--c-brand-light);
37+
}
38+
}
39+
</style>

‎docs/src/.vitepress/components/Dialogs/Guide/BaseDialog.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<GDialog v-model="dialogState">
3+
Content
4+
</GDialog>
5+
6+
<BtnWrapper>
7+
<BaseBtn @click="onOpen">
8+
Open Dialog
9+
</BaseBtn>
10+
</BtnWrapper>
11+
</template>
12+
13+
<script lang="ts">
14+
import { defineComponent } from 'vue'
15+
import { GDialog } from 'gitart-vue-dialog'
16+
import 'gitart-vue-dialog/dist/style.css'
17+
18+
export default defineComponent({
19+
name: 'BaseDialog',
20+
components: {
21+
GDialog,
22+
},
23+
24+
data: () => ({
25+
dialogState: false,
26+
}),
27+
28+
methods: {
29+
onOpen() {
30+
this.dialogState = true
31+
},
32+
},
33+
})
34+
</script>

‎docs/src/.vitepress/components/Dialogs/Guide/BaseStyledDialog.vue

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<GDialog v-model="dialogState" max-width="500">
3+
<div class="content">
4+
Content
5+
</div>
6+
</GDialog>
7+
8+
<BtnWrapper>
9+
<BaseBtn @click="onOpen">
10+
Open A More Prettier Dialog
11+
</BaseBtn>
12+
</BtnWrapper>
13+
</template>
14+
15+
<script lang="ts">
16+
import { defineComponent } from 'vue'
17+
import { GDialog } from 'gitart-vue-dialog'
18+
import 'gitart-vue-dialog/dist/style.css'
19+
20+
export default defineComponent({
21+
name: 'BaseDialog',
22+
components: {
23+
GDialog,
24+
},
25+
26+
data: () => ({
27+
dialogState: false,
28+
}),
29+
30+
methods: {
31+
onOpen() {
32+
this.dialogState = true
33+
},
34+
},
35+
})
36+
</script>
37+
38+
<style lang="scss" scoped>
39+
.content {
40+
padding: 30px;
41+
background: #fff;
42+
}
43+
</style>

‎docs/src/.vitepress/components/Layout/BtnWrapper.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="btn-wrapper">
3+
<slot />
4+
</div>
5+
</template>
6+
7+
<script>
8+
import { defineComponent } from 'vue'
9+
10+
export default defineComponent({
11+
name: 'BtnWrapper',
12+
})
13+
</script>
14+
15+
<style lang="scss" scoped>
16+
.btn-wrapper {
17+
padding: 30px;
18+
border-radius: 4px;
19+
// background: rgb(221, 221, 221);
20+
display: flex;
21+
justify-content: center;
22+
background: #8f6cf92f;
23+
}
24+
</style>

‎docs/src/.vitepress/config.js

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
1+
const path = require('path')
2+
13
module.exports = {
2-
title: "Gitart Vue Dialog",
3-
description: "Documentaion for Gitart Vue Dialog. Docs",
4-
lang: "en-US",
54
vite: {
65
server: {
76
port: 3001,
8-
}
7+
fs: {
8+
strict: false,
9+
allow: [path.resolve(__dirname, '../')],
10+
},
11+
},
12+
13+
resolve: {
14+
alias: {
15+
'@': path.resolve(__dirname, '../'),
16+
},
17+
},
918
},
19+
20+
title: "Gitart Vue Dialog",
21+
description: "Documentaion for Gitart Vue Dialog. Docs",
22+
lang: "en-US",
23+
1024
head: [
1125
['link', { rel: 'icon', href: '/favicon.png' }],
1226
],
@@ -18,8 +32,7 @@ module.exports = {
1832

1933
nav: [
2034
{ text: "Home", link: "/" },
21-
{ text: "Guide", link: "/guide/" },
22-
{ text: "API", link: "/api/" },
35+
{ text: "Docs", link: "/docs/introduction/getting-started" },
2336
{
2437
text: "npm",
2538
link: "https://www.npmjs.com/package/gitart-vue-dialog",
@@ -46,33 +59,25 @@ function getGuideSidebar() {
4659
{
4760
text: 'Introduction',
4861
children: [
49-
{ text: 'Getting Started', link: '/guide/' },
62+
{ text: 'Getting Started', link: '/docs/introduction/getting-started' },
63+
{ text: 'Usage Types', link: '/docs/introduction/usage-types' },
5064
]
5165
},
52-
// {
53-
// text: 'Guide',
54-
// children: [
55-
// { text: 'Chapter One', link: '/guide/getting-start' },
56-
// { text: 'Chapter two', link: '/guide/two' },
57-
// { text: 'API', link: '/api/' },
58-
// ]
59-
// },
60-
// {
61-
// text: 'Advanced',
62-
// children: [
63-
// { text: 'Frontmatter', link: '/guide/frontmatter' },
64-
// { text: 'Global Computed', link: '/guide/global-computed' },
65-
// { text: 'Global Component', link: '/guide/global-component' },
66-
// { text: 'Customization', link: '/guide/customization' },
67-
// {
68-
// text: 'Differences from Vuepress',
69-
// link: '/guide/differences-from-vuepress'
70-
// }
71-
// ]
72-
// },
66+
7367
{
74-
text: 'API',
75-
link: '/api/'
68+
text: 'Guide',
69+
children: [
70+
{ text: 'Component Usage', link: '/docs/guide/component-usage' },
71+
{ text: 'Plugin Usage', link: '/docs/guide/plugin-usage' },
72+
{ text: 'Properties', link: '/docs/guide/properties' },
73+
]
74+
},
75+
76+
{
77+
text: 'Components',
78+
children: [
79+
{ text: 'GDialog', link: '/docs/components/g-dialog' },
80+
]
7681
},
7782
]
7883
}

‎docs/src/.vitepress/includes/minumal-working-example/YourComponent.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<GDialog v-model="dialogState">
2+
Content
3+
</GDialog>
4+
5+
<button @click="onOpen">Open Dialog</button>

‎docs/src/.vitepress/includes/minumal-working-example/YourComponent.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// YourComponent.vue
2+
import { GDialog } from 'gitart-vue-dialog'
3+
4+
export default {
5+
components: {
6+
GDialog,
7+
},
8+
data: () => ({
9+
dialogState: false,
10+
}),
11+
12+
methods: {
13+
onOpen() {
14+
this.dialogState = true
15+
},
16+
},
17+
}

‎docs/src/.vitepress/includes/minumal-working-example/main.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// main.js or YourComponent.vue
2+
import 'gitart-vue-dialog/dist/style.css'

‎docs/src/.vitepress/theme/index.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
import DefaultTheme from 'vitepress/theme'
22
import './custom.css'
33

4-
export default DefaultTheme
4+
import BaseBtn from '@/.vitepress/components/Base/BaseBtn.vue'
5+
6+
import BtnWrapper from '@/.vitepress/components/Layout/BtnWrapper.vue'
7+
8+
export default {
9+
...DefaultTheme,
10+
enhanceApp({ app }) {
11+
app.component('BaseBtn', BaseBtn)
12+
app.component('BtnWrapper', BtnWrapper)
13+
}
14+
}

0 commit comments

Comments
 (0)