Skip to content

Commit 9cb93be

Browse files
shakee93shakee93
committed
Merge branch 'master' of https://github.com/shakee93/vue-toasted
# Conflicts: # .idea/workspace.xml
2 parents e4f551a + a3feb80 commit 9cb93be

File tree

13 files changed

+410
-8792
lines changed

13 files changed

+410
-8792
lines changed

‎.idea/watcherTasks.xml

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/workspace.xml

Lines changed: 34 additions & 455 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.npmignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ src/
77
.babelrc
88
webpack.config.js
99
README.md
10-
*.map
10+
*.map
11+
examples

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 Shakeeb Sadikeen
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@
44
</a>
55
</p>
66

7+
[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/vuejs/awesome-vue)
78
## Introduction
89

910
vue-toasted is a cool material toast plugin with variety of options and styles. it is touch compatible and responsive.
1011
issues and pr's are always welcome
1112

13+
Checkout the <a target="_blank" href="https://shakee93.github.io/vue-toasted/"> Interactive Demo </a> here.
14+
1215
## Usage
1316

1417
It is simple. couple of lines all what you need.
@@ -43,7 +46,7 @@ All Good Now you have this cool toast in your project.. let's take a look at the
4346
vue-toasted has methods which makes it much easier to use
4447

4548
### methods
46-
49+
all the below methods return the `Toasted Object` of the toast.
4750
```javascript
4851
Vue.toasted.success( {string | html } message, {object} options)
4952

@@ -54,16 +57,31 @@ Vue.toasted.info(message, options)
5457
Vue.toasted.error(message, options)
5558
```
5659

60+
####Toast Object
61+
check the examples to see how to manipulate the object.
62+
```javascript
63+
64+
// html element of the toast
65+
el : HtmlElement
66+
67+
// change text or html of the toast
68+
text : Function(text)
69+
70+
// fadeAway the toast. default delay will be 800ms
71+
goAway : Function(delay = 800)
72+
73+
```
74+
5775
### options
5876

5977
below are the available options
6078

6179
| Option | Description | Values | Default |
6280
|-----------|------------------------------------------------|-------------------------|----------|
63-
| position | location of the toast | 'top-right', 'top-left', 'bottom-right', 'bottom-left' | 'top-right' |
81+
| position | position of the toast container | 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left' | 'top-right' |
6482
| duration | display time of the toast | in millisecond | null |
6583
| className | custom css class name of the toast | | null |
66-
| type | style of the toast you prefer | 'primary', 'outline', 'bubble' | 'primary' |
84+
| theme | theme of the toast you prefer | 'primary', 'outline', 'bubble' | 'primary' |
6785
| onComplete | class name of the optional icon font | a callback function | null |
6886

6987
Enjoy Toasting !!

‎dist/vue-toasted.min.js

Lines changed: 3 additions & 8145 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/toast-object.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Vue from 'vue';
2+
import VueToasted from 'vue-toasted';
3+
4+
Vue.use(VueToasted);
5+
6+
let toast = Vue.toasted.show('hello there, i am a toast !!');
7+
8+
// now you can use the toast object methods
9+
toast
10+
// change the text
11+
.text("change me now")
12+
13+
// fade away in 1.5 seconds
14+
.goAway(1500);

‎package.json

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,33 @@
11
{
22
"name": "vue-toasted",
33
"description": "Cool Toast plugin for vue",
4-
"version": "1.0.14",
4+
"version": "1.0.21",
55
"author": "Shakeeb Sadikeen <shakee.zats@gmail.com>",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/shakee93/vue-toasted.git"
9+
},
610
"main": "./dist/vue-toasted.min.js",
711
"scripts": {
812
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
913
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
14+
"build-local-watch": "cross-env NODE_ENV=production webpack --progress --hide-modules --watch",
1015
"watch": "webpack --progress --hide-modules --watch",
1116
"prebuild": "cross-env NODE_ENV=production webpack --progress --hide-modules",
1217
"es": "babel src --presets babel-preset-es2015 --out-dir dist"
1318
},
19+
"keywords": [
20+
"toast",
21+
"vue",
22+
"vue-toasted",
23+
"responsive",
24+
"touch-compatible",
25+
"touch",
26+
"vue-toast"
27+
],
1428
"dependencies": {
1529
"hammerjs": "^2.0.8",
30+
"sass-loader": "^6.0.3",
1631
"velocity-animate": "^1.4.3"
1732
},
1833
"devDependencies": {
@@ -24,6 +39,8 @@
2439
"cross-env": "^3.0.0",
2540
"css-loader": "^0.25.0",
2641
"file-loader": "^0.9.0",
42+
"node-sass": "^4.5.0",
43+
"sass-loader": "^6.0.3",
2744
"vue-loader": "^11.0.0",
2845
"vue-template-compiler": "^2.2.1",
2946
"webpack": "^2.2.0",

‎src/index.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import { initPlugin } from './toast';
22

3-
export default {
3+
const Toasted = {
44
install: (Vue, options) => {
55
initPlugin(Vue, options)
66
}
77
};
8+
9+
if (typeof window !== 'undefined' && window.Vue) {
10+
window.Vue.use(Toasted);
11+
}
12+
13+
export default Toasted

‎src/sass/toast.scss

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
#toasted-container {
2+
display: block;
3+
position: fixed;
4+
z-index: 10000;
5+
6+
.toasted {
7+
top: 35px;
8+
width: auto;
9+
clear: both;
10+
margin-top: 10px;
11+
position: relative;
12+
max-width: 100%;
13+
height: auto;
14+
word-break: break-all;
15+
display: flex;
16+
align-items: center;
17+
justify-content: space-between;
18+
19+
.btn, .btn-flat {
20+
margin: 0;
21+
margin-left: 3rem;
22+
}
23+
24+
// Templates
25+
26+
&.rounded {
27+
border-radius: 24px;
28+
}
29+
30+
// Primary
31+
&.primary {
32+
border-radius: 2px;
33+
min-height: 38px;
34+
line-height: 1.1em;
35+
background-color: #353535;
36+
padding: 0 20px;
37+
font-size: 15px;
38+
font-weight: 300;
39+
color: #fff;
40+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
41+
42+
&.success {
43+
background: #4CAF50;
44+
}
45+
46+
&.error {
47+
background: #F44336;
48+
}
49+
50+
&.info {
51+
background: #3F51B5;
52+
}
53+
54+
}
55+
56+
// Bubble
57+
&.bubble {
58+
border-radius: 30px;
59+
min-height: 38px;
60+
line-height: 1.1em;
61+
background-color: #FF7043;
62+
padding: 0 20px;
63+
font-size: 15px;
64+
font-weight: 300;
65+
color: #fff;
66+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
67+
68+
&.success {
69+
background: #4CAF50;
70+
}
71+
72+
&.error {
73+
background: #F44336;
74+
}
75+
76+
&.info {
77+
background: #3F51B5;
78+
}
79+
}
80+
81+
&.outline {
82+
border-radius: 30px;
83+
min-height: 38px;
84+
line-height: 1.1em;
85+
background-color: white;
86+
border: 1px solid #676767;
87+
padding: 0 20px;
88+
font-size: 15px;
89+
color: #676767;
90+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
91+
font-weight: bold;
92+
93+
&.success {
94+
color: #4CAF50;
95+
border-color: #4CAF50;
96+
}
97+
98+
&.error {
99+
color: #F44336;
100+
border-color: #F44336;
101+
}
102+
103+
&.info {
104+
color: #3F51B5;
105+
border-color: #3F51B5;
106+
}
107+
}
108+
}
109+
}
110+
111+
@media only screen and (max-width: 600px) {
112+
#toasted-container {
113+
min-width: 100%;
114+
bottom: 0%;
115+
}
116+
}
117+
118+
@media only screen and (min-width: 601px) and (max-width: 992px) {
119+
#toasted-container {
120+
max-width: 90%;
121+
}
122+
}
123+
124+
@media only screen and (min-width: 993px) {
125+
#toasted-container {
126+
max-width: 86%;
127+
128+
&.top-right {
129+
top: 10%;
130+
right: 7%;
131+
}
132+
133+
&.top-left {
134+
top: 10%;
135+
left: 7%;
136+
}
137+
138+
&.top-center {
139+
top: 10%;
140+
left: 50%;
141+
transform: translateX(-50%);
142+
}
143+
144+
&.bottom-right {
145+
right: 5%;
146+
bottom: 7%;
147+
}
148+
149+
&.bottom-left {
150+
left: 5%;
151+
bottom: 7%;
152+
}
153+
154+
&.bottom-center {
155+
left: 50%;
156+
transform: translateX(-50%);
157+
bottom: 7%;
158+
}
159+
160+
&.top-left .toasted, &.bottom-left .toasted {
161+
float: left;
162+
}
163+
}
164+
}
165+
166+
@media only screen and (max-width: 600px) {
167+
.toasted {
168+
width: 100%;
169+
border-radius: 0;
170+
}
171+
}
172+
173+
@media only screen and (min-width: 601px) and (max-width: 992px) {
174+
.toasted {
175+
float: left;
176+
}
177+
}
178+
179+
@media only screen and (min-width: 993px) {
180+
.toasted {
181+
float: right;
182+
}
183+
}

0 commit comments

Comments
 (0)