├── .github
    └── no-response.yml
├── package.json
├── LICENSE
├── README.md
└── v-snackbars.vue


/.github/no-response.yml:
--------------------------------------------------------------------------------
 1 | # Configuration for probot-no-response - https://github.com/probot/no-response
 2 | 
 3 | # Number of days of inactivity before an Issue is closed for lack of response
 4 | daysUntilClose: 5
 5 | # Label requiring a response
 6 | responseRequiredLabel: waiting-for-requestor
 7 | # Comment to post when closing an Issue for lack of response. Set to `false` to disable
 8 | closeComment: >
 9 |   This issue has been automatically closed because the requestor didn't provide any additional comment.
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "v-snackbars",
 3 |   "version": "3.2.8",
 4 |   "description": "Display the v-snackbar (from Vuetify) with a stack display",
 5 |   "main": "v-snackbars.vue",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/Aymkdn/v-snackbars.git"
12 |   },
13 |   "keywords": [
14 |     "vuetify"
15 |   ],
16 |   "author": "aymkdn",
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/Aymkdn/v-snackbars/issues"
20 |   },
21 |   "homepage": "https://github.com/Aymkdn/v-snackbars#readme"
22 | }
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Aymeric
 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.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # v-snackbars
  2 | Display the `v-snackbar` (from Vuetify) with a stack display
  3 | 
  4 | ![Capture](https://user-images.githubusercontent.com/946315/86259071-d8468480-bbbb-11ea-9eca-3aac7d9be455.PNG)
  5 | 
  6 | ## Requirements
  7 | 
  8 | [Vuetify](https://www.npmjs.com/package/vuetify) > v2.3 (it may work with an earlier version of Vuetify but I haven't tested)
  9 | 
 10 | ## Install
 11 | 
 12 | ```bash
 13 | npm install v-snackbars
 14 | ```
 15 | 
 16 | ## Demo
 17 | 
 18 | See it in action: https://codesandbox.io/s/v-snackbars-demo-8xrbr?file=/src/App.vue
 19 | 
 20 | ## How to use
 21 | 
 22 | ```js
 23 | import VSnackbars from "v-snackbars"
 24 | export default {
 25 |   components:{
 26 |     "v-snackbars": VSnackbars
 27 |   },
 28 |   […]
 29 | }
 30 | ```
 31 | 
 32 | ```vue
 33 | <v-snackbars :messages.sync="messages"></v-snackbars>
 34 | ```
 35 | 
 36 | You need to provide a `messages` array. Using a `push` on the array will cause the text to be shown in a snackbar.
 37 | 
 38 | For example, to display _"This is a message"_, just do the below:
 39 | ```javascript
 40 | this.messages.push("This is a message");
 41 | ```
 42 | 
 43 | You can use the same options as the `v-snackbar`. For example:
 44 | ```vue
 45 | <v-snackbars :messages.sync="messages" :timeout="10000" bottom left color="red"></v-snackbars>
 46 | ```
 47 | 
 48 | ### Options
 49 | 
 50 | #### Snackbar Options
 51 | 
 52 | The same [`v-snackbar` options](https://vuetifyjs.com/en/components/snackbars/) should be applicable, like `bottom`, `right`, `left`, `top`, `color`, `timeout`, ….
 53 | 
 54 | ### Personalized content
 55 | 
 56 | You can use `v-slot:default` to customize the content of the snackbar.
 57 | 
 58 | For example:
 59 | ```vue
 60 | <v-snackbars :messages.sync="messages" :timeout="-1" color="black" top right>
 61 |   <template v-slot:default="{ message, id, index }">
 62 |     <h3 class="mb-2">Header</h3>
 63 |     {{ message }}
 64 |   </template>
 65 | </v-snackbars>
 66 | ```
 67 | 
 68 | The parameter:
 69 |   - `message`: the current message that is displayed in the notification
 70 |   - `id`: the unique key/id of the message
 71 |   - `index`: the index in the array of notifications/messages
 72 | 
 73 | #### Personalized button
 74 | 
 75 | A `close` button is used by default. If you prefer to define your own action button, you can use a ` v-slot:action`.
 76 | 
 77 | For example:
 78 | ```vue
 79 | <v-snackbars :messages.sync="messages" :timeout="-1" color="black" top right>
 80 |   <template v-slot:action="{ close, index, message, id }">
 81 |     <v-btn text @click="close()">Dismiss</v-btn>
 82 |   </template>
 83 | </v-snackbars>
 84 | ```
 85 | 
 86 | By clicking on `Dismiss`, it will remove the related snackbar.
 87 | 
 88 | The parameters:
 89 |   - `close`: the function to remove a notification
 90 |   - `index`: the index in the array of notifications/messages
 91 |   - `message`: the current message that is displayed in the notification
 92 |   - `id`: the unique key/id of the message
 93 | 
 94 | ## Objects
 95 | 
 96 | If you want to customize each snackbar, you can also pass a `objects` instead of `messages`, which will contain the various props (like `message`, `color`, `timeout`, `transition`, `contentClass` or the position).
 97 | 
 98 | In the JavaScript code:
 99 | ```javascript
100 | this.objects.push({
101 |   message:"Success",
102 |   color:"green",
103 |   timeout:5000
104 | })
105 | this.objects.push({
106 |   message:"Error",
107 |   color:"red",
108 |   timeout:-1
109 | })
110 | ```
111 | 
112 | In your Vue template:
113 | ```vue
114 | <v-snackbars :objects.sync="objects"></v-snackbars>
115 | ```
116 | 
117 | Check the **"Random Toast"** button on the [demo](https://codesandbox.io/s/v-snackbars-demo-8xrbr?file=/src/App.vue).
118 | 
119 | ## Interactivity
120 | 
121 | You can add some layers of interactivity with the messages.
122 | 
123 | For example, you can change the text by doing:
124 | ```javascript
125 | this.$set(this.messages, i, "New message to display");
126 | ```
127 | 
128 | To remove a notification, you'll have to use `splice`:
129 | ```javascript
130 | this.messages.splice(i, 1);
131 | ```
132 | 
133 | Check the **"Show Interactivity"** button on the [demo](https://codesandbox.io/s/v-snackbars-demo-8xrbr?file=/src/App.vue).
134 | 


--------------------------------------------------------------------------------
/v-snackbars.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-snackbar
  4 |       v-bind="$attrs"
  5 |       v-model="snackbar.show"
  6 |       :transition="snackbar.transition"
  7 |       :top="snackbar.top"
  8 |       :bottom="snackbar.bottom"
  9 |       :left="snackbar.left"
 10 |       :right="snackbar.right"
 11 |       :color="snackbar.color"
 12 |       :content-class="snackbar.contentClass"
 13 |       :key="snackbar.key"
 14 |       :ref="'v-snackbars-' + identifier"
 15 |       :class="'v-snackbars v-snackbars-' + identifier + '-' + snackbar.key"
 16 |       :timeout="-1"
 17 |       v-for="(snackbar, idx) in snackbars"
 18 |     >
 19 |       <template v-slot:default>
 20 |         <slot 
 21 |           :message="snackbar.message"
 22 |           :id="snackbar.key"
 23 |           :index="idx"
 24 |         >
 25 |           {{ snackbar.message }}
 26 |         </slot>
 27 |       </template>
 28 |       <template v-slot:action>
 29 |         <slot
 30 |           name="action"
 31 |           :close="() => removeMessage(snackbar.key, true)"
 32 |           :id="snackbar.key"
 33 |           :index="idx"
 34 |           :message="snackbar.message"
 35 |         >
 36 |           <v-btn text @click="removeMessage(snackbar.key, true)">close</v-btn>
 37 |         </slot>
 38 |       </template>
 39 |     </v-snackbar>
 40 |     <css-style :key="key + idx" v-for="(key, idx) in keys">
 41 |       .v-snackbars.v-snackbars-{{ identifier }}-{{ key }} .v-snack__wrapper {
 42 |       transition: {{ topOrBottom[key] }} 500ms; {{ topOrBottom[key] }}: 0; }
 43 |       .v-snackbars.v-snackbars-{{ identifier }}-{{ key }} > .v-snack__wrapper {
 44 |       {{ topOrBottom[key] }}:{{ calcDistance(key) }}px; }
 45 |     </css-style>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script>
 50 | export default {
 51 |   name: "v-snackbars",
 52 |   inheritAttrs: false,
 53 |   props: {
 54 |     messages: {
 55 |       type: Array,
 56 |       default: () => [],
 57 |     },
 58 |     timeout: {
 59 |       type: [Number, String],
 60 |       default: 5000,
 61 |     },
 62 |     distance: {
 63 |       type: [Number, String],
 64 |       default: 55,
 65 |     },
 66 |     objects: {
 67 |       type: Array,
 68 |       default: () => [],
 69 |     },
 70 |   },
 71 |   data() {
 72 |     return {
 73 |       len: 0, // we need it to have a css transition
 74 |       snackbars: [], // array of {key, message, top, right, left, bottom, color, transition, timeout, show}
 75 |       keys: [], // array of 'keys'
 76 |       heights: {}, // height of each snackbar to correctly position them
 77 |       identifier: Date.now() + (Math.random() + "").slice(2), // to avoid issues when several v-snackbars on the page
 78 |     };
 79 |   },
 80 |   components: {
 81 |     "css-style": {
 82 |       render: function (createElement) {
 83 |         return createElement("style", this.$slots.default);
 84 |       },
 85 |     },
 86 |   },
 87 |   computed: {
 88 |     allMessages() {
 89 |       if (this.objects.length > 0) return this.objects.map((o) => o.message);
 90 |       return this.messages;
 91 |     },
 92 |     // to correcly position the snackbar
 93 |     indexPosition() {
 94 |       let ret = {};
 95 |       let idx = {
 96 |         topCenter: 0,
 97 |         topLeft: 0,
 98 |         topRight: 0,
 99 |         bottomCenter: 0,
100 |         bottomLeft: 0,
101 |         bottomRight: 0,
102 |       };
103 |       this.snackbars.forEach((o) => {
104 |         if (o.top && !o.left && !o.right) ret[o.key] = idx.topCenter++;
105 |         if (o.top && o.left) ret[o.key] = idx.topLeft++;
106 |         if (o.top && o.right) ret[o.key] = idx.topRight++;
107 |         if (o.bottom && !o.left && !o.right) ret[o.key] = idx.bottomCenter++;
108 |         if (o.bottom && o.left) ret[o.key] = idx.bottomLeft++;
109 |         if (o.bottom && o.right) ret[o.key] = idx.bottomRight++;
110 |       });
111 |       return ret;
112 |     },
113 |     topOrBottom() {
114 |       let ret = {};
115 |       this.snackbars.forEach((o) => {
116 |         ret[o.key] = o.top ? "top" : "bottom";
117 |       });
118 |       return ret;
119 |     },
120 |   },
121 |   watch: {
122 |     messages() {
123 |       this.eventify(this.messages);
124 |     },
125 |     objects: {
126 |       handler() {
127 |         this.eventify(this.objects);
128 |       },
129 |       deep: true,
130 |     },
131 |   },
132 |   methods: {
133 |     getProp(prop, i) {
134 |       if (
135 |         this.objects.length > i &&
136 |         typeof this.objects[i][prop] !== "undefined"
137 |       )
138 |         return this.objects[i][prop];
139 |       if (typeof this.$attrs[prop] !== "undefined") return this.$attrs[prop];
140 |       if (typeof this[prop] !== "undefined") return this[prop];
141 |       return undefined;
142 |     },
143 |     setSnackbars() {
144 |       for (let i = this.snackbars.length; i < this.allMessages.length; i++) {
145 |         let key = i + "-" + Date.now();
146 |         let top = this.getProp("top", i);
147 |         let bottom = this.getProp("bottom", i);
148 |         let left = this.getProp("left", i);
149 |         let right = this.getProp("right", i);
150 |         top = top === "" ? true : top;
151 |         bottom = bottom === "" ? true : bottom;
152 |         left = left === "" ? true : left;
153 |         right = right === "" ? true : right;
154 |         // by default, it will be at the bottom
155 |         if (!bottom && !top) bottom = true;
156 |         this.snackbars.push({
157 |           key: key,
158 |           message: this.allMessages[i],
159 |           top: top,
160 |           bottom: bottom,
161 |           left: left,
162 |           right: right,
163 |           color: this.getProp("color", i) || "black",
164 |           contentClass: this.getProp("content-class", i) || this.getProp("contentClass", i) || "",
165 |           timeout: null,
166 |           transition:
167 |             this.getProp("transition", i) ||
168 |             (right ? "slide-x-reverse-transition" : "slide-x-transition"),
169 |           show: false,
170 |         });
171 |         this.keys.push(key);
172 |         this.$nextTick(function () {
173 |           this.snackbars[i].show = true; // to see the come-in animation
174 | 
175 |           this.$nextTick(function () {
176 |             // find the correct height
177 |             let height = this.distance;
178 |             let elem = document.querySelector(
179 |               ".v-snackbars-" + this.identifier + "-" + key
180 |             );
181 | 
182 |             if (elem) {
183 |               let wrapper = elem.querySelector(".v-snack__wrapper");
184 |               if (wrapper) {
185 |                 height = wrapper.clientHeight + 7;
186 |               }
187 |             }
188 |             this.$set(this.heights, key, height);
189 | 
190 |             // define the timeout
191 |             let timeout = this.getProp("timeout", i);
192 |             if (timeout > 0) {
193 |               this.snackbars[i].timeout = setTimeout(
194 |                 () => this.removeMessage(key, true),
195 |                 timeout * 1
196 |               );
197 |             }
198 |           });
199 |         });
200 |       }
201 |     },
202 |     removeMessage(key, fromComponent) {
203 |       let idx = this.snackbars.findIndex((s) => s.key === key);
204 |       if (idx > -1) {
205 |         this.snackbars[idx].show = false;
206 | 
207 |         let removeSnackbar = () => {
208 |           let idx = this.snackbars.findIndex((s) => s.key === key);
209 |           this.snackbars.splice(idx, 1);
210 |           // dipose all
211 |           this.keys = this.keys.filter((k) => k !== key);
212 |           delete this.heights[key];
213 |           // only send back the changes if it happens from this component
214 |           if (fromComponent) {
215 |             this.$emit(
216 |               "update:messages",
217 |               this.allMessages.filter((m, i) => i !== idx)
218 |             );
219 |             this.$emit(
220 |               "update:objects",
221 |               this.objects.filter((m, i) => i !== idx)
222 |             );
223 |           }
224 |         };
225 |         // if a timeout on the snackbar, clear it
226 |         if (this.snackbars[idx].timeout)
227 |           clearTimeout(this.snackbars[idx].timeout);
228 | 
229 |         // use a timeout to ensure the 'transitionend' will be triggerred
230 |         let timeout = setTimeout(removeSnackbar, 600);
231 | 
232 |         // skip waiting if key does not exist
233 |         let ref = this.$refs["v-snackbars-" + this.identifier];
234 |         if (!ref || !ref[idx]) return;
235 | 
236 |         // wait the end of the animation
237 |         ref[idx].$el.addEventListener(
238 |           "transitionend",
239 |           () => {
240 |             clearTimeout(timeout);
241 |             removeSnackbar();
242 |           },
243 |           { once: true }
244 |         );
245 |       }
246 |     },
247 |     calcDistance(key) {
248 |       // calculate the position in the stack for the snackbar
249 |       let distance = 0;
250 |       let snackbar = this.snackbars.find((s) => s.key === key);
251 |       if (!snackbar) return 0;
252 |       for (let i = 0; i < this.snackbars.length; i++) {
253 |         // we add all the heights for each visible snackbar in the same corner
254 |         if (this.snackbars[i].key === key) break;
255 |         if (
256 |           this.snackbars[i].show &&
257 |           this.snackbars[i].bottom === snackbar.bottom &&
258 |           this.snackbars[i].top === snackbar.top &&
259 |           this.snackbars[i].right === snackbar.right &&
260 |           this.snackbars[i].left === snackbar.left
261 |         ) {
262 |           distance += this.heights[this.snackbars[i].key] || 0;
263 |         }
264 |       }
265 | 
266 |       return distance;
267 |     },
268 |     eventify(arr) {
269 |       // detect changes on 'messages' and 'objects'
270 |       let _this = this;
271 |       let eventify = function (arr) {
272 |         arr.isEventified = true;
273 |         // overwrite 'push' method
274 |         let pushMethod = arr.push;
275 |         arr.push = function (e) {
276 |           pushMethod.call(arr, e);
277 |           _this.setSnackbars();
278 |         };
279 |         // overwrite 'splice' method
280 |         let spliceMethod = arr.splice;
281 |         arr.splice = function () {
282 |           let args = [],
283 |             len = arguments.length;
284 |           while (len--) args[len] = arguments[len];
285 |           spliceMethod.apply(arr, args);
286 |           let idx = args[0];
287 |           let nbDel = args[1];
288 |           let elemsLen = args.length - 2;
289 | 
290 |           // do we just remove an element?
291 |           if (elemsLen === 0) {
292 |             nbDel += idx;
293 |             while (idx < nbDel) {
294 |               if (_this.snackbars[idx]) {
295 |                 _this.removeMessage(_this.snackbars[idx].key);
296 |               }
297 |               idx++;
298 |             }
299 |           } else if (elemsLen > 0) {
300 |             // or we set a value on an element using this.$set, so we update the message
301 |             for (let i = 2; i < elemsLen + 2; i++) {
302 |               if (typeof args[i] === "string") {
303 |                 _this.$set(_this.snackbars[idx], "message", args[i]);
304 |               } else if (typeof args[i] === "object") {
305 |                 for (let prop in args[i]) {
306 |                   if (prop === "timeout") {
307 |                     let timeout = args[i][prop] * 1;
308 |                     // if there's an existing timeout, clear it before setting the new timeout
309 |                     if (_this.snackbars[idx].timeout) {
310 |                       clearTimeout(_this.snackbars[idx].timeout);
311 |                       _this.snackbars[idx].timeout = null;
312 |                     }
313 |                     if (timeout > -1) {
314 |                       let key = _this.snackbars[idx].key;
315 |                       _this.snackbars[idx].timeout = setTimeout(() => {
316 |                         _this.removeMessage(key, true);
317 |                       }, timeout);
318 |                     }
319 |                   } else {
320 |                     // update the property
321 |                     _this.$set(_this.snackbars[idx], prop, args[i][prop]);
322 |                   }
323 |                 }
324 |               }
325 |             }
326 |             idx++;
327 |           }
328 |         };
329 |       };
330 |       if (!arr.isEventified) eventify(arr);
331 |     },
332 |   },
333 |   created() {
334 |     this.eventify(this.messages);
335 |     this.eventify(this.objects);
336 |   },
337 | };
338 | </script>
339 | 


--------------------------------------------------------------------------------