vue-bootstrap-datetimepicker - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

 # Changelog
 
-## 2.0.0 (breaking)
+## [2.1.0](https://github.com/ankurk91/vue-bootstrap-datetimepicker/compare/1.2.0...2.1.0) 
+* Expose `install` method, so that now you can use this package as a [plugin](https://vuejs.org/v2/guide/plugins.html)
+
+## [2.0.0](https://github.com/ankurk91/vue-bootstrap-datetimepicker/compare/1.2.0...2.0.0) (breaking)
 - Rename `input-name` prop to `name`
@@ -5,0 +8,0 @@

dist/vue-bootstrap-datetimepicker.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("eonasdan-bootstrap-datetimepicker"),require("jquery"),require("moment")):"function"==typeof define&&define.amd?define(["eonasdan-bootstrap-datetimepicker","jquery","moment"],t):"object"==typeof exports?exports.VueBootstrapDatetimePicker=t(require("eonasdan-bootstrap-datetimepicker"),require("jquery"),require("moment")):e.VueBootstrapDatetimePicker=t(e["eonasdan-bootstrap-datetimepicker"],e.jquery,e.moment)}(this,function(e,t,n){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,n){var r=n(3)(n(1),n(4),null,null,null);e.exports=r.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(6),o=n.n(r),i=n(7),a=n.n(i),u=n(5);n.n(u);t.default={props:{value:{default:null,required:!0,validator:function(e){return null===e||e instanceof Date||"string"==typeof e||e instanceof String||e instanceof a.a}},config:{type:Object,default:function(){return{}}},placeholder:{type:String,default:""},inputClass:{type:[String,Object],default:""},name:{type:String,default:"datetime"},required:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},wrap:{type:Boolean,default:!1}},data:function(){return{dp:null}},mounted:function(){if(!this.dp){var e=this.wrap?this.$el.parentNode:this.$el,t=o()(e);t.datetimepicker(this.config),this.dp=t.data("DateTimePicker"),this.dp.date(this.value),t.on("dp.change",this.onChange)}},beforeDestroy:function(){this.dp&&this.dp.destroy()},watch:{value:function(e){this.dp&&this.dp.date(e)},config:function(e){this.dp&&this.dp.options(Object.assign(this.dp.options(),e))}},methods:{onChange:function(e){this.$emit("input",e.date)}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=n.n(r);n.d(t,"component",function(){return o.a}),t.default=o.a},function(e,t){e.exports=function(e,t,n,r,o){var i,a=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(i=e,a=e.default);var s="function"==typeof a?a.options:a;t&&(s.render=t.render,s.staticRenderFns=t.staticRenderFns),r&&(s._scopeId=r);var d;if(o?(d=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},s._ssrRegister=d):n&&(d=n),d){var p=s.functional,c=p?s.render:s.beforeCreate;p?s.render=function(e,t){return d.call(t),c(e,t)}:s.beforeCreate=c?[].concat(c,d):[d]}return{esModule:i,exports:a,options:s}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("input",{staticClass:"form-control input",class:e.inputClass,attrs:{type:"text",name:e.name,placeholder:e.placeholder,required:e.required,readOnly:e.readOnly,disabled:e.disabled}})},staticRenderFns:[]}},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css"),require("eonasdan-bootstrap-datetimepicker"),require("jquery"),require("moment")):"function"==typeof define&&define.amd?define(["eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css","eonasdan-bootstrap-datetimepicker","jquery","moment"],t):"object"==typeof exports?exports.VueBootstrapDatetimePicker=t(require("eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css"),require("eonasdan-bootstrap-datetimepicker"),require("jquery"),require("moment")):e.VueBootstrapDatetimePicker=t(e["eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css"],e["eonasdan-bootstrap-datetimepicker"],e.jquery,e.moment)}(this,function(e,t,n,r){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(e,t,n){var r=n(4)(n(2),n(5),null,null,null);e.exports=r.exports},function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(7),o=n.n(r),i=n(8),a=n.n(i),s=n(6);n.n(s);t.default={props:{value:{default:null,required:!0,validator:function(e){return null===e||e instanceof Date||"string"==typeof e||e instanceof String||e instanceof a.a}},config:{type:Object,default:function(){return{}}},placeholder:{type:String,default:""},inputClass:{type:[String,Object],default:""},name:{type:String,default:"datetime"},required:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},wrap:{type:Boolean,default:!1}},data:function(){return{dp:null}},mounted:function(){if(!this.dp){var e=this.wrap?this.$el.parentNode:this.$el,t=o()(e);t.datetimepicker(this.config),this.dp=t.data("DateTimePicker"),this.dp.date(this.value),t.on("dp.change",this.onChange)}},beforeDestroy:function(){this.dp&&this.dp.destroy()},watch:{value:function(e){this.dp&&this.dp.date(e)},config:function(e){this.dp&&this.dp.options(Object.assign(this.dp.options(),e))}},methods:{onChange:function(e){this.$emit("input",e.date)}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"DatetimePickerPlugin",function(){return i});var r=n(0),o=n.n(r);n.d(t,"component",function(){return o.a});var i={install:function(e,t){e.component("date-picker",o.a),n(1)}};t.default=o.a},function(e,t){e.exports=function(e,t,n,r,o){var i,a=e=e||{},s=typeof e.default;"object"!==s&&"function"!==s||(i=e,a=e.default);var u="function"==typeof a?a.options:a;t&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns),r&&(u._scopeId=r);var d;if(o?(d=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=d):n&&(d=n),d){var c=u.functional,p=c?u.render:u.beforeCreate;c?u.render=function(e,t){return d.call(t),p(e,t)}:u.beforeCreate=p?[].concat(p,d):[d]}return{esModule:i,exports:a,options:u}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("input",{staticClass:"form-control input",class:e.inputClass,attrs:{type:"text",name:e.name,placeholder:e.placeholder,required:e.required,readOnly:e.readOnly,disabled:e.disabled}})},staticRenderFns:[]}},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r}])});

package.json

 {
   "name": "vue-bootstrap-datetimepicker",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Vue.js component for bootstrap-datetimepicker",
@@ -35,3 +35,3 @@ "main": "dist/vue-bootstrap-datetimepicker.min.js",
     "babel-core": "^6.25.0",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.1",
     "babel-preset-env": "^1.5.1",
@@ -42,6 +42,6 @@ "bootstrap": "^3.3.7",
     "file-loader": "^0.11.1",
-    "html-webpack-plugin": "^2.28.0",
+    "html-webpack-plugin": "^2.29.0",
     "jquery": "^3.2.1",
     "style-loader": "^0.18.1",
-    "vee-validate": "^2.0.0-rc.5",
+    "vee-validate": "^2.0.0-rc.6",
     "vue": "^2.3.4",
@@ -51,7 +51,11 @@ "vue-loader": "^12.2.1",
     "webpack": "^2.6.1",
-    "webpack-dev-server": "^2.4.5"
+    "webpack-dev-server": "~2.4.5"
   },
   "peerDependencies": {
     "vue": "^2.0.0"
+  },
+  "engines": {
+    "node": ">= 4.2.0",
+    "npm": ">= 3.0.0"
   }
 }

README.md

 # Vue-Bootstrap-DatetimePicker
 
-> Vue.js v2.x component for [eonasdan-bootstrap-datetimepicker](https://github.com/Eonasdan/bootstrap-datetimepicker/)
-
-[![vue-js](https://img.shields.io/badge/vue.js-2.x-brightgreen.svg?maxAge=604800)](https://github.com/ankurk91/vue-bootstrap-datetimepicker/)
+[![vue-js](https://img.shields.io/badge/vue.js-2.x-brightgreen.svg?maxAge=604800)](https://vuejs.org/)
 [![downloads](https://img.shields.io/npm/dt/vue-bootstrap-datetimepicker.svg)](https://www.npmjs.com/package/vue-bootstrap-datetimepicker)
@@ -11,7 +9,10 @@ [![npm-version](https://img.shields.io/npm/v/vue-bootstrap-datetimepicker.svg)](https://www.npmjs.com/package/vue-bootstrap-datetimepicker)
 
+Vue.js v2.x component for [eonasdan-bootstrap-datetimepicker](https://github.com/Eonasdan/bootstrap-datetimepicker/)
 
 ## Installation
 ```bash
+# npm
 npm install vue-bootstrap-datetimepicker --save
-# OR
+
+# Yarn
 yarn add vue-bootstrap-datetimepicker
@@ -33,5 +34,5 @@ ```
 * jQuery >=1.8.3
-* Moment.js ^2.10
+* [Moment.js](https://momentjs.com/) ^2.10
     
-## Example
+## Usage
 ```html
@@ -49,8 +50,10 @@ <template>
   import 'bootstrap';
+  import 'bootstrap/dist/css/bootstrap.css';
+  
+  // Import this component
   import datePicker from 'vue-bootstrap-datetimepicker';
-  // You have to add CSS yourself
+  
+  // Import date picker css
   import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
-  // Bootstrap css  
-  import 'bootstrap/dist/css/bootstrap.css';
-  
+   
   export default {    
@@ -69,2 +72,26 @@ data () {
 
+#### As plugin
+```js
+  import Vue from 'vue';
+  import {DatetimePickerPlugin} from 'vue-bootstrap-datetimepicker';  
+  Vue.use(DatetimePickerPlugin);
+```
+This will register a global component `<date-picker>` and also import required css file.
+
+## Available props
+The component accepts these props:
+
+| Attribute       | Type               | Default               | Description      |
+| :---            |  :---:             | :---:                 | :---             |
+| v-model / value | String / Date Object / [moment](https://momentjs.com/) / null | `null` | Set or Get date-picker value |
+| config          | Object             | `{}` | Datetime picker configuration [options](http://eonasdan.github.io/bootstrap-datetimepicker/Options/)|
+| placeholder     | String             | `''` | Set placeholder on input |
+| input-class     | String / Object    | `''` | Add CSS class to input  |
+| name            | String             | `datetime` | Set input field name  |
+| required        | Boolean            | `false` | Make input field required |
+| read-only       | Boolean            | `false` | Make input field read-only |
+| disabled        | Boolean            | `false` | Make input field disabled |
+| wrap            | Boolean            | `false` | Set this to true when wrapped in 'input-group' |
+
+
 ## Install in non-module environments (without webpack)
@@ -104,19 +131,3 @@ * Acquire required files
 
-## Props
-The component accepts these props
-
-| Attribute    | Required   | Type               | Description      |
-| :---         |  :---:     | :---:              | :---            |
-| v-model      |  Yes       | String / Date Object / [moment](https://momentjs.com/) / null | Set or Get date-picker value |
-| config       |  No        | Object             | Datetime picker configuration [options](http://eonasdan.github.io/bootstrap-datetimepicker/Options/)|
-| placeholder  |  No        | String             | Set placeholder on input |
-| input-class  |  No        | String / Object    | Add CSS class to input  |
-| name         |  No        | String             | Set input field name  |
-| required     |  No        | Boolean            | Make input field required |
-| read-only    |  No        | Boolean            | Make input field read-only |
-| disabled     |  No        | Boolean            | Make input field disabled |
-| wrap         |  No        | Boolean            | Set this to true when wrapped in 'input-group' |
-
-
-### Run examples on your localhost
+## Run examples on your localhost
 * Clone this repo
@@ -134,7 +145,9 @@ * Make sure you have node-js >=6.10 and npm >=4.6.1
 
-### todo
-* Inline mode
-* Update to webpack v3.0
+## todo
+* Inline mode, who uses it ?
 
-### License
+## Changelog
+Changelog for each release can found [here](CHANGELOG.md)
+
+## License
 [MIT](LICENSE.txt) License

src/index.js

 import component from './DatetimePicker.vue';
 
+const DatetimePickerPlugin = {
+  install: (Vue, options) => {
+    Vue.component('date-picker', component);
+    require('eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css');
+  }
+};
+
 export default component;
-export {component};
+export {component, DatetimePickerPlugin};

New alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Fixed alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15157

increased by8.83%

Lines of code

9

increased by200%

Number of lines in readme file

148

increased by9.63%

Worsened metrics

Number of package files

7

decreased by-12.5%

No dependency changes