first commit

This commit is contained in:
DanielRamirezGe
2020-01-14 20:43:08 -06:00
parent 3557894f7f
commit 5eecfbf6cd
26326 changed files with 2434803 additions and 0 deletions
+22
View File
@@ -0,0 +1,22 @@
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '@vue/prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
},
overrides: [
{
files: ['**/__tests__/*.{j,t}s?(x)'],
env: {
jest: true
}
}
]
};
+7
View File
@@ -0,0 +1,7 @@
Copyright 2018 Roman Privalov (c)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+260
View File
@@ -0,0 +1,260 @@
# vue-flash-message
[![vue](https://img.shields.io/badge/Vue-2.x-green.svg)](https://vuejs.org/index.html)
[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/smwbtech/vue-flash-message/blob/master/LICENSE.md)
[![Build Status](https://travis-ci.org/smwbtech/vue-flash-message.svg?branch=master)](https://travis-ci.org/smwbtech/vue-flash-message)
[![Coverage Status](https://coveralls.io/repos/github/smwbtech/vue-flash-message/badge.svg?branch=master)](https://coveralls.io/github/smwbtech/vue-flash-message?branch=master)
[![Size](https://badgen.net/bundlephobia/minzip/@smartweb/vue-flash-message)](https://bundlephobia.com/result?p=@smartweb/vue-flash-message@latest)
![Gif Image](https://raw.githubusercontent.com/smwbtech/vue-flash-message/master/public/vue-flash-message.gif)
The component to display single flash message or multiple flash messages to user. It has styles presets, but can be easily customized by passing style object as argument.
#### [Live Demo](https://smwbtech.github.io/vue-flash-message/)
#### [Docs](https://smwb-tech.gitbook.io/vue-flash-message/)
## Setup
```
npm i @smartweb/vue-flash-message
```
## Installation and Configuration
Register the component in your app entry point (main.js or as you called it)
```javascript
import Vue from 'vue';
import FlashMessage from '@smartweb/vue-flash-message';
Vue.use(FlashMessage);
```
You can pass [configuration object](#configuration-object) as second argument
```javascript
Vue.use(FlashMessage, config);
```
### Nuxt.js
Create vue-flash-message.js file in plugins directory and put the following code:
```javascript
import Vue from 'vue';
import VueFlashMessage from '@smartweb/vue-flash-message';
Vue.use(VueFlashMessage);
```
In your nuxt.config.js file register your plugin
```javascript
{
/* Since Nuxt.js 2.4, mode has been introduced as option of plugins to specify plugin type, possible value are: client or server. ssr: false will be adapted to mode: 'client' and deprecated in next major release.
More info: https://nuxtjs.org/guide/plugins#client-side-only */
plugins: [{ src: '~/plugins/flash-message.js', mode: 'client' }]
},
```
### Configuration object
---
| Property | Type | Description | Default |
| ------------ | ---------- | ------------------------------------------------------------------------------------------------- | -------------- |
| **name** | **String** | It is a name of the component and alias for the EventBus global property. | 'flashMessage' |
| **tag** | **String** | Custom tag for the component to use in your application. | 'FlashMesage' |
| **time** | **Number** | Duration (in ms) of the message display (can be customized during message call). | 8000 |
| **strategy** | **String** | You can pass 'single' or 'multiple' to choose the default strategy. It can be changed in process. | 'single' |
## Usage
Put the component into your template
```html
<FlashMessage></FlashMessage>
```
You can pass a string as position property to set up default position of messages block. Valid values: **'right bottom'**, **'right top'**, **'left bottom'**, **'left top'**.
```html
<FlashMessage :position="right bottom"></FlashMessage>
```
Now you can access flash message by using global EventBus alias (that is "flashMessage" by default) of your Vue instance
```javascript
this.flashMessage.show({
status: 'error',
title: 'Error Message Title',
message: 'Oh, you broke my heart! Shame on you!'
});
```
## Methods
### Display Methods
---
Every display message method will return the id of the message instance
```javascript
this.flashMessage.show({
status: 'error',
title: 'Error Message Title',
message: 'Oh, you broke my heart! Shame on you!'
});
```
You also can use shorthands without status property.
```javascript
this.flashMessage.error({
title: 'Error Message Title',
message: 'Oh, you broke my heart! Shame on you!'
});
this.flashMessage.warning({
title: 'Warning Message Title',
message: "Don't stop me nooooow....!"
});
this.flashMessage.info({
title: 'Info Message Title',
message: 'Just want you to know, that Vue is so cool'
});
this.flashMessage.success({
title: 'Success Message Title',
message: 'Hoorah, it is my fist npm package and it works!'
});
```
You can pass the [data object](#data-object) to configure a message instance.
### Data Object
---
The first argument - is data object.
| Property | Type | Description |
| ----------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **status** | **String** | Status of component. Default presets: 'error', 'warning', 'info', 'success' |
| **title** | **String** | Title of your message |
| **message** | **String** | Text of your message |
| **time** | **Number** | Duration (in ms) of the single message. If time equal to 0, message will be show until user click on it. Please, if you combine {clickable: false , time: 0 } in case when you show your own component in flash message block, you should provide user interface element to close message window. |
| **icon** | **String** | A URL for icon or image to display |
| **clickable** | **Boolean** | Allows to control whether the user can remove message by click on it or not. |
| **blockClass** | **String** | custom class name for flashMessage block. |
| **wrapperClass** | **String** | custom class name for wrapper block. |
| **iconClass** | **String** | custom class name for icon block. |
| **contentClass** | **String** | custom class name for content block |
| **position** | **String** | in case, when you want to set up custom "fixed" position relative to viewport, you can pass string 'left/right-top/bottom'. Available positions: 'top left', 'top right', 'bottom left', 'bottom right'. |
| **x** | **Number** | Amount of pixels to position your message relating to the 'X' axis |
| **y** | **Number** | Amount of pixels to position your message relating to the 'Y' axis |
| **html** | **String** | You can pass a string with raw html to render inside flash message block axis |
| **componentName** | **String** | Register your vue component globally and pass in componentName property of data object to display it inside flash message block |
---
**Example:**
```javascript
methods: {
deleteTrouble() {
this.$axios.delete(`/delete/trouble/${trouble.id}`)
.then( res => {
let { status, data, error } = res.data;
if(status) {
this.flashMessage.success({
title: 'Don\'t Warry',
message: 'Be Happy!',
time: 5000,
blockClass: 'custom-block-class'
});
}
else {
this.flashMessage.error({title: error.name || 'Error', message: error.message});
}
})
.catch(e);
}
}
```
### Callbacks
---
As second argument you can pass object with two properties: "mounted" and "destroyed".
| Property | Type | Description |
| ------------- | ------------ | ------------------------------------------ |
| **mounted** | **Function** | Will be invoked, when flashMessage appears |
| **destroyed** | **Function** | Will be invoked, when flashMessage gone |
---
**Example:**
```html
<p>{{ text }}</p>
<button @click="clickHandler" type="button" name="button">Show Text!</button>
```
For example you can add some sound which will be played when message appears
```javascript
methods: {
showText() {
this.text = 'Hello from callback!'
},
clearText() {
this.text = 'Bye... 1, ..2, ..3';
let sound = new Audio('audio source'); // add sound source
sound.play(); // and play it
setTimeout( () => this.text = '', 3000);
},
clickHandler() {
this.flashMessage.info({
title: 'Ooooooops!',
message: 'Do you see this text and hear this sound? Wtf?'
},
{
mounted: showText,
destroyed: clearText
})
}
}
```
### Delete Methods
---
You can delete message programmatically using deleteMessage method
**Example:**
```javascript
let id = this.flashMessage.info({
title: 'Hey, man. Time for beer!',
message: 'It is Friday. Time to have a little party.'
});
this.flashMessage.deleteMessage(id);
```
### Set Strategy
---
You can update default strategy using setStrategy method.
```javascript
/* Will return {Boolean} as result */
this.flashMessage.setStrategy('multiple'); // strategy changed to multiple
```
## LICENSE
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
+3
View File
@@ -0,0 +1,3 @@
module.exports = {
presets: ['@vue/app']
};
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+34
View File
@@ -0,0 +1,34 @@
module.exports = {
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest'
},
transformIgnorePatterns: ['/node_modules/'],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: ['jest-serializer-vue'],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname'
],
collectCoverage: true,
collectCoverageFrom: [
'**/src/components/**',
'!**/src/components/index.js',
'!**/App.{vue}',
'!**/wrapper.js',
'!**/node_modules/**',
'!<rootDir>/dist/**',
'!<rootDir>/src/plugins/**',
'!<rootDir>/tests/unit/**'
],
coverageReporters: ['lcov', 'text-summary']
};
File diff suppressed because it is too large Load Diff
+106
View File
@@ -0,0 +1,106 @@
{
"_from": "@smartweb/vue-flash-message",
"_id": "@smartweb/vue-flash-message@0.5.0",
"_inBundle": false,
"_integrity": "sha512-LO9HT614ON2ejenBjE2DNyOBYUOfdcrg+7Gw5gIHv89o3tZu+PHipjO5J5k4VK9YV6xhyFxKRW/Mc5CUsu8GuA==",
"_location": "/@smartweb/vue-flash-message",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "@smartweb/vue-flash-message",
"name": "@smartweb/vue-flash-message",
"escapedName": "@smartweb%2fvue-flash-message",
"scope": "@smartweb",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/@smartweb/vue-flash-message/-/vue-flash-message-0.5.0.tgz",
"_shasum": "e672e7eb2f41f166cba9a4391f123b47f147d8a3",
"_spec": "@smartweb/vue-flash-message",
"_where": "/home/george/citwa/red_de_investigacion_front/first",
"author": {
"name": "Roman Privalov",
"email": "roman.privalov@gmail.com",
"url": "https://t.me/RomanPrivalov"
},
"browserslist": [
"> 2%",
"last 2 versions",
"ie 11"
],
"bugs": {
"url": "https://github.com/smwbtech/vue-flash-message/issues"
},
"bundleDependencies": false,
"dependencies": {},
"deprecated": false,
"description": "Vue flash message component",
"devDependencies": {
"@smartweb/vue-number-input": "^1.0.6",
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-plugin-unit-jest": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"@vue/eslint-config-prettier": "^5.0.0",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^23.6.0",
"coveralls": "^3.0.6",
"cross-env": "^5.2.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^6.1.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.2.3",
"postcss-preset-env": "^6.7.0",
"terser-webpack-plugin": "^1.4.1",
"vue": "^2.6.10",
"vue-highlightjs": "^1.3.3",
"vue-template-compiler": "^2.6.10",
"vuescroll": "^4.14.4",
"vuex": "^3.1.1"
},
"files": [
"build/*",
"*.json",
"*.js"
],
"homepage": "https://smwbtech.github.io/vue-flash-message/",
"keywords": [
"vue",
"vuejs",
"flash message",
"flash",
"vue message",
"vue flash",
"vue flash message",
"vue notify",
"vue notifications",
"nuxt notify",
"nuxt notifications",
"nuxt message",
"nuxt flash",
"nuxt flash message"
],
"license": "MIT",
"main": "./build/vue-flash-msg.common.js",
"name": "@smartweb/vue-flash-message",
"repository": {
"type": "git",
"url": "git+https://github.com/smwbtech/vue-flash-message.git"
},
"scripts": {
"build": "vue-cli-service build",
"lib": "cross-env NODE_ENV=production vue-cli-service build --mode production -g envify --target lib --name vue-flash-msg ./src/components/index.js --dest ./build",
"lint": "vue-cli-service lint",
"serve": "vue-cli-service serve",
"test:unit": "vue-cli-service test:unit --verbose"
},
"version": "0.5.0"
}
+15
View File
@@ -0,0 +1,15 @@
module.exports = {
plugins: {
autoprefixer: {},
'postcss-preset-env': {
stage: 2,
features: {
'nesting-rules': true,
'custom-properties': {
preserve: false,
importFrom: './src/assets/css/variables.css'
}
}
}
}
};
+13
View File
@@ -0,0 +1,13 @@
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
css: {
extract: false
},
configureWebpack: {
mode: 'production',
plugins: [new TerserPlugin()]
},
publicPath:
process.env.NODE_ENV === 'production' ? '/vue-flash-message/' : '/'
};