buefy 1.0.1 → 1.0.2

package/dist/buefy.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) :
@@ -2007,7 +2007,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.
@@ -2015,6 +2017,7 @@
          */
         whiteList() {
           var _a;
+          this.computedData;
           const whiteList = [];
           whiteList.push(this.$refs.input.$el.querySelector("input"));
           whiteList.push(this.$refs.dropdown);
@@ -2110,13 +2113,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
@@ -2127,11 +2139,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;
           }
         },
         /*
@@ -2142,6 +2154,9 @@
         modelValue(value) {
           this.newValue = value;
         },
+        keepFirst(value) {
+          this.ariaAutocomplete = value ? "both" : "list";
+        },
         /*
          * Select first option if "keep-first
          */
@@ -2163,6 +2178,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: {
@@ -2185,10 +2218,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);
             }
@@ -2215,6 +2245,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();
@@ -2225,7 +2280,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);
@@ -2281,7 +2340,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");
@@ -2309,9 +2370,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);
             }
@@ -2324,7 +2383,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;
@@ -2337,7 +2396,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";
@@ -2384,7 +2445,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();
         },
@@ -2410,6 +2473,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");
@@ -2440,17 +2506,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();
         }
       },
@@ -2458,14 +2537,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);
@@ -6059,10 +6152,6 @@
           type: Number,
           default: 5
         },
-        autoSwitch: {
-          type: Boolean,
-          default: true
-        },
         type: {
           type: String,
           default: "is-primary"
@@ -6121,8 +6210,22 @@
           }
         },
         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) {
@@ -6309,6 +6412,7 @@
                         )
                       ])) : vue.createCommentVNode("v-if", true),
                       vue.createVNode(_component_b_clockpicker_face, {
+                        ref: "clockpickerFace",
                         "picker-size": _ctx.faceSize,
                         min: _ctx.minFaceValue,
                         max: _ctx.maxFaceValue,