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

Commit 9e113d6

Browse files
MichaelGitArtMichaelGitArt
committed
feat(docs): upgrade docs
1 parent a8f3367 commit 9e113d6

File tree

6 files changed

+148
-14
lines changed

6 files changed

+148
-14
lines changed

‎docs/src/.vitepress/config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ module.exports = {
8080

8181
themeConfig: {
8282
lastUpdated: 'Last Updated',
83-
displayAllHeaders: true,
83+
displayAllHeaders: false,
8484
activeHeaderLinks: false,
8585

8686
nav: [
@@ -122,7 +122,6 @@ function getGuideSidebar() {
122122
children: [
123123
{ text: 'Component Usage', link: '/docs/guide/component-usage' },
124124
{ text: 'Plugin Usage', link: '/docs/guide/plugin-usage' },
125-
{ text: 'Properties', link: '/docs/guide/properties' },
126125
],
127126
},
128127

‎docs/src/docs/components/g-dialog-root.md

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,29 @@
44
import { GDialogRoot } from 'gitart-vue-dialog'
55
```
66

7+
## Usage
8+
79
Put `GDialogRoot` into your root component (App.vue)
810

911
::: warning
1012
Remember GDialogRoot just render dialogs added by `$dialog.addDialog()`.
11-
No props, no slots, no events
13+
No props, no slots, no events.
1214
:::
15+
16+
## How does it works
17+
18+
The components just render [$dialog.dialogs](/docs/guide/plugin-usage#dialogs) and removes them on `@update:modelValue` event.
19+
20+
```html
21+
<Component
22+
:is="dialog.component"
23+
v-for="(dialog, index) in dialogs"
24+
:key="dialog.id"
25+
v-bind="dialog.props"
26+
@update:modelValue="onClose(index)"
27+
/>
28+
```
29+
- `dialogs` - it's array of the plugin dialogs. Details: [$dialog.dialogs](/docs/guide/plugin-usage#dialogs)
30+
- `onClose` - method that runs [$dialog.removeDialog](/docs/guide/plugin-usage#removedialog-index)
31+
32+
If it's not enough, you can write your own alternative.

‎docs/src/docs/components/g-dialog.md

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,22 @@
44
import { GDialog } from 'gitart-vue-dialog'
55
```
66

7+
The component uses the Vue 3 teleport to move the component html to `<body>`.
8+
9+
z-index of the component is 200. So be careful. Don't make z-index of the header or other element like this: <br/> `z-index: 9999`
10+
711
## Props
812

913
| Name | Type | Default | Description |
1014
|:---|:---|:---|:---|
15+
| content-class | `string` | `''` | Applies to the div that wraps the main slot |
16+
| depressed | `boolean` | `false` | Disables default box-shadow |
17+
| height | `string`, `number` | `'auto'` | Sets height for the dialog |
18+
| max-width | `string,` `number` | `'none'` | Sets max-width for the dialog |
1119
| model-value | `boolean` | `false` | v-model props to activate and deactivate the dialog |
1220
| persistent | `boolean` | `false` | Makes clicking outside of the element will not deactivate the dialog |
13-
| max-width | `string,` `number` | `'none'` | Sets max-width for the dialog |
21+
| scrollable | `boolean` | `false` | |
1422
| width | `string,` `number` | `'auto'` | Sets width for the dialog |
15-
| height | `string`, `number` | `'auto'` | Sets height for the dialog |
16-
| depressed | `boolean` | `false` | Disables default box-shadow |
17-
| contentClass | `string` | `''` | Applies to the div that wraps the main slot |
1823

1924
## Slots
2025

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Component Usage
22

3+
- [GDialog Details](/docs/components/g-dialog)
4+
35
To use the package you don't need install the plugin.
46
Just styles and register GDialog component. In some cases it's enough
57

‎docs/src/docs/guide/plugin-usage.md

Lines changed: 115 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
# Plugin Usage
22

3-
First install plugin:
3+
[[toc]]
4+
5+
---
6+
7+
- [GDialog Details](/docs/components/g-dialog)
8+
- [GDialogRoot Details](/docs/components/g-dialog-root)
9+
10+
## Installation
411

512
```js{2,3,6}
613
import App from './App.vue'
@@ -12,11 +19,14 @@ createApp(App)
1219
.mount('#app')
1320
```
1421

15-
Next put into App.vue GDialogRoot. That is component where will be rendered your dialogs
22+
We strongly recommend using GDialogRoot. That is component where will be rendered your [dialogs](#dialogs).
23+
Put it somewhere in you App.vue
24+
25+
Or write your own alternative. Look [here](/docs/components/g-dialog-root) how GDialogRoot works
1626

1727
```js{2,6}
1828
// App.vue
19-
import { GDialogRoot } from 'plugin'
29+
import { GDialogRoot } from 'gitart-vue-dialog'
2030
2131
export default {
2232
components: {
@@ -25,7 +35,108 @@ export default {
2535
}
2636
```
2737

28-
Next create your Dialog component that will be launched from method. Name it InfoDialog.vue
38+
## Usage
39+
40+
You can access to the [methods and properties](/docs/guide/properties) of the plugin by injection `inject(dialogInjectionKey)` (or `this.$dialog` in option api)
41+
42+
))) method-switch
43+
44+
::: vue-slot composition
45+
```js
46+
import { dialogInjectionKey } from 'gitart-vue-dialog'
47+
48+
export default {
49+
setup() {
50+
const $dialog = inject(dialogInjectionKey)
51+
// $dialog.addDialog()
52+
// $dialog.removeDialog()
53+
// $dialog.dialogs
54+
}
55+
}
56+
```
57+
:::
58+
59+
::: vue-slot option
60+
```js
61+
import { dialogInjectionKey } from 'gitart-vue-dialog'
62+
63+
export default {
64+
methods: {
65+
someMethod() {
66+
// this.$dialog
67+
// $dialog.addDialog()
68+
// $dialog.removeDialog()
69+
// $dialog.dialogs
70+
},
71+
},
72+
}
73+
```
74+
:::
75+
76+
)))
77+
78+
## Properties
79+
80+
**$dialog** has such properties:
81+
82+
| Name | Type |
83+
|:---|:---|
84+
| [addDialog](#adddialog-data) | `Function` |
85+
| [removeDialog](#removedialog-index) | `Function` |
86+
| [dialogs](#dialogs) | `Array` |
87+
88+
### `addDialog(data)`
89+
90+
- **Type:** `Function`
91+
92+
- **Arguments:**
93+
- {Object} data - `{ component: DialogComponent, props: { ... } }`
94+
95+
- **Details:** <br/>
96+
The method adds your extended `data` argument to [dialogs](#dialogs) array.
97+
The `data.component` will be rendered in the [GDialogRoot](/docs/components/g-dialog-root) with the props you add to `data.props`
98+
99+
::: warning
100+
`data.props` should not contain modelValue. The `addDialog` overwrites it
101+
:::
102+
103+
::: info
104+
To close the dialog (DialogComponent.vue) you need inside emit the event `update:modelValue` with `false` inside. Take a look at the [example](#example) below
105+
:::
106+
107+
108+
109+
110+
### `removeDialog(index)`
111+
112+
- **Type:** `Function`
113+
114+
- **Arguments:**
115+
- {Number} index
116+
117+
- **Details:** <br/>
118+
The method removes item from [dialogs](#dialogs) by index. Useful if you decide to write your own [GDialogRoot](/docs/components/g-dialog-root)
119+
120+
### `dialogs`
121+
- **Type:** `Array`
122+
123+
- **Details:** <br/>
124+
Array of the IDialogItem. The array can be rendered in any part of your app.
125+
We recommend use [GDialogRoot](/docs/components/g-dialog-root) for it.
126+
```ts
127+
interface IDialogItem {
128+
component: ShallowUnwrapRef<Component>
129+
id: number
130+
props: {
131+
modelValue: boolean
132+
// other props
133+
}
134+
}
135+
```
136+
137+
## Example
138+
139+
First create your Dialog component that will be launched from method. Name it InfoDialog.vue
29140

30141
```html
31142
<GDialog

‎docs/src/docs/guide/properties.md

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)