buefy 1.0.1 → 1.0.2

package/dist/cjs/{Autocomplete-bK5HLaUH.js → Autocomplete-BMmOsPiK.js}

@@ -122,7 +122,9 @@ var _sfc_main = vue.defineComponent({
     },
     isEmpty() {
       if (!this.computedData) return true;
-      return !this.computedData.some((element) => element.items && element.items.length);
+      return !this.computedData.some(
+        (element) => element.items && element.items.length
+      );
     },
     /*
      * White-listed items to not close when clicked.
@@ -130,6 +132,7 @@ var _sfc_main = vue.defineComponent({
      */
     whiteList() {
       var _a;
+      this.computedData;
       const whiteList = [];
       whiteList.push(this.$refs.input.$el.querySelector("input"));
       whiteList.push(this.$refs.dropdown);
@@ -225,13 +228,22 @@ var _sfc_main = vue.defineComponent({
      * When checkInfiniteScroll property changes scroll event should be removed or added
      */
     checkInfiniteScroll(checkInfiniteScroll) {
-      if ((this.$refs.dropdown && this.$refs.dropdown.querySelector(".dropdown-content")) === false) return;
-      const list = this.$refs.dropdown.querySelector(".dropdown-content");
+      if (!this.$refs.dropdown) return;
+      const list = this.$refs.dropdown.querySelector(
+        ".dropdown-content"
+      );
+      if (!list) return;
       if (checkInfiniteScroll === true) {
-        list.addEventListener("scroll", this.checkIfReachedTheEndOfScroll);
+        list.addEventListener(
+          "scroll",
+          this.checkIfReachedTheEndOfScroll
+        );
         return;
       }
-      list.removeEventListener("scroll", this.checkIfReachedTheEndOfScroll);
+      list.removeEventListener(
+        "scroll",
+        this.checkIfReachedTheEndOfScroll
+      );
     },
     /*
      * When updating input's value
@@ -242,11 +254,11 @@ var _sfc_main = vue.defineComponent({
     newValue(value) {
       this.$emit("update:modelValue", value);
       const currentValue = this.getValue(this.selected);
-      if (currentValue && currentValue !== value) {
+      if (currentValue !== void 0 && currentValue !== null && currentValue !== value) {
         this.setSelected(null, false);
       }
-      if (this.hasFocus && (!this.openOnFocus || value)) {
-        this.isActive = !!value;
+      if (this.hasFocus && (!this.openOnFocus || value !== "")) {
+        this.isActive = value !== "" && value !== void 0 && value !== null;
       }
     },
     /*
@@ -257,6 +269,9 @@ var _sfc_main = vue.defineComponent({
     modelValue(value) {
       this.newValue = value;
     },
+    keepFirst(value) {
+      this.ariaAutocomplete = value ? "both" : "list";
+    },
     /*
      * Select first option if "keep-first
      */
@@ -278,6 +293,24 @@ var _sfc_main = vue.defineComponent({
           }
         }
       }
+    },
+    /*
+     * When appendToBody property changes, handle the transition properly
+     */
+    appendToBody(newValue, oldValue) {
+      if (newValue && !oldValue) {
+        if (this.isActive && this.$refs.dropdown && !this.$data._bodyEl) {
+          this.$data._bodyEl = helpers.createAbsoluteElement(
+            this.$refs.dropdown
+          );
+          this.updateAppendToBody();
+        }
+      } else if (!newValue && oldValue) {
+        if (this.$data._bodyEl) {
+          helpers.removeElement(this.$data._bodyEl);
+          this.$data._bodyEl = void 0;
+        }
+      }
     }
   },
   methods: {
@@ -300,10 +333,7 @@ var _sfc_main = vue.defineComponent({
       this.$emit("select", this.selected, event);
       if (this.selected !== null) {
         if (this.clearOnSelect) {
-          const input = this.$refs.input;
-          input.newValue = "";
-          const innerInput = input.$refs.input;
-          innerInput.value = "";
+          this.newValue = "";
         } else {
           this.newValue = this.getValue(this.selected);
         }
@@ -330,6 +360,31 @@ var _sfc_main = vue.defineComponent({
         }
       });
     },
+    /*
+     * Find index of hovered item in data array by comparing display values
+     * instead of object references. This fixes the bug with computed data
+     * where proxy objects cause indexOf to fail.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    findHoveredIndex(data) {
+      if (this.hovered === null || this.hovered === void 0) {
+        return -1;
+      }
+      const exactIndex = data.indexOf(this.hovered);
+      if (exactIndex !== -1) {
+        return exactIndex;
+      }
+      const hoveredValue = this.getValue(this.hovered);
+      if (hoveredValue === null || hoveredValue === void 0) {
+        return -1;
+      }
+      return data.findIndex((item) => {
+        if (item === null || item === void 0) {
+          return hoveredValue === null || hoveredValue === void 0;
+        }
+        return this.getValue(item) === hoveredValue;
+      });
+    },
     keydown(event) {
       const { key } = event;
       if (key === "Enter") event.preventDefault();
@@ -340,7 +395,11 @@ var _sfc_main = vue.defineComponent({
         if (key === ",") event.preventDefault();
         const closeDropdown = !this.keepOpen || key === "Tab";
         if (this.hovered === null) {
-          this.checkIfHeaderOrFooterSelected(event, null, closeDropdown);
+          this.checkIfHeaderOrFooterSelected(
+            event,
+            null,
+            closeDropdown
+          );
           return;
         }
         this.setSelected(this.hovered, closeDropdown, event);
@@ -396,7 +455,9 @@ var _sfc_main = vue.defineComponent({
      * reached it's end.
      */
     checkIfReachedTheEndOfScroll() {
-      const list = this.$refs.dropdown.querySelector(".dropdown-content");
+      const list = this.$refs.dropdown.querySelector(
+        ".dropdown-content"
+      );
       const footerHeight = this.hasFooterSlot ? list.querySelectorAll("div.dropdown-footer")[0].clientHeight : 0;
       if (list.clientHeight !== list.scrollHeight && list.scrollTop + list.parentElement.clientHeight + footerHeight >= list.scrollHeight) {
         this.$emit("infinite-scroll");
@@ -424,9 +485,7 @@ var _sfc_main = vue.defineComponent({
     keyArrows(direction) {
       const sum = direction === "down" ? 1 : -1;
       if (this.isActive) {
-        const data = this.computedData.map(
-          (d) => d.items
-        ).reduce((a, b) => [...a, ...b], []);
+        const data = this.computedData.map((d) => d.items).reduce((a, b) => [...a, ...b], []);
         if (this.hasHeaderSlot && this.selectableHeader) {
           data.unshift(void 0);
         }
@@ -439,7 +498,7 @@ var _sfc_main = vue.defineComponent({
         } else if (this.footerHovered) {
           index = data.length - 1 + sum;
         } else {
-          index = data.indexOf(this.hovered) + sum;
+          index = this.findHoveredIndex(data) + sum;
         }
         index = index > data.length - 1 ? data.length - 1 : index;
         index = index < 0 ? 0 : index;
@@ -452,7 +511,9 @@ var _sfc_main = vue.defineComponent({
         if (this.hasHeaderSlot && this.selectableHeader && index === 0) {
           this.headerHovered = true;
         }
-        const list = this.$refs.dropdown.querySelector(".dropdown-content");
+        const list = this.$refs.dropdown.querySelector(
+          ".dropdown-content"
+        );
         let querySelectorText = "a.dropdown-item:not(.is-disabled)";
         if (this.hasHeaderSlot && this.selectableHeader) {
           querySelectorText += ",div.dropdown-header";
@@ -499,7 +560,9 @@ var _sfc_main = vue.defineComponent({
     },
     onInput() {
       const currentValue = this.getValue(this.selected);
-      if (currentValue && currentValue === this.newValue) return;
+      if (currentValue !== void 0 && currentValue !== null && currentValue === this.newValue) {
+        return;
+      }
       this.$emit("typing", this.newValue);
       this.checkValidity();
     },
@@ -525,6 +588,9 @@ var _sfc_main = vue.defineComponent({
       const dropdownMenu = this.$refs.dropdown;
       const trigger = this.$parent.$data._isTaginput ? this.$parent.$el : this.$refs.input.$el;
       if (dropdownMenu && trigger) {
+        if (!this.$data._bodyEl) {
+          this.$data._bodyEl = helpers.createAbsoluteElement(dropdownMenu);
+        }
         const root = this.$data._bodyEl;
         root.classList.forEach((item) => root.classList.remove(item));
         root.classList.add("autocomplete");
@@ -555,17 +621,30 @@ var _sfc_main = vue.defineComponent({
     if (typeof window !== "undefined") {
       document.addEventListener("click", this.clickedOutside);
       if (this.dropdownPosition === "auto") {
-        window.addEventListener("resize", this.calcDropdownInViewportVertical);
+        window.addEventListener(
+          "resize",
+          this.calcDropdownInViewportVertical
+        );
+      }
+      if (this.appendToBody) {
+        window.addEventListener(
+          "scroll",
+          this.calcDropdownInViewportVertical
+        );
       }
     }
   },
   mounted() {
     if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector(".dropdown-content")) {
-      const list = this.$refs.dropdown.querySelector(".dropdown-content");
+      const list = this.$refs.dropdown.querySelector(
+        ".dropdown-content"
+      );
       list.addEventListener("scroll", this.checkIfReachedTheEndOfScroll);
     }
     if (this.appendToBody) {
-      this.$data._bodyEl = helpers.createAbsoluteElement(this.$refs.dropdown);
+      this.$data._bodyEl = helpers.createAbsoluteElement(
+        this.$refs.dropdown
+      );
       this.updateAppendToBody();
     }
   },
@@ -573,14 +652,28 @@ var _sfc_main = vue.defineComponent({
     if (typeof window !== "undefined") {
       document.removeEventListener("click", this.clickedOutside);
       if (this.dropdownPosition === "auto") {
-        window.removeEventListener("resize", this.calcDropdownInViewportVertical);
+        window.removeEventListener(
+          "resize",
+          this.calcDropdownInViewportVertical
+        );
+      }
+      if (this.appendToBody) {
+        window.removeEventListener(
+          "scroll",
+          this.calcDropdownInViewportVertical
+        );
       }
     }
     if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector(".dropdown-content")) {
-      const list = this.$refs.dropdown.querySelector(".dropdown-content");
-      list.removeEventListener("scroll", this.checkIfReachedTheEndOfScroll);
+      const list = this.$refs.dropdown.querySelector(
+        ".dropdown-content"
+      );
+      list.removeEventListener(
+        "scroll",
+        this.checkIfReachedTheEndOfScroll
+      );
     }
-    if (this.appendToBody) {
+    if (this.appendToBody && this.$data._bodyEl) {
       helpers.removeElement(this.$data._bodyEl);
     }
     clearTimeout(this.timeOutID);

package/dist/cjs/autocomplete.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Autocomplete = require('./Autocomplete-bK5HLaUH.js');
+var Autocomplete = require('./Autocomplete-BMmOsPiK.js');
 var plugins = require('./plugins-DbyYGVpp.js');
 require('vue');
 require('./helpers.js');

package/dist/cjs/clockpicker.js

@@ -316,10 +316,6 @@ var _sfc_main = vue.defineComponent({
       type: Number,
       default: 5
     },
-    autoSwitch: {
-      type: Boolean,
-      default: true
-    },
     type: {
       type: String,
       default: "is-primary"
@@ -378,8 +374,22 @@ var _sfc_main = vue.defineComponent({
       }
     },
     onClockChange() {
-      if (this.autoSwitch && this.isSelectingHour) {
+      if (this.isSelectingHour) {
         this.isSelectingHour = !this.isSelectingHour;
+      } else {
+        this.toggle(false);
+      }
+    },
+    /*
+     * Toggle clockpicker
+     */
+    toggle(active) {
+      if (this.$refs.dropdown) {
+        const dropdown = this.$refs.dropdown;
+        dropdown.isActive = active != null ? active : !dropdown.isActive;
+        if (dropdown.isActive) {
+          this.isSelectingHour = true;
+        }
       }
     },
     onMeridienClick(value) {
@@ -566,6 +576,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     )
                   ])) : vue.createCommentVNode("v-if", true),
                   vue.createVNode(_component_b_clockpicker_face, {
+                    ref: "clockpickerFace",
                     "picker-size": _ctx.faceSize,
                     min: _ctx.minFaceValue,
                     max: _ctx.maxFaceValue,

package/dist/cjs/index.js

@@ -49,7 +49,7 @@ var upload = require('./upload.js');
 var helpers = require('./helpers.js');
 var config$1 = require('./config-DR826Ki2.js');
 var plugins = require('./plugins-DbyYGVpp.js');
-var Autocomplete = require('./Autocomplete-bK5HLaUH.js');
+var Autocomplete = require('./Autocomplete-BMmOsPiK.js');
 var Button = require('./Button-Cq7yqI8p.js');
 var Checkbox = require('./Checkbox-GPzAMQqM.js');
 var Datepicker = require('./Datepicker-B-9ReBe6.js');

package/dist/cjs/taginput.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var helpers = require('./helpers.js');
 var Tag = require('./Tag-BprnwJJ1.js');
-var Autocomplete = require('./Autocomplete-bK5HLaUH.js');
+var Autocomplete = require('./Autocomplete-BMmOsPiK.js');
 var config = require('./config-DR826Ki2.js');
 var CompatFallthroughMixin = require('./CompatFallthroughMixin-hhK0Gkhr.js');
 var FormElementMixin = require('./FormElementMixin-DavX4iOv.js');

package/dist/components/autocomplete/index.js

@@ -1,4 +1,4 @@
-/*! Buefy v1.0.1 | MIT License | github.com/buefy/buefy */
+/*! Buefy v1.0.2 | MIT License | github.com/buefy/buefy */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
     typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
@@ -886,7 +886,9 @@
         },
         isEmpty() {
           if (!this.computedData) return true;
-          return !this.computedData.some((element) => element.items && element.items.length);
+          return !this.computedData.some(
+            (element) => element.items && element.items.length
+          );
         },
         /*
          * White-listed items to not close when clicked.
@@ -894,6 +896,7 @@
          */
         whiteList() {
           var _a;
+          this.computedData;
           const whiteList = [];
           whiteList.push(this.$refs.input.$el.querySelector("input"));
           whiteList.push(this.$refs.dropdown);
@@ -989,13 +992,22 @@
          * When checkInfiniteScroll property changes scroll event should be removed or added
          */
         checkInfiniteScroll(checkInfiniteScroll) {
-          if ((this.$refs.dropdown && this.$refs.dropdown.querySelector(".dropdown-content")) === false) return;
-          const list = this.$refs.dropdown.querySelector(".dropdown-content");
+          if (!this.$refs.dropdown) return;
+          const list = this.$refs.dropdown.querySelector(
+            ".dropdown-content"
+          );
+          if (!list) return;
           if (checkInfiniteScroll === true) {
-            list.addEventListener("scroll", this.checkIfReachedTheEndOfScroll);
+            list.addEventListener(
+              "scroll",
+              this.checkIfReachedTheEndOfScroll
+            );
             return;
           }
-          list.removeEventListener("scroll", this.checkIfReachedTheEndOfScroll);
+          list.removeEventListener(
+            "scroll",
+            this.checkIfReachedTheEndOfScroll
+          );
         },
         /*
          * When updating input's value
@@ -1006,11 +1018,11 @@
         newValue(value) {
           this.$emit("update:modelValue", value);
           const currentValue = this.getValue(this.selected);
-          if (currentValue && currentValue !== value) {
+          if (currentValue !== void 0 && currentValue !== null && currentValue !== value) {
             this.setSelected(null, false);
           }
-          if (this.hasFocus && (!this.openOnFocus || value)) {
-            this.isActive = !!value;
+          if (this.hasFocus && (!this.openOnFocus || value !== "")) {
+            this.isActive = value !== "" && value !== void 0 && value !== null;
           }
         },
         /*
@@ -1021,6 +1033,9 @@
         modelValue(value) {
           this.newValue = value;
         },
+        keepFirst(value) {
+          this.ariaAutocomplete = value ? "both" : "list";
+        },
         /*
          * Select first option if "keep-first
          */
@@ -1042,6 +1057,24 @@
               }
             }
           }
+        },
+        /*
+         * When appendToBody property changes, handle the transition properly
+         */
+        appendToBody(newValue, oldValue) {
+          if (newValue && !oldValue) {
+            if (this.isActive && this.$refs.dropdown && !this.$data._bodyEl) {
+              this.$data._bodyEl = createAbsoluteElement(
+                this.$refs.dropdown
+              );
+              this.updateAppendToBody();
+            }
+          } else if (!newValue && oldValue) {
+            if (this.$data._bodyEl) {
+              removeElement(this.$data._bodyEl);
+              this.$data._bodyEl = void 0;
+            }
+          }
         }
       },
       methods: {
@@ -1064,10 +1097,7 @@
           this.$emit("select", this.selected, event);
           if (this.selected !== null) {
             if (this.clearOnSelect) {
-              const input = this.$refs.input;
-              input.newValue = "";
-              const innerInput = input.$refs.input;
-              innerInput.value = "";
+              this.newValue = "";
             } else {
               this.newValue = this.getValue(this.selected);
             }
@@ -1094,6 +1124,31 @@
             }
           });
         },
+        /*
+         * Find index of hovered item in data array by comparing display values
+         * instead of object references. This fixes the bug with computed data
+         * where proxy objects cause indexOf to fail.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        findHoveredIndex(data) {
+          if (this.hovered === null || this.hovered === void 0) {
+            return -1;
+          }
+          const exactIndex = data.indexOf(this.hovered);
+          if (exactIndex !== -1) {
+            return exactIndex;
+          }
+          const hoveredValue = this.getValue(this.hovered);
+          if (hoveredValue === null || hoveredValue === void 0) {
+            return -1;
+          }
+          return data.findIndex((item) => {
+            if (item === null || item === void 0) {
+              return hoveredValue === null || hoveredValue === void 0;
+            }
+            return this.getValue(item) === hoveredValue;
+          });
+        },
         keydown(event) {
           const { key } = event;
           if (key === "Enter") event.preventDefault();
@@ -1104,7 +1159,11 @@
             if (key === ",") event.preventDefault();
             const closeDropdown = !this.keepOpen || key === "Tab";
             if (this.hovered === null) {
-              this.checkIfHeaderOrFooterSelected(event, null, closeDropdown);
+              this.checkIfHeaderOrFooterSelected(
+                event,
+                null,
+                closeDropdown
+              );
               return;
             }
             this.setSelected(this.hovered, closeDropdown, event);
@@ -1160,7 +1219,9 @@
          * reached it's end.
          */
         checkIfReachedTheEndOfScroll() {
-          const list = this.$refs.dropdown.querySelector(".dropdown-content");
+          const list = this.$refs.dropdown.querySelector(
+            ".dropdown-content"
+          );
           const footerHeight = this.hasFooterSlot ? list.querySelectorAll("div.dropdown-footer")[0].clientHeight : 0;
           if (list.clientHeight !== list.scrollHeight && list.scrollTop + list.parentElement.clientHeight + footerHeight >= list.scrollHeight) {
             this.$emit("infinite-scroll");
@@ -1188,9 +1249,7 @@
         keyArrows(direction) {
           const sum = direction === "down" ? 1 : -1;
           if (this.isActive) {
-            const data = this.computedData.map(
-              (d) => d.items
-            ).reduce((a, b) => [...a, ...b], []);
+            const data = this.computedData.map((d) => d.items).reduce((a, b) => [...a, ...b], []);
             if (this.hasHeaderSlot && this.selectableHeader) {
               data.unshift(void 0);
             }
@@ -1203,7 +1262,7 @@
             } else if (this.footerHovered) {
               index = data.length - 1 + sum;
             } else {
-              index = data.indexOf(this.hovered) + sum;
+              index = this.findHoveredIndex(data) + sum;
             }
             index = index > data.length - 1 ? data.length - 1 : index;
             index = index < 0 ? 0 : index;
@@ -1216,7 +1275,9 @@
             if (this.hasHeaderSlot && this.selectableHeader && index === 0) {
               this.headerHovered = true;
             }
-            const list = this.$refs.dropdown.querySelector(".dropdown-content");
+            const list = this.$refs.dropdown.querySelector(
+              ".dropdown-content"
+            );
             let querySelectorText = "a.dropdown-item:not(.is-disabled)";
             if (this.hasHeaderSlot && this.selectableHeader) {
               querySelectorText += ",div.dropdown-header";
@@ -1263,7 +1324,9 @@
         },
         onInput() {
           const currentValue = this.getValue(this.selected);
-          if (currentValue && currentValue === this.newValue) return;
+          if (currentValue !== void 0 && currentValue !== null && currentValue === this.newValue) {
+            return;
+          }
           this.$emit("typing", this.newValue);
           this.checkValidity();
         },
@@ -1289,6 +1352,9 @@
           const dropdownMenu = this.$refs.dropdown;
           const trigger = this.$parent.$data._isTaginput ? this.$parent.$el : this.$refs.input.$el;
           if (dropdownMenu && trigger) {
+            if (!this.$data._bodyEl) {
+              this.$data._bodyEl = createAbsoluteElement(dropdownMenu);
+            }
             const root = this.$data._bodyEl;
             root.classList.forEach((item) => root.classList.remove(item));
             root.classList.add("autocomplete");
@@ -1319,17 +1385,30 @@
         if (typeof window !== "undefined") {
           document.addEventListener("click", this.clickedOutside);
           if (this.dropdownPosition === "auto") {
-            window.addEventListener("resize", this.calcDropdownInViewportVertical);
+            window.addEventListener(
+              "resize",
+              this.calcDropdownInViewportVertical
+            );
+          }
+          if (this.appendToBody) {
+            window.addEventListener(
+              "scroll",
+              this.calcDropdownInViewportVertical
+            );
           }
         }
       },
       mounted() {
         if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector(".dropdown-content")) {
-          const list = this.$refs.dropdown.querySelector(".dropdown-content");
+          const list = this.$refs.dropdown.querySelector(
+            ".dropdown-content"
+          );
           list.addEventListener("scroll", this.checkIfReachedTheEndOfScroll);
         }
         if (this.appendToBody) {
-          this.$data._bodyEl = createAbsoluteElement(this.$refs.dropdown);
+          this.$data._bodyEl = createAbsoluteElement(
+            this.$refs.dropdown
+          );
           this.updateAppendToBody();
         }
       },
@@ -1337,14 +1416,28 @@
         if (typeof window !== "undefined") {
           document.removeEventListener("click", this.clickedOutside);
           if (this.dropdownPosition === "auto") {
-            window.removeEventListener("resize", this.calcDropdownInViewportVertical);
+            window.removeEventListener(
+              "resize",
+              this.calcDropdownInViewportVertical
+            );
+          }
+          if (this.appendToBody) {
+            window.removeEventListener(
+              "scroll",
+              this.calcDropdownInViewportVertical
+            );
           }
         }
         if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector(".dropdown-content")) {
-          const list = this.$refs.dropdown.querySelector(".dropdown-content");
-          list.removeEventListener("scroll", this.checkIfReachedTheEndOfScroll);
+          const list = this.$refs.dropdown.querySelector(
+            ".dropdown-content"
+          );
+          list.removeEventListener(
+            "scroll",
+            this.checkIfReachedTheEndOfScroll
+          );
         }
-        if (this.appendToBody) {
+        if (this.appendToBody && this.$data._bodyEl) {
           removeElement(this.$data._bodyEl);
         }
         clearTimeout(this.timeOutID);