modify some bug

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": ["es2015"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+npm-debug.log

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 NightCatSama.
+
+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.

README.md

@@ -1,7 +1,7 @@
 # vue-slider-component
 Can use the slider in vue1.x and  vue2.x
 
-[demo](https://nightcatsama.github.io/vue-slider-component/example/)
+[Live Demo](https://nightcatsama.github.io/vue-slider-component/example/)
 
 ## Install
 ```
@@ -110,9 +110,9 @@ new Vue({
 | class-name  | String        | null     | the custom class |
 | styles      | Object        | null     | the custom styles |
 | direction   | String        | horizontal | set the direction of the component, optional value: ['horizontal', 'vertical'] |
-| eventType   | String        | 'auto'   | the event type, optional value: ['auto', 'touch', 'mouse', 'none'] |
-| width       | Number[,String(in horizontal)]  | 150      | width of the component |
-| height      | Number[,String(in vertical)]        | 4        | height of the component |
+| eventType   | String        | auto   | the event type, optional value: ['auto', 'touch', 'mouse', 'none'] |
+| width       | Number[,String(in horizontal)] | 150      | width of the component |
+| height      | Number[,String(in vertical)] | 4        | height of the component |
 | dotSize     | Number        | 15       | size of the sliders |
 | min         | Number        | 0        | the minimum value   |
 | max         | Number        | 100      | the maximum value   |
@@ -122,7 +122,7 @@ new Vue({
 | disabled    | Boolean       | false    | whether to disable components |
 | piecewise   | Boolean       | false    | display of the piecewise |
 | tooltip     | String,Boolean| false    | control the tooltip, optional value: ['hover', 'always', false] |
-| tooltipDir  | String        | top or left | set the direction of the tooltip, optional value: ['top', 'bottom', 'left', 'right'] |
+| tooltipDir  | String        | top(in horizontal)or left(in vertical) | set the direction of the tooltip, optional value: ['top', 'bottom', 'left', 'right'] |
 | val         | Number,Array  | 0        | initial value (if the value for the array open range model) |
 | data        | Array         | null     | the custom data |
 

example/src/App.vue

@@ -273,7 +273,6 @@ export default {
 		callback(name, val) {
 			let obj = this.demo[name]
 			obj.val = val
-			console.log(`喵喵喵 => ${val}`)
 		},
 		/* ------------------------------- */
 		setDisabled(name) {

example/src/index.js

@@ -1,2 +1,4 @@
-import vue2Slider from './vue2-slider.vue'
-export default vue2Slider
+import vueSlider from './vue2-slider';
+
+export default vueSlider
+

example/src/vue-slider.vue

@@ -1,7 +1,7 @@
 <template>
 	<span>
 		<template v-if="isMoblie">
-			<div v-el:wrap :class="['vue-slider-wrap', flowDirection, className, { 'vue-slider-disabled': (isDisabled && this.eventType !== 'none') }]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
+			<div v-el:wrap :class="['vue-slider-wrap', flowDirection, className, disabledClass]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
 				<div v-el:elem class="vue-slider" :style="elemStyles">
 					<template v-if="isRange">
 						<div v-el:dot0 :data-rangeValue="value[0]" :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, 'vue-slider-dot']" :style="dotStyles" @touchstart="moveStart(0)"></div>
@@ -23,7 +23,7 @@
 			</div>
 		</template>
 		<template v-else>
-			<div v-el:wrap :class="['vue-slider-wrap', flowDirection, className, { 'vue-slider-disabled': (isDisabled && this.eventType !== 'none') }]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
+			<div v-el:wrap :class="['vue-slider-wrap', flowDirection, className, disabledClass]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
 				<div v-el:elem class="vue-slider" :style="elemStyles">
 					<template v-if="isRange">
 						<div v-el:dot0 :data-rangeValue="value[0]" :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, 'vue-slider-dot']" :style="dotStyles" @mousedown="moveStart(0)"></div>
@@ -152,6 +152,9 @@ export default {
 		isDisabled: function() {
 			return this.eventType === 'none' ? true : this.disabled
 		},
+		disabledClass: function() {
+			return this.disabled ? 'vue-slider-disabled' : ''
+		},
 		isRange: function() {
 			return Array.isArray(this.val)
 		},

example/src/vue2-slider.vue

@@ -1,7 +1,7 @@
 <template>
 	<span>
 		<template v-if="isMoblie">
-			<div ref="wrap" :class="['vue-slider-wrap', flowDirection, className, { 'vue-slider-disabled': (isDisabled && this.eventType !== 'none') }]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
+			<div ref="wrap" :class="['vue-slider-wrap', flowDirection, className, disabledClass]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
 				<div ref="elem" class="vue-slider" :style="elemStyles">
 					<template v-if="isRange">
 						<div ref="dot0" :data-rangeValue="value[0]" :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, 'vue-slider-dot']" :style="dotStyles" @touchstart="moveStart(0)"></div>
@@ -23,7 +23,7 @@
 			</div>
 		</template>
 		<template v-else>
-			<div ref="wrap" :class="['vue-slider-wrap', flowDirection, className, { 'vue-slider-disabled': (isDisabled && this.eventType !== 'none') }]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
+			<div ref="wrap" :class="['vue-slider-wrap', flowDirection, className, disabledClass]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
 				<div ref="elem" class="vue-slider" :style="elemStyles">
 					<template v-if="isRange">
 						<div ref="dot0" :data-rangeValue="value[0]" :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, 'vue-slider-dot']" :style="dotStyles" @mousedown="moveStart(0)"></div>
@@ -46,6 +46,7 @@
 		</template>
 	</span>
 </template>
+
 <script>
 export default {
 	data() {
@@ -152,6 +153,9 @@ export default {
 		isDisabled: function() {
 			return this.eventType === 'none' ? true : this.disabled
 		},
+		disabledClass: function() {
+			return this.disabled ? 'vue-slider-disabled' : ''
+		},
 		isRange: function() {
 			return Array.isArray(this.val)
 		},

example/webpack.config.js

@@ -8,6 +8,9 @@ module.exports = {
     publicPath: '/dist/',
     filename: 'build.js'
   },
+  resolve: {
+    extensions: [ '', '.js', '.vue' ]
+  },
   resolveLoader: {
     root: path.join(__dirname, 'node_modules'),
   },

package.json

@@ -1,18 +1,41 @@
 {
   "name": "vue-slider-component",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "Can use the Slider component in vue1.x and vue2.x",
-  "main": "index.js",
-  "scripts": {
-  },
+  "keywords": [
+    "vue",
+    "vue-component",
+    "vue-slider-component"
+  ],
+  "main": "./dist/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NightCatSama/vue-slider-component.git"
   },
   "author": "NightCatSama <642163903@qq.com>",
-  "license": "ISC",
+  "licenses": "MIT",
   "bugs": {
     "url": "https://github.com/NightCatSama/vue-slider-component/issues"
   },
-  "homepage": "https://github.com/NightCatSama/vue-slider-component#readme"
+  "homepage": "https://github.com/NightCatSama/vue-slider-component#readme",
+  "scripts": {
+    "build": "rm -rf ./dist && webpack --config ./webpack.config.js"
+  },
+  "devDependencies": {
+    "babel-core": "^6.10.4",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-runtime": "^6.9.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-stage-2": "^6.11.0",
+    "babel-runtime": "^6.9.2",
+    "css-loader": "^0.23.1",
+    "style-loader": "^0.13.1",
+    "vue-html-loader": "^1.2.3",
+    "vue-loader": "^8.5.3",
+    "vue-style-loader": "^1.0.0",
+    "webpack": "^1.13.1"
+  },
+  "dependencies": {
+    "vue": "^1.0.26"
+  }
 }

src/index.js

@@ -0,0 +1,4 @@
+import vueSlider from './vue2-slider';
+
+export default vueSlider
+

vue-slider.vue → src/vue-slider.vue

@@ -1,7 +1,7 @@
 <template>
 	<span>
 		<template v-if="isMoblie">
-			<div v-el:wrap :class="['vue-slider-wrap', flowDirection, className, { 'vue-slider-disabled': (isDisabled && this.eventType !== 'none') }]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
+			<div v-el:wrap :class="['vue-slider-wrap', flowDirection, className, disabledClass]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
 				<div v-el:elem class="vue-slider" :style="elemStyles">
 					<template v-if="isRange">
 						<div v-el:dot0 :data-rangeValue="value[0]" :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, 'vue-slider-dot']" :style="dotStyles" @touchstart="moveStart(0)"></div>
@@ -23,7 +23,7 @@
 			</div>
 		</template>
 		<template v-else>
-			<div v-el:wrap :class="['vue-slider-wrap', flowDirection, className, { 'vue-slider-disabled': (isDisabled && this.eventType !== 'none') }]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
+			<div v-el:wrap :class="['vue-slider-wrap', flowDirection, className, disabledClass]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
 				<div v-el:elem class="vue-slider" :style="elemStyles">
 					<template v-if="isRange">
 						<div v-el:dot0 :data-rangeValue="value[0]" :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, 'vue-slider-dot']" :style="dotStyles" @mousedown="moveStart(0)"></div>
@@ -152,6 +152,9 @@ export default {
 		isDisabled: function() {
 			return this.eventType === 'none' ? true : this.disabled
 		},
+		disabledClass: function() {
+			return this.disabled ? 'vue-slider-disabled' : ''
+		},
 		isRange: function() {
 			return Array.isArray(this.val)
 		},

vue2-slider.vue → src/vue2-slider.vue

@@ -1,7 +1,7 @@
 <template>
 	<span>
 		<template v-if="isMoblie">
-			<div ref="wrap" :class="['vue-slider-wrap', flowDirection, className, { 'vue-slider-disabled': (isDisabled && this.eventType !== 'none') }]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
+			<div ref="wrap" :class="['vue-slider-wrap', flowDirection, className, disabledClass]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
 				<div ref="elem" class="vue-slider" :style="elemStyles">
 					<template v-if="isRange">
 						<div ref="dot0" :data-rangeValue="value[0]" :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, 'vue-slider-dot']" :style="dotStyles" @touchstart="moveStart(0)"></div>
@@ -23,7 +23,7 @@
 			</div>
 		</template>
 		<template v-else>
-			<div ref="wrap" :class="['vue-slider-wrap', flowDirection, className, { 'vue-slider-disabled': (isDisabled && this.eventType !== 'none') }]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
+			<div ref="wrap" :class="['vue-slider-wrap', flowDirection, className, disabledClass]" v-show="show" :style="[( styles || {} ), wrapStyles]" @click="wrapClick">
 				<div ref="elem" class="vue-slider" :style="elemStyles">
 					<template v-if="isRange">
 						<div ref="dot0" :data-rangeValue="value[0]" :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, 'vue-slider-dot']" :style="dotStyles" @mousedown="moveStart(0)"></div>
@@ -46,6 +46,7 @@
 		</template>
 	</span>
 </template>
+
 <script>
 export default {
 	data() {
@@ -152,6 +153,9 @@ export default {
 		isDisabled: function() {
 			return this.eventType === 'none' ? true : this.disabled
 		},
+		disabledClass: function() {
+			return this.disabled ? 'vue-slider-disabled' : ''
+		},
 		isRange: function() {
 			return Array.isArray(this.val)
 		},

webpack.config.js

@@ -0,0 +1,43 @@
+const webpack = require('webpack')
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: './dist/',
+    filename: 'index.js',
+    library: 'vue-slider-component',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  resolve: {
+    extensions: [ '', '.js', '.vue' ]
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        include: __dirname,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.css$/,
+        loader: 'style!css'
+      }
+    ]
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin( {
+      minimize : true,
+      sourceMap : false,
+      mangle: true,
+      compress: {
+        warnings: false
+      }
+    } )
+  ]
+}