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>