Skip to content

Commit ff43145

Browse files
GodofbrowserGodofbrowser
committed
Chore(docs): add initial documentation content
1 parent 74ceeb6 commit ff43145

14 files changed

+393
-15
lines changed

Diff for: ‎.gitignore

-7
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,6 @@ coverage
1818
/cypress/videos/
1919
/cypress/screenshots/
2020

21-
# VuePress default temp directory
22-
.vuepress/.temp
23-
# VuePress default cache directory
24-
.vuepress/.cache
25-
# VuePress default build output directory
26-
.vuepress/dist
27-
2821
# Editor directories and files
2922
.vscode/*
3023
!.vscode/extensions.json

Diff for: ‎docs/.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# VuePress default temp directory
2+
.vuepress/.temp
3+
# VuePress default cache directory
4+
.vuepress/.cache
5+
# VuePress default build output directory
6+
.vuepress/dist

Diff for: ‎docs/.vuepress/client.js

+13
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
1+
import {defineAsyncComponent} from "vue";
12
import { defineClientConfig } from 'vuepress/client'
23
import DialogPlugin from "../../src/plugin/index";
34

5+
46
export default defineClientConfig({
57
enhance({ app, router, siteData }) {
8+
const registerComponent = (fileName) => app.component(
9+
fileName,
10+
defineAsyncComponent(() => import((`../components/examples/${fileName}.vue`)))
11+
)
12+
613
app.use(DialogPlugin, {})
14+
registerComponent('UIExamplesButton')
15+
registerComponent('FeaturesExampleAlert')
16+
registerComponent('FeaturesExampleConfirm')
17+
registerComponent('FeaturesExampleConfirmSoft')
18+
registerComponent('FeaturesExampleConfirmHard')
19+
registerComponent('FeaturesExamplePrompt')
720
},
821
setup() {},
922
rootComponents: [],

Diff for: ‎docs/.vuepress/config.js

+34-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,38 @@ export default defineUserConfig({
1111
description: 'A lightweight, promise based alert, prompt and confirm dialog',
1212
repo: 'godofbrowser/vuejs-dialog',
1313
bundler: viteBundler(),
14-
theme: defaultTheme(),
14+
plugins: [
15+
// https://ecosystem.vuejs.press/plugins/markdown/prismjs.html
16+
// https://ecosystem.vuejs.press/plugins/markdown/shiki.html
17+
shikiPlugin({
18+
// options
19+
defaultLang: 'ts',
20+
langs: ['ts', 'js', 'json', 'vue', 'md', 'bash', 'diff'],
21+
}),
22+
// mdEnhancePlugin({
23+
// // your options
24+
// }),
25+
],
26+
theme: defaultTheme({
27+
docsDir: '/docs/content',
28+
sidebar: [
29+
{
30+
text: 'Getting started',
31+
collapsible: false,
32+
link: '/',
33+
children: [
34+
'/README.md'
35+
]
36+
},
37+
'/content/features/README.md',
38+
{
39+
text: 'Advanced',
40+
collapsible: false,
41+
link: '/content/customization/README.md',
42+
children: [
43+
'/content/customization/README.md'
44+
]
45+
}
46+
]
47+
}),
1548
})

Diff for: ‎docs/README.md

-7
This file was deleted.

Diff for: ‎docs/components/examples/FeaturesExampleAlert.vue

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<UIExamplesButton @click="openDialog">Show alert</UIExamplesButton>
3+
</template>
4+
5+
<script setup>
6+
import {inject} from 'vue'
7+
8+
defineOptions({
9+
name: "FeaturesExampleAlert"
10+
})
11+
12+
const $dialog = inject('$dialog')
13+
const openDialog = () => $dialog.alert({
14+
title: 'Alert example',
15+
body: 'Session expired. Please login again to continue.',
16+
}, {
17+
okText: 'Dismiss'
18+
})
19+
</script>

Diff for: ‎docs/components/examples/FeaturesExampleConfirm.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<UIExamplesButton @click="openDialog">Show confirm | basic</UIExamplesButton>
3+
</template>
4+
5+
<script setup>
6+
import {inject} from 'vue'
7+
8+
defineOptions({
9+
name: "FeaturesExampleConfirm"
10+
})
11+
12+
const $dialog = inject('$dialog')
13+
const openDialog = () => $dialog.confirm({
14+
title: 'Confirm example',
15+
body: 'The requested resource is no longer available. It may have been moved or deleted',
16+
}, {
17+
cancelText: 'No',
18+
okText: 'Yes'
19+
})
20+
</script>

Diff for: ‎docs/components/examples/FeaturesExampleConfirmHard.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<UIExamplesButton @click="openDialog">Show confirm | basic</UIExamplesButton>
3+
</template>
4+
5+
<script setup>
6+
import {inject} from 'vue'
7+
8+
defineOptions({
9+
name: "FeaturesExampleConfirm"
10+
})
11+
12+
const $dialog = inject('$dialog')
13+
const openDialog = () => $dialog.confirm({
14+
title: 'Confirm example',
15+
body: 'The requested resource is no longer available. It may have been moved or deleted',
16+
}, {
17+
cancelText: 'No',
18+
okText: 'Yes'
19+
})
20+
</script>

Diff for: ‎docs/components/examples/FeaturesExampleConfirmSoft.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<UIExamplesButton @click="openDialog">Show confirm | soft</UIExamplesButton>
3+
</template>
4+
5+
<script setup>
6+
import {inject} from 'vue'
7+
8+
defineOptions({
9+
name: "FeaturesExampleConfirmSoft"
10+
})
11+
12+
const $dialog = inject('$dialog')
13+
const openDialog = () => $dialog.confirm({
14+
title: 'Soft confirm example',
15+
body: 'This is a medium risk action. Multiple clicks required to confirm',
16+
}, {
17+
cancelText: 'Cancel',
18+
okText: 'Proceed',
19+
clicksCount: 2,
20+
type: 'soft'
21+
})
22+
</script>

Diff for: ‎docs/components/examples/FeaturesExamplePrompt.vue

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<UIExamplesButton @click="openDialog">Show prompt</UIExamplesButton>
3+
</template>
4+
5+
<script setup>
6+
import {inject} from 'vue'
7+
8+
defineOptions({
9+
name: "FeaturesExamplePrompt"
10+
})
11+
12+
const $dialog = inject('$dialog')
13+
const openDialog = () => $dialog.prompt({
14+
title: 'Prompt Example',
15+
body: 'What is the most important thing in life?',
16+
}, {
17+
cancelText: 'Dismiss',
18+
okText: 'Yes',
19+
promptHelp: 'Type in the box below and click "[+:okText]"'
20+
}).then(result => {
21+
console.log({ result })
22+
})
23+
</script>

Diff for: ‎docs/components/examples/UIExamplesButton.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<button @click="$emit('click')"><slot></slot></button>
3+
</template>
4+
5+
<script setup>
6+
import {ref} from 'vue'
7+
8+
defineEmits({
9+
click: () => true,
10+
})
11+
12+
defineOptions({
13+
name: "UIExamplesButton"
14+
})
15+
</script>
16+
17+
<style lang="scss" scoped>
18+
button {
19+
display: inline-block;
20+
position: relative;
21+
min-width: 80px;
22+
padding: 6px 20px;
23+
border-radius: 4px;
24+
outline: 0;
25+
border: 2px solid transparent;
26+
text-align: center;
27+
text-decoration: none;
28+
cursor: pointer;
29+
outline: none;
30+
-webkit-appearance: none;
31+
-moz-appearance: none;
32+
appearance: none;
33+
font-size: 16px;
34+
font-weight: 700;
35+
}
36+
</style>

Diff for: ‎docs/content/README.md

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
# Getting started
2+
3+
[[toc]]
4+
5+
Vuejs-dialog is a vue plugin that's designed to serve as a replacement to the native confirm and alert that ships with the browser. The it is lightweight and comes with a simple api, yet very customizable and extendable.
6+
7+
## Installation
8+
9+
### Package manager
10+
<CodeGroup>
11+
<CodeGroupItem title="pnpm">
12+
13+
```shell title="installation via pnpm"
14+
pnpm add vuejs-dialog
15+
```
16+
17+
</CodeGroupItem>
18+
19+
<CodeGroupItem title="yarn">
20+
21+
```shell title="installation via yarn"
22+
yarn add vuejs-dialog
23+
```
24+
25+
</CodeGroupItem>
26+
27+
<CodeGroupItem title="npm" active>
28+
29+
```bash{2} title="installation via npm"
30+
npm i -S vuejs-dialog
31+
```
32+
33+
</CodeGroupItem>
34+
</CodeGroup>
35+
36+
37+
```js title="main.js"
38+
// import into the project's entry file
39+
import { createApp } from 'vue';
40+
import VuejsDialog from 'vuejs-dialog';
41+
import AppComponent from './App.vue'
42+
43+
// include the default style
44+
import 'vuejs-dialog/dist/vuejs-dialog.min.css';
45+
46+
// Create the app instance
47+
const app = createApp(AppComponent)
48+
49+
// Install the plugin for the app instance.
50+
app.use(VuejsDialog);
51+
52+
// Mount the application on the dom element with id="app"
53+
app.mount('#app')
54+
```
55+
56+
### Script tag
57+
58+
```html
59+
// Todo: update for vue3
60+
<!--// Include vuejs-->
61+
<!--<script type="text/javascript" src="./path/to/vue.min.js"></script>-->
62+
63+
<!--// Include vuejs-dialog plugin-->
64+
<!--<link href="./path/to/vuejs-dialog.min.css" rel="stylesheet">-->
65+
<!--<script type="text/javascript" src="./path/to/vuejs-dialog.min.js"></script>-->
66+
<!--<script type="text/javascript" src="./path/to/vuejs-dialog-mixin.min.js"></script> // only needed in custom components-->
67+
68+
<!--<script>-->
69+
<!--// Tell Vue to install the plugin.-->
70+
<!--window.Vue.use(VuejsDialog.main.default)-->
71+
<!--</script>-->
72+
```
73+
74+
## Opening a dialog
75+
76+
### Options API
77+
```vue title="App.vue"
78+
<template>
79+
<button @click="openDialog">Open dialog</button>
80+
</template>
81+
<script>
82+
export default {
83+
methods: {
84+
openDialog() {
85+
this.$dialog.alert('Hello world!')
86+
}
87+
}
88+
}
89+
</script>
90+
```
91+
92+
### Composition API
93+
```vue title="App.vue"
94+
<template>
95+
<button @click="openDialog">Open dialog</button>
96+
</template>
97+
<script setup>
98+
import {inject} from "vue";
99+
const dialog = inject('$dialog')
100+
const openDialog = () => dialog.alert('Hello world!')
101+
return { openDialog }
102+
</script>
103+
```
104+
105+
### Directives API
106+
```vue title="App.vue"
107+
<template>
108+
<button v-confirm="'Hello world!'">Open dialog</button>
109+
</template>
110+
```
111+
112+
## Example use cases
113+
Below are some practical example use cases that you may find useful.
114+
115+
### Quick alert after an event occurs
116+
117+
118+
### Confirming CRUD operations
119+
120+
121+
### Confirming link clicks
122+
123+
124+
### Confirming form submission
125+
126+
One plus one equals: {{ 1 + 1 }}
127+
128+
<span v-for="i in 3"> span: {{ i }} </span>
129+
130+
<button class="dg-btn" v-confirm="'Please confirm!'">Click Directive</button>
131+

Diff for: ‎docs/content/customization/README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Customization
2+
3+
## Options
4+
### Custom Class
5+
6+
## Custom component
7+
Sample highlighted code block
8+
9+
```ts{1,7-9}
10+
import { defaultTheme } from '@vuepress/theme-default'
11+
import { defineUserConfig } from 'vuepress'
12+
13+
export default defineUserConfig({
14+
title: 'Hello, VuePress',
15+
16+
theme: defaultTheme({
17+
logo: 'https://vuejs.org/images/logo.png',
18+
}),
19+
})
20+
```

0 commit comments

Comments
 (0)