feat: rename component to VueAlert

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2
 defaults: &defaults
   working_directory: ~/project/vue-alert
   docker:
-    - image: circleci/node:9
+    - image: circleci/node:8
 
 jobs:
   install:

README.md

@@ -1,11 +1,13 @@
-# @vuejs-pt/vue-alert 
+# @vuejs-pt/vue-alert
 [![CircleCI](https://img.shields.io/circleci/project/github/vuejs-pt/vue-alert.svg)](https://circleci.com/gh/vuejs-pt/vue-alert)
 [![Coverage Status](https://img.shields.io/codecov/c/github/vuejs-pt/vue-alert.svg)](https://codecov.io/github/vuejs-pt/vue-alert?branch=master)
 [![NPM downloads](https://img.shields.io/npm/dm/@vuejs-pt/vue-alert.svg)](https://www.npmjs.com/package/@vuejs-pt/vue-alert)
 [![NPM version](https://img.shields.io/npm/v/@vuejs-pt/vue-alert.svg)](https://www.npmjs.com/package/@vuejs-pt/vue-alert)
 [![Vue 2.x](https://img.shields.io/badge/vue-2.x-green.svg)](https://vuejs.org/)
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/vuejs-pt/vue-alert/master/LICENSE)
 
+> Starting from v2 the Vue component is named `VueAlert` instead of `vue-alert`
+
 # Table of Contents
 * [___Demo___](#demo)
 * [___Requirements___](#requirements)
@@ -18,7 +20,7 @@
 [__Demo__](https://vuejs-pt.github.io/vue-alert/example/dist/)
 
 # Requirements
-- [Vue.js](https://github.com/vuejs/vue) `2.x`  
+- [Vue.js](https://github.com/vuejs/vue) `2.x`
 
 # Installation
 ```bash
@@ -119,9 +121,9 @@ this.$alert.hide()
 
 # Usage
 
-The component `vue-alert` must be included either in the component using the `vue-alert` or a parent of this component, for example if there's a `vue-alert` instance at the root of the app.
+The component `VueAlert` must be included either in the component using the `VueAlert` or a parent of this component, for example if there's a `VueAlert` instance at the root of the app.
 
-It is possible to access the `vue-alert` component using the `$alert` variable on the component instance as shown in the below example.
+It is possible to access the `VueAlert` component using the `$alert` variable on the component instance as shown in the below example.
 
 The default bootstrap style are applied to the alert but this can be overriden by applying a new style to the following classes:
 - alert
@@ -157,8 +159,8 @@ App.vue
 ```html
 <template>
     <div id="app">
-        <vue-alert></vue-alert>
-        <example></example>
+        <VueAlert></VueAlert>
+        <Example></Example>
     </div>
 </template>
 
@@ -207,4 +209,4 @@ export default {
 
 # License
 
-[The MIT License](http://opensource.org/licenses/MIT)
+[The MIT License](http://opensource.org/licenses/MIT)

_config.yml

@@ -1,3 +1,4 @@
 theme: jekyll-theme-dinky
 title: "@vuejs-pt/vue-alert"
-description: Alert bootstrap style for Vue.js
+description: Alert bootstrap style for Vue.js
+google_analytics: UA-133448491-1

_includes/analytics.html

@@ -0,0 +1,8 @@
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  ga('create', '{{ site.google_analytics }}', 'auto');
+  ga('send', 'pageview');
+</script>

config/rollup.config.js

@@ -1,5 +1,6 @@
 import path from 'path'
 import fs from 'fs'
+import commonjs from 'rollup-plugin-commonjs'
 import vue from 'rollup-plugin-vue'
 import buble from 'rollup-plugin-buble'
 import { uglify } from 'rollup-plugin-uglify'
@@ -17,6 +18,7 @@ const config = {
     { format: 'cjs', file: `dist/${name}.common.js`, name }
   ],
   plugins: [
+    commonjs(),
     vue({
       compileTemplate: true,
       css: true

config/webpack.build.config.js

@@ -1,14 +1,13 @@
-var path = require('path')
-var webpack = require('webpack')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.config')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var MiniCssExtractPlugin = require('mini-css-extract-plugin')
-var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const { VueLoaderPlugin } = require('vue-loader')
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.config')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
-var webpackConfig = merge(baseWebpackConfig, {
+const webpackConfig = merge(baseWebpackConfig, {
   mode: 'production',
   devtool: '#source-map',
   output: {
@@ -17,8 +16,6 @@ var webpackConfig = merge(baseWebpackConfig, {
     chunkFilename: 'js/[id].[chunkhash].js'
   },
   plugins: [
-    new VueLoaderPlugin(),
-    // http://vuejs.github.io/vue-loader/en/workflow/production.html
     new webpack.DefinePlugin({
       'process.env': process.env.NODE_ENV
     }),

config/webpack.config.js

@@ -1,7 +1,9 @@
 const path = require('path')
 const webpack = require('webpack')
+const { VueLoaderPlugin } = require('vue-loader')
 
 const webpackConfig = {
+  mode: 'development',
   devtool: 'inline-source-map',
   entry: path.resolve(__dirname, '../example/app.js'),
   output: {
@@ -29,6 +31,7 @@ const webpackConfig = {
     }
   },
   plugins: [
+    new VueLoaderPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
     }),

example/Example.vue

@@ -11,7 +11,9 @@
         :key="button"
         class="btn btn-default"
         @click="show"
-      >{{ button }}</button>
+      >
+        {{ button }}
+      </button>
     </div>
     <div>
       <h2>Alert transition</h2>
@@ -20,24 +22,32 @@
         :key="button"
         class="btn btn-default"
         @click="setTransition"
-      >{{ button }}</button>
+      >
+        {{ button }}
+      </button>
     </div>
     <div>
       <h2>Alert options</h2>
       <button
         class="btn btn-default"
         @click="callHide"
-      >hide</button>
+      >
+        hide
+      </button>
       <button
         class="btn btn-default"
         @click="callSetDefault"
-      >setDefault</button>
+      >
+        setDefault
+      </button>
       <button
         class="btn btn-default"
         @click="callClearDefault"
-      >clearDefault</button>
+      >
+        clearDefault
+      </button>
     </div>
-    <vue-alert />
+    <VueAlert />
   </div>
 </template>
 
@@ -56,7 +66,7 @@ export default {
   },
   methods: {
     show (event) {
-      const type = event.target.innerHTML
+      const type = event.target.innerHTML.trim()
       this.$alert[type]({ message: `Alert type ${type}` })
     },
     setTransition (event) {

example/__tests__/Example.test.js

@@ -33,7 +33,7 @@ describe('Example.vue', () => {
           mocks: {
             $alert
           },
-          stubs: ['vue-alert']
+          stubs: ['VueAlert']
         }).vm
       })
 
@@ -46,10 +46,10 @@ describe('Example.vue', () => {
             mocks: {
               $alert
             },
-            stubs: ['vue-alert']
+            stubs: ['VueAlert']
           }).vm
-          expect(vm.$alert.setDefault).toBeCalledWith({ message: 'Default message' })
-          expect(vm.$alert.success).toBeCalledWith({ message: 'Component mounted!' })
+          expect(vm.$alert.setDefault).toHaveBeenCalledWith({ message: 'Default message' })
+          expect(vm.$alert.success).toHaveBeenCalledWith({ message: 'Component mounted!' })
         })
       })
 
@@ -63,7 +63,7 @@ describe('Example.vue', () => {
               innerHTML: 'success'
             }
           })
-          expect(vm.$alert['success']).toBeCalledWith({ message: 'Alert type success' })
+          expect(vm.$alert['success']).toHaveBeenCalledWith({ message: 'Alert type success' })
         })
       })
 
@@ -77,15 +77,15 @@ describe('Example.vue', () => {
               innerHTML: 'foo'
             }
           })
-          expect(vm.$alert.setDefault).toBeCalledWith({ transition: 'foo', forceRender: false })
+          expect(vm.$alert.setDefault).toHaveBeenCalledWith({ transition: 'foo', forceRender: false })
         })
         it('should trigger this.$alert.setDefault with the transition and forceRender true if received from an HTML event with "fade"', () => {
           vm.setTransition({
             target: {
               innerHTML: 'fade'
             }
           })
-          expect(vm.$alert.setDefault).toBeCalledWith({ transition: 'fade', forceRender: true })
+          expect(vm.$alert.setDefault).toHaveBeenCalledWith({ transition: 'fade', forceRender: true })
         })
       })
 
@@ -95,7 +95,7 @@ describe('Example.vue', () => {
         })
         it('should trigger this.$alert.setDefault with message and type', () => {
           vm.callSetDefault()
-          expect(vm.$alert.setDefault).toBeCalledWith({ message: 'Default message', type: 'info' })
+          expect(vm.$alert.setDefault).toHaveBeenCalledWith({ message: 'Default message', type: 'info' })
         })
       })
 
@@ -105,7 +105,7 @@ describe('Example.vue', () => {
         })
         it('should trigger this.$alert.setDefault', () => {
           vm.callClearDefault()
-          expect(vm.$alert.setDefault).toBeCalled()
+          expect(vm.$alert.setDefault).toHaveBeenCalled()
         })
       })
 
@@ -115,7 +115,7 @@ describe('Example.vue', () => {
         })
         it('should trigger this.$alert.hide', () => {
           vm.callHide()
-          expect(vm.$alert.hide).toBeCalled()
+          expect(vm.$alert.hide).toHaveBeenCalled()
         })
       })
     })

example/dist/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="initial-scale=1,maximum-scale=1,user-scalable=no"><title>@vuejs-pt/vue-alert example</title></head><body><div id=app></div><script type=text/javascript src=js/runtime.48643052511a5e512e2a.js></script><script type=text/javascript src=js/1.85752f206b7caddc4720.js></script><script type=text/javascript src=js/2.2c3003226d60f0864ca6.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="initial-scale=1,maximum-scale=1,user-scalable=no"><title>@vuejs-pt/vue-alert example</title></head><body><div id=app></div><script type=text/javascript src=js/runtime.d4303317b1f15b3bb9ff.js></script><script type=text/javascript src=js/2.b4d0fca28be200d640a4.js></script><script type=text/javascript src=js/0.874cdcac5b82eceaf54b.js></script></body></html>