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

Commit abe6855

Browse files
irfan-maulana-tkpirfan-maulana-tkp
committed
docs: update docs, remove link to stale docs
1 parent 6314818 commit abe6855

File tree

6 files changed

+378
-120
lines changed

6 files changed

+378
-120
lines changed

‎README.md‎

Lines changed: 125 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,17 @@ npm i vue2-simplert-plugin --save
3535
Usually `main.js` or `index.js`
3636

3737
```javascript
38-
import { Simplert } from 'vue2-simplert-plugin'
39-
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css'
38+
import { Simplert } from 'vue2-simplert-plugin';
39+
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css';
4040

41-
Vue.use(Simplert)
41+
Vue.use(Simplert);
4242
```
4343

4444
Or, with customize default config which still can be overrided.
45+
4546
```javascript
46-
import { Simplert } from 'vue2-simplert-plugin'
47-
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css'
47+
import { Simplert } from 'vue2-simplert-plugin';
48+
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css';
4849

4950
Vue.use(Simplert, {
5051
title: 'test', //string -- title alert
@@ -62,9 +63,10 @@ Vue.use(Simplert, {
6263
disableOverlayClick: false, //boolean -- set to true if you want disable overlay click function
6364
hideAllButton: false, //boolean -- set to true if you want hide all button
6465
onOpen: null, //function -- when simplert open will fire this method if available
65-
showXclose: true //boolean -- show x close button
66-
})
66+
showXclose: true, //boolean -- show x close button
67+
});
6768
```
69+
6870
for more [Methods and Props](https://mazipan.gitbooks.io/vue2-simplert/method-and-props.html)
6971

7072
#### Add template in your root Vue
@@ -78,80 +80,164 @@ Usually `App.vue`
7880
#### Open/Close Popup
7981

8082
For open popup :
83+
8184
```javascript
82-
this.$Simplert.open(obj)
85+
this.$Simplert.open(obj);
8386
```
87+
8488
Object that pass is same with [vue2-simplert](https://github.com/mazipan/vue2-simplert), please read [wiki](https://github.com/mazipan/vue2-simplert/wiki/Methods-And-Props).
8589

8690
For close popup :
91+
8792
```javascript
88-
this.$Simplert.close()
93+
this.$Simplert.close();
8994
```
9095

9196
## Migration from [vue2-simplert](https://github.com/mazipan/vue2-simplert)
9297

9398
If you already use [vue2-simplert](https://github.com/mazipan/vue2-simplert) in your project, please follow this below guide :
94-
+ Make sure you add dependency `npm i vue2-simplert-plugin --save`
95-
+ Import and use this plugin in your main app, ex : `main.js`
99+
100+
- Make sure you add dependency `npm i vue2-simplert-plugin --save`
101+
- Import and use this plugin in your main app, ex : `main.js`
96102

97103
```javascript
98-
import { Simplert } from 'vue2-simplert-plugin'
99-
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css'
104+
import { Simplert } from 'vue2-simplert-plugin';
105+
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css';
100106

101-
Vue.use(Simplert)
107+
Vue.use(Simplert);
102108
```
103109

104-
+ Remove all import [vue2-simplert](https://github.com/mazipan/vue2-simplert) in your components and/or pages, because as Plugin you dont need to import in all components
110+
- Remove all import [vue2-simplert](https://github.com/mazipan/vue2-simplert) in your components and/or pages, because as Plugin you dont need to import in all components
105111

106112
```javascript
107-
import Simplert from 'vue2-simplert'
113+
import Simplert from 'vue2-simplert';
108114
```
109115

110-
+ Remove all adding component [vue2-simplert](https://github.com/mazipan/vue2-simplert) in your components and/or pages, because you dont need set components again
116+
- Remove all adding component [vue2-simplert](https://github.com/mazipan/vue2-simplert) in your components and/or pages, because you dont need set components again
111117

112118
```javascript
113-
components: {Simplert}
119+
components: {
120+
Simplert;
121+
}
114122
```
115123

116-
+ Remove all template html snippet in each components
124+
- Remove all template html snippet in each components
117125

118126
```html
119-
<simplert :useRadius="true"
120-
:useIcon="true"
121-
ref="simplert">
122-
</simplert>
127+
<simplert :useRadius="true" :useIcon="true" ref="simplert"> </simplert>
123128
```
124129

125-
+ Add new html snippet in root application, ex : `App.vue`
130+
- Add new html snippet in root application, ex : `App.vue`
126131

127132
```html
128-
<simplert>
129-
</simplert>
133+
<simplert> </simplert>
130134
```
131135

132-
+ Change all call method open with new plugin method, you dont need to change all configuration
136+
- Change all call method open with new plugin method, you dont need to change all configuration
133137

134138
```javascript
135139
// change this call
136-
this.$refs.simplert.openSimplert(obj)
140+
this.$refs.simplert.openSimplert(obj);
137141
// to this way
138-
this.$Simplert.open(obj)
142+
this.$Simplert.open(obj);
139143
```
140144

141-
+ And **DONE** :+1: !!!
145+
- And **DONE** :+1: !!!
146+
147+
## Available Props
142148

143-
## Documentation Vue2-Simplert
149+
You can add props in `simplert` component, example :
144150

145-
- [Download](https://mazipan.gitbooks.io/vue2-simplert/download.html)
146-
- [Usage Guide](https://mazipan.gitbooks.io/vue2-simplert/usage.html)
147-
- [Methods And Props](https://mazipan.gitbooks.io/vue2-simplert/method-and-props.html)
148-
- [Example Code](https://mazipan.gitbooks.io/vue2-simplert/example.html)
149-
- [Articles](https://mazipan.gitbooks.io/vue2-simplert/articles.html)
150-
- [FAQ](https://mazipan.gitbooks.io/vue2-simplert/faq.html)
151+
```html
152+
<simplert :useRadius="true" :useIcon="true" ref="simplert"> </simplert>
153+
```
154+
155+
| Attribute | Value Type | Default Value | Description |
156+
| ---------- | ---------- | ------------- | ------------------------------------------------------------------------------------------- |
157+
| :useRadius | Boolean | true | Setting useRadius to true will make Simplert's message box and buttons have rounded corners |
158+
| :useIcon | Boolean | true | true : will use SweatAlert icon based on `type`, false : not use icon |
159+
| ref | String | - | child reference, [read here] |
160+
161+
## Object Arguments
162+
163+
| Property | Type - Default | Description |
164+
| --------------------- | ---------------- | ----------------------------------------------- |
165+
| title | string - empty | Title of alert |
166+
| message | string - empty | Message of alert |
167+
| type | string - 'info' | Type of icon will used |
168+
| customClass | string - empty | Adding extra class in parent simplert |
169+
| customIconUrl | string - empty | Using custom icon instead of default |
170+
| customCloseBtnText | string - empty | Using custom text in button close |
171+
| customCloseBtnClass | string - empty | Change default class in button close |
172+
| onClose | func - undefined | Function will fired when close button clicked |
173+
| useConfirmBtn | boolean - false | Using two button with close and confirm |
174+
| customConfirmBtnText | string - empty | Using custom text in button confirm |
175+
| customConfirmBtnClass | string - empty | Change default class in button confirm |
176+
| onConfirm | func - undefined | Function will fired when confirm button clicked |
177+
| disableOverlayClick | string - empty | Prevent click overlay will close alert |
178+
| hideAllButton | boolean - false | Hide both button close and confirm |
179+
| onOpen | func - undefined | Function will fired when open alert |
180+
| showXclose | boolean - false | Show X close button in right corner of alert |
181+
182+
```javascript
183+
{
184+
title: 'test', //string -- title alert
185+
message: 'message', //string -- message alert
186+
type: 'success', //string -- type : info (default), success, warning, error
187+
customClass: '', //string -- custom class in simplert div
188+
customIconUrl: '', //string -- custom url custom image icon
189+
customCloseBtnText: '', //string -- close button text
190+
customCloseBtnClass: '', //string -- custom class for close button
191+
onClose: this.onClose, //function -- when close triggered
192+
useConfirmBtn: false, //boolean -- using confirm button
193+
customConfirmBtnText: '', //string -- confirm button text
194+
customConfirmBtnClass: '', //string -- custom class for confirm button
195+
onConfirm: this.onConfirm, //function -- when confirm button triggered
196+
disableOverlayClick: false, //boolean -- set to true if you want disable overlay click function
197+
hideAllButton: false, //boolean -- set to true if you want hide all button
198+
onOpen: null, //function -- when simplert open will fire this method if available
199+
showXclose: true //boolean -- show x close button
200+
}
201+
```
202+
203+
## FAQ
204+
205+
### Why my `onConfirm` fired immediately
206+
207+
**A** : It happen when you have this below arguments:
208+
209+
```js
210+
let Warning = {
211+
message: 'Do you really want to leave? you have unsaved changes!',
212+
useConfirmBtn: true,
213+
customCloseBtnText: 'Yes',
214+
customConfirmBtnText: 'No',
215+
onClose: this.Leave(),
216+
onConfirm: this.StayWhereYouAre(),
217+
};
218+
```
219+
220+
The function `this.StayWhereYouAre()` will be fired immediately, even you are not clicked it yet.
221+
It because you put function to be executed.
222+
The solution is to change the way you pass function, just pass as an ordinary variable:
223+
224+
```js
225+
let Warning = {
226+
message: 'Do you really want to leave? you have unsaved changes!',
227+
useConfirmBtn: true,
228+
customCloseBtnText: 'Yes',
229+
customConfirmBtnText: 'No',
230+
onClose: this.Leave,
231+
onConfirm: this.StayWhereYouAre,
232+
};
233+
```
151234

152-
## Credit
235+
## Credits
153236

154-
+ Icon from [SweetAlert](https://github.com/t4t5/sweetalert)
237+
- The icons from [SweetAlert](https://github.com/t4t5/sweetalert)
238+
- [Chakra UI](https://vue.chakra-ui.com/) for building the demo page
239+
- [vue-code-highlight](https://github.com/elisiondesign/vue-code-highlight) for beautiful syntax highlighter
240+
- Other awesome projects you can found on the `package.json`
155241

156242
## Contributing
157243

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue2-simplert-plugin",
33
"description": "Vue 2 Simple Alert Plugin (SweetAlert Inspired)",
4-
"version": "0.6.0-beta.1",
4+
"version": "0.6.0-beta.2",
55
"author": "Irfan Maulana <mazipanneh@gmail.com>",
66
"license": "MIT",
77
"private": false,

0 commit comments

Comments
 (0)