buefy 0.7.9 → 0.8.2

package/dist/esm/toast.js

@@ -0,0 +1,83 @@
+import './chunk-e5fce48f.js';
+import { c as config } from './chunk-9e3207cc.js';
+import { _ as __vue_normalize__, a as registerComponentProgrammatic, u as use } from './chunk-cca88db8.js';
+import Vue from 'vue';
+import { N as NoticeMixin } from './chunk-daeac852.js';
+
+//
+var script = {
+  name: 'BToast',
+  mixins: [NoticeMixin],
+  data: function data() {
+    return {
+      newDuration: this.duration || config.defaultToastDuration
+    };
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"enter-active-class":_vm.transition.enter,"leave-active-class":_vm.transition.leave}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isActive),expression:"isActive"}],staticClass:"toast",class:[_vm.type, _vm.position],attrs:{"aria-hidden":!_vm.isActive,"role":"alert"}},[_c('div',{domProps:{"innerHTML":_vm._s(_vm.message)}})])])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+
+  
+  var Toast = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    undefined,
+    undefined
+  );
+
+var ToastProgrammatic = {
+  open: function open(params) {
+    var message;
+    var parent;
+    if (typeof params === 'string') message = params;
+    var defaultParam = {
+      message: message,
+      position: config.defaultToastPosition || 'is-top'
+    };
+
+    if (params.parent) {
+      parent = params.parent;
+      delete params.parent;
+    }
+
+    var propsData = Object.assign(defaultParam, params);
+    var vm = typeof window !== 'undefined' && window.Vue ? window.Vue : Vue;
+    var ToastComponent = vm.extend(Toast);
+    return new ToastComponent({
+      parent: parent,
+      el: document.createElement('div'),
+      propsData: propsData
+    });
+  }
+};
+var Plugin = {
+  install: function install(Vue) {
+    registerComponentProgrammatic(Vue, 'toast', ToastProgrammatic);
+  }
+};
+use(Plugin);
+
+export default Plugin;
+export { ToastProgrammatic };

package/dist/esm/tooltip.js

@@ -0,0 +1,13 @@
+import './chunk-9e3207cc.js';
+import { r as registerComponent, u as use } from './chunk-cca88db8.js';
+import { T as Tooltip } from './chunk-411d6eea.js';
+export { T as Tooltip } from './chunk-411d6eea.js';
+
+var Plugin = {
+  install: function install(Vue) {
+    registerComponent(Vue, Tooltip);
+  }
+};
+use(Plugin);
+
+export default Plugin;

package/dist/esm/upload.js

@@ -0,0 +1,206 @@
+import './chunk-9e3207cc.js';
+import { F as FormElementMixin } from './chunk-10c85529.js';
+import { _ as __vue_normalize__, r as registerComponent, u as use } from './chunk-cca88db8.js';
+import { F as File } from './chunk-b9bdb0e4.js';
+
+//
+var script = {
+  name: 'BUpload',
+  mixins: [FormElementMixin],
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [Object, Function, File, Array]
+    },
+    multiple: Boolean,
+    disabled: Boolean,
+    accept: String,
+    dragDrop: Boolean,
+    type: {
+      type: String,
+      default: 'is-primary'
+    },
+    native: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      newValue: this.value,
+      dragDropFocus: false,
+      _elementRef: 'input'
+    };
+  },
+  watch: {
+    /**
+     *   When v-model is changed:
+     *   1. Get value from input file
+     *   2. Set internal value.
+     *   3. Reset input value if array is empty or when input file is not found in newValue
+     *   4. If it's invalid, validate again.
+     */
+    value: function value(_value) {
+      var inputFiles = this.$refs.input.files;
+      this.newValue = _value;
+
+      if (!this.newValue || Array.isArray(this.newValue) && this.newValue.length === 0 || !inputFiles[0] || Array.isArray(this.newValue) && !this.newValue.some(function (a) {
+        return a.name === inputFiles[0].name;
+      })) {
+        this.$refs.input.value = null;
+      }
+
+      !this.isValid && !this.dragDrop && this.checkHtml5Validity();
+    }
+  },
+  methods: {
+    /**
+    * Listen change event on input type 'file',
+    * emit 'input' event and validate
+    */
+    onFileChange: function onFileChange(event) {
+      if (this.disabled || this.loading) return;
+
+      if (this.dragDrop) {
+        this.updateDragDropFocus(false);
+      }
+
+      var value = event.target.files || event.dataTransfer.files;
+
+      if (value.length === 0) {
+        if (!this.newValue) {
+          return;
+        }
+
+        if (this.native) {
+          this.newValue = null;
+        }
+      } else if (!this.multiple) {
+        // only one element in case drag drop mode and isn't multiple
+        if (this.dragDrop && value.length !== 1) return;else {
+          var file = value[0];
+
+          if (this.checkType(file)) {
+            this.newValue = file;
+          } else if (this.newValue) {
+            this.newValue = null;
+          } else {
+            return;
+          }
+        }
+      } else {
+        // always new values if native or undefined local
+        var newValues = false;
+
+        if (this.native || !this.newValue) {
+          this.newValue = [];
+          newValues = true;
+        }
+
+        for (var i = 0; i < value.length; i++) {
+          var _file = value[i];
+
+          if (this.checkType(_file)) {
+            this.newValue.push(_file);
+            newValues = true;
+          }
+        }
+
+        if (!newValues) {
+          return;
+        }
+      }
+
+      this.$emit('input', this.newValue);
+      !this.dragDrop && this.checkHtml5Validity();
+    },
+
+    /**
+    * Listen drag-drop to update internal variable
+    */
+    updateDragDropFocus: function updateDragDropFocus(focus) {
+      if (!this.disabled && !this.loading) {
+        this.dragDropFocus = focus;
+      }
+    },
+
+    /**
+    * Check mime type of file
+    */
+    checkType: function checkType(file) {
+      if (!this.accept) return true;
+      var types = this.accept.split(',');
+      if (types.length === 0) return true;
+      var valid = false;
+
+      for (var i = 0; i < types.length && !valid; i++) {
+        var type = types[i].trim();
+
+        if (type) {
+          if (type.substring(0, 1) === '.') {
+            // check extension
+            var extIndex = file.name.lastIndexOf('.');
+            var extension = extIndex >= 0 ? file.name.substring(extIndex) : '';
+
+            if (extension.toLowerCase() === type.toLowerCase()) {
+              valid = true;
+            }
+          } else {
+            // check mime type
+            if (file.type.match(type)) {
+              valid = true;
+            }
+          }
+        }
+      }
+
+      return valid;
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',{staticClass:"upload control"},[(!_vm.dragDrop)?[_vm._t("default")]:_c('div',{staticClass:"upload-draggable",class:[_vm.type, {
+            'is-loading': _vm.loading,
+            'is-disabled': _vm.disabled,
+            'is-hovered': _vm.dragDropFocus
+        }],on:{"dragover":function($event){$event.preventDefault();_vm.updateDragDropFocus(true);},"dragleave":function($event){$event.preventDefault();_vm.updateDragDropFocus(false);},"dragenter":function($event){$event.preventDefault();_vm.updateDragDropFocus(true);},"drop":function($event){$event.preventDefault();_vm.onFileChange($event);}}},[_vm._t("default")],2),_vm._v(" "),_c('input',_vm._b({ref:"input",attrs:{"type":"file","multiple":_vm.multiple,"accept":_vm.accept,"disabled":_vm.disabled},on:{"change":_vm.onFileChange}},'input',_vm.$attrs,false))],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+
+  
+  var Upload = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    undefined,
+    undefined
+  );
+
+var Plugin = {
+  install: function install(Vue) {
+    registerComponent(Vue, Upload);
+  }
+};
+use(Plugin);
+
+export default Plugin;
+export { Upload };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buefy",
-  "version": "0.7.9",
+  "version": "0.8.2",
   "homepage": "https://buefy.org",
   "description": "Lightweight UI components for Vue.js based on Bulma",
   "author": "Rafael Beraldo <rafael.pimpa@gmail.com>",
@@ -8,9 +8,14 @@
     "Walter Tommasi <tommsi20@gmail.com>"
   ],
   "license": "MIT",
-  "main": "dist/buefy.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "unpkg": "dist/buefy.min.js",
   "typings": "types/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
   "files": [
     "dist",
     "src",
@@ -32,7 +37,12 @@
     "unit": "jest",
     "test": "npm run lint && npm run unit",
     "test:watch": "npm run unit -- --watchAll",
-    "build:lib": "node build/build-lib.js",
+    "build:js": "rollup -c && rollup -c --environment MINIFY",
+    "build:js:watch": "rollup -c --watch",
+    "build:scss": "node-sass --output-style expanded src/scss/buefy-build.scss | node ./build/banner.js > dist/buefy.css && cleancss -o dist/buefy.min.css dist/buefy.css",
+    "build:scss:watch": "node-sass src/scss/buefy-build.scss --w",
+    "build:lib": "npm run build:js && npm run build:scss",
+    "build:lib:watch": "concurrently \"npm run build:js:watch\" \"npm run build:scss:watch \" ",
     "build:docs": "node build/build.js",
     "build": "npm run build:lib && npm run build:docs",
     "cov": "./node_modules/codcov/bin/codcov"
@@ -51,11 +61,14 @@
     "vue": "^2.5.13"
   },
   "devDependencies": {
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.3.4",
     "@fortawesome/fontawesome-free": "5.3.1",
     "@mdi/font": "2.7.94",
     "@vue/test-utils": "^1.0.0-beta.25",
     "autoprefixer": "7.1.1",
-    "axios": "0.16.2",
+    "axios": "0.18.1",
     "babel-core": "6.25.0",
     "babel-eslint": "7.1.1",
     "babel-jest": "22.1.0",
@@ -65,6 +78,7 @@
     "babel-preset-stage-2": "6.22.0",
     "babel-register": "6.22.0",
     "chalk": "1.1.3",
+    "clean-css-cli": "4.3.0",
     "cleave.js": "1.0.1",
     "clipboard": "1.7.1",
     "codecov": "3.0.0",
@@ -96,6 +110,14 @@
     "prerender-spa-plugin": "3.2.1",
     "raw-loader": "0.5.1",
     "rimraf": "2.6.0",
+    "rollup": "1.17.0",
+    "rollup-copy-plugin": "0.1.0",
+    "rollup-plugin-babel": "4.3.2",
+    "rollup-plugin-commonjs": "9.2.1",
+    "rollup-plugin-node-resolve": "4.0.1",
+    "rollup-plugin-replace": "2.1.0",
+    "rollup-plugin-terser": "4.0.4",
+    "rollup-plugin-vue": "5.0.0",
     "sass-loader": "6.0.6",
     "scrollreveal": "3.3.6",
     "semver": "5.3.0",

package/src/components/checkbox/Checkbox.vue

@@ -4,11 +4,13 @@
         :class="[size, { 'is-disabled': disabled }]"
         ref="label"
         :disabled="disabled"
+        @click="focus"
         @keydown.prevent.enter="$refs.label.click()">
         <input
             v-model="computedValue"
             :indeterminate.prop="indeterminate"
             type="checkbox"
+            ref="input"
             @click.stop
             :disabled="disabled"
             :required="required"
@@ -25,8 +27,8 @@
 export default {
     name: 'BCheckbox',
     props: {
-        value: [String, Number, Boolean, Function, Object, Array, Symbol],
-        nativeValue: [String, Number, Boolean, Function, Object, Array, Symbol],
+        value: [String, Number, Boolean, Function, Object, Array],
+        nativeValue: [String, Number, Boolean, Function, Object, Array],
         indeterminate: Boolean,
         type: String,
         disabled: Boolean,
@@ -34,11 +36,11 @@ export default {
         name: String,
         size: String,
         trueValue: {
-            type: [String, Number, Boolean, Function, Object, Array, Symbol],
+            type: [String, Number, Boolean, Function, Object, Array],
             default: true
         },
         falseValue: {
-            type: [String, Number, Boolean, Function, Object, Array, Symbol],
+            type: [String, Number, Boolean, Function, Object, Array],
             default: false
         }
     },
@@ -65,6 +67,12 @@ export default {
         value(value) {
             this.newValue = value
         }
+    },
+    methods: {
+        focus() {
+            // MacOS FireFox and Safari do not focus when clicked
+            this.$refs.input.focus()
+        }
     }
 }
 </script>

package/src/components/checkbox/CheckboxButton.vue

@@ -8,11 +8,13 @@
                 'is-focused': isFocused
             }]"
             :disabled="disabled"
+            @click="focus"
             @keydown.prevent.enter="$refs.label.click()">
             <slot/>
             <input
                 v-model="computedValue"
                 type="checkbox"
+                ref="input"
                 @click.stop
                 :disabled="disabled"
                 :required="required"
@@ -28,8 +30,8 @@
 export default {
     name: 'BCheckboxButton',
     props: {
-        value: [String, Number, Boolean, Function, Object, Array, Symbol],
-        nativeValue: [String, Number, Boolean, Function, Object, Array, Symbol],
+        value: [String, Number, Boolean, Function, Object, Array],
+        nativeValue: [String, Number, Boolean, Function, Object, Array],
         disabled: Boolean,
         required: Boolean,
         name: String,
@@ -69,6 +71,12 @@ export default {
         value(value) {
             this.newValue = value
         }
+    },
+    methods: {
+        focus() {
+            // MacOS FireFox and Safari do not focus when clicked
+            this.$refs.input.focus()
+        }
     }
 }
 </script>

package/src/components/clockpicker/Clockpicker.vue

@@ -203,11 +203,6 @@ export default {
                 ? (!this.isHourFormat24 && this.meridienSelected === this.AM ? 11 : 23)
                 : 59
         },
-        faceFormatter() {
-            return this.isSelectingHour && !this.isHourFormat24
-                ? (val) => val
-                : this.formatNumber
-        },
         faceSize() {
             return this.pickerSize - (outerPadding * 2)
         },

package/src/components/datepicker/Datepicker.spec.js

@@ -90,4 +90,64 @@ describe('BDatepicker', () => {
         window.document.dispatchEvent(keyupEvent)
         wrapper.vm.$nextTick(() => expect($dropdown.isVisible()).toBeFalsy())
     })
+
+    describe('#dateFormatter', () => {
+        it('should add one to month since month in dates starts from 0', () => {
+            const dateToFormat = new Date(2019, 3, 1)
+            const formattedDate = wrapper.vm.dateFormatter(dateToFormat, wrapper.vm)
+            expect(formattedDate).toEqual('2019-4-1')
+        })
+
+        it('should format based on 2-digit numeric locale date with type === month', () => {
+            wrapper.setProps({
+                type: 'month'
+            })
+            const dateToFormat = new Date(2019, 3, 1)
+            const formattedDate = wrapper.vm.dateFormatter(dateToFormat, wrapper.vm)
+            expect(formattedDate).toEqual('2019-04')
+        })
+
+        it('should format a range of dates passed via array', () => {
+            const dateToFormat = [
+                new Date(2019, 3, 1),
+                new Date(2019, 3, 3)
+            ]
+            const formattedDate = wrapper.vm.dateFormatter(dateToFormat, wrapper.vm)
+            expect(formattedDate).toEqual('2019-4-1 - 2019-4-3')
+        })
+    })
+
+    describe('#formatValue', () => {
+        it('should call dateFormatter, passing the date', () => {
+            const mockDateFormatter = jest.fn()
+            wrapper.setProps({
+                dateFormatter: mockDateFormatter
+            })
+            const date = new Date()
+            wrapper.vm.formatValue(date)
+            expect(mockDateFormatter.mock.calls[0][0]).toEqual(date)
+        })
+
+        it('should not call dateFormatter when value is undefined or NaN', () => {
+            const mockDateFormatter = jest.fn()
+            wrapper.setProps({
+                dateFormatter: mockDateFormatter
+            })
+            wrapper.vm.formatValue(undefined)
+            expect(mockDateFormatter.mock.calls.length).toEqual(0)
+            wrapper.vm.formatValue('buefy')
+            expect(mockDateFormatter.mock.calls.length).toEqual(0)
+        })
+
+        it('should not call dateFormatter when value is an array with undefined or NaN elements', () => {
+            const mockDateFormatter = jest.fn()
+            wrapper.setProps({
+                dateFormatter: mockDateFormatter
+            })
+            wrapper.vm.formatValue([new Date(), undefined])
+            expect(mockDateFormatter.mock.calls.length).toEqual(0)
+            wrapper.vm.formatValue([new Date(), 'buefy'])
+            expect(mockDateFormatter.mock.calls.length).toEqual(0)
+        })
+    })
 })