buefy 1.0.1 → 1.0.2

package/README.md

@@ -7,7 +7,7 @@
     <a href="https://www.npmjs.com/package/buefy"><img src="https://img.shields.io/npm/dt/buefy.svg" /></a>
     <a href="https://circleci.com/gh/buefy/buefy"><img src="https://img.shields.io/circleci/project/github/buefy/buefy.svg?style=flat-square" /></a>
     <a href="https://codecov.io/gh/buefy/buefy"><img src="https://img.shields.io/codecov/c/github/buefy/buefy.svg?style=flat-square" /></a>
-    <a href="https://discordapp.com/invite/ZkdFJMr"><img src="https://img.shields.io/badge/chat-on%20discord-7289DA.svg?logo=discord" /></a>
+    <a href="https://discord.buefy.org/"><img src="https://img.shields.io/badge/chat-on%20discord-7289DA.svg?logo=discord" /></a>
     <a href="https://buefy.org"><img src="https://img.shields.io/badge/code_style-buefy-7957d5.svg?style=flat-square" /></a>
 </p>
 
@@ -21,8 +21,6 @@ The biggest breaking change is obviously, **buefy does not work with Vue 2**.
 
 ### How to install
 
-To install this fork, please run the following command,
-
 ```sh
 npm install buefy
 ```
@@ -101,12 +99,21 @@ If you want to customize the icons or the theme, refer to the [customization sec
 <script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
 ```
 
-**Currently, including `buefy-next` via `<script>` is not working.**
+**Currently, including `buefy` via `<script>` is not working.**
 Please see the issue [#221](https://github.com/ntohq/buefy-next/issues/221).
 
+As a temporary workaround, add the following snippet before initializing Buefy:
+
+```html
+<script>
+    // we need this tweak because Buefy is not built for browsers
+    window.process = { env: { NODE_ENV: 'production' } };
+</script>
+```
+
 ### Installing Developer Release(s) from GitHub npm Registry to Access the Latest Features
 
-To incorporate the latest changes from the development branch of buefy-next, you can install developer releases from the GitHub npm registry. However, proceed with caution as these packages may be deleted or retracted without notice.
+To incorporate the latest changes from the development branch, you can install developer releases from the GitHub npm registry. However, proceed with caution as these packages may be deleted or retracted without notice.
 
 Steps:
 
@@ -140,30 +147,32 @@ Steps:
     Buefy developer releases follow a specific naming format:
 
     ```
-    buefy@<package version>-<dev commit hash>
+    @buefy/buefy@<package version>-<dev commit hash>
     ```
 
     `<package version>`: This represents the intended stable release version that the developer release will eventually be included in.
 
     `<dev commit hash>`: This part indicates that it's a developer release and includes a unique commit hash that identifies the specific code changes in that release.
 
+    **Due to the GitHub npm registry's requirements, the package name must be scoped; i.e., prefixed with `@buefy/`.**
+
 4. Install the Package:
 
     Copy the provided command from GitHub, which will resemble this:
 
     ```bash
-    npm install buefy@<package version>-<dev commit hash>
+    npm install buefy@npm:@buefy/buefy@<package version>-<dev commit hash>
     ```
 
-    Alternatively, to fetch the latest release from the developer snapshot registry, run:
+    Alternatively, to fetch the latest release from the developer release registry, run:
 
     ```bash
-    npm install buefy@latest
+    npm install buefy@npm:@buefy/buefy@latest
     ```
 
-    **However, note it is not recommended to use the latest version of our developer snapshot, as its stability fluctuates.**
+    **However, note it is not recommended to use the latest version of our developer release, as its stability fluctuates.**
 
-Congratulations! You've successfully installed a Buefy-next developer package.
+Congratulations! You've successfully installed a Buefy developer release.
 
 For further details on the GitHub npm registry refer to the [official GitHub documentation](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#installing-a-package)
 
@@ -230,3 +239,4 @@ This project follows the [all-contributors](https://github.com/all-contributors/
 ## License <a href="https://github.com/buefy/buefy/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/buefy.svg?logo=github" /></a>
 
 Code released under [MIT](https://github.com/buefy/buefy/blob/master/LICENSE) license.
+

package/dist/buefy.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-/*! Buefy v1.0.1 | MIT License | github.com/buefy/buefy */
+/*! Buefy v1.0.2 | MIT License | github.com/buefy/buefy */
 .is-noscroll {
   position: fixed;
   overflow-y: hidden;
@@ -15893,12 +15893,3 @@ MIT (https://github.com/Wikiki/bulma-steps/blob/master/LICENSE)
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;
 }
-
-@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
-  .upload input[type=file] {
-    z-index: auto;
-  }
-  .upload .upload-draggable + input[type=file] {
-    z-index: -1;
-  }
-}

package/dist/buefy.d.ts

@@ -120,6 +120,7 @@ maxHeight: string | undefined;
 setHovered(option: any): void;
 setSelected(option: any, closeDropdown?: boolean, event?: Event): void;
 selectFirstOption(computedData: DataItem[]): void;
+findHoveredIndex(data: any[]): number;
 keydown(event: KeyboardEvent): void;
 selectHeaderOrFoterByClick(event: MouseEvent, origin: "header" | "footer"): void;
 checkIfHeaderOrFooterSelected(event: Event, triggerClick: {
@@ -488,13 +489,13 @@ type: string;
 iconRightClickable: boolean;
 checkInfiniteScroll: boolean;
 keepFirst: boolean;
+appendToBody: boolean;
 clearOnSelect: boolean;
 openOnFocus: boolean;
 keepOpen: boolean;
 selectOnClickOutside: boolean;
 clearable: boolean;
 dropdownPosition: string;
-appendToBody: boolean;
 confirmKeys: unknown[];
 selectableHeader: boolean;
 selectableFooter: boolean;
@@ -1231,10 +1232,6 @@ incrementMinutes: {
 type: NumberConstructor;
 default: number;
 };
-autoSwitch: {
-type: BooleanConstructor;
-default: boolean;
-};
 type: {
 type: StringConstructor;
 default: string;
@@ -1261,6 +1258,7 @@ faceDisabledValues(): (hour: number) => boolean;
 }, {
 onClockInput(value: number): void;
 onClockChange(): void;
+toggle(active: boolean): void;
 onMeridienClick(value: string): void;
 onInputClick(event: MouseEvent): void;
 }, DefineComponent<    {
@@ -1830,8 +1828,8 @@ default: boolean;
 "onUpdate:modelValue"?: ((_value: Date | null) => any) | undefined;
 }, {
 disabled: boolean;
-openOnFocus: boolean;
 appendToBody: boolean;
+openOnFocus: boolean;
 inline: boolean;
 mobileModal: boolean;
 focusable: boolean;
@@ -1855,10 +1853,6 @@ incrementMinutes: {
 type: NumberConstructor;
 default: number;
 };
-autoSwitch: {
-type: BooleanConstructor;
-default: boolean;
-};
 type: {
 type: StringConstructor;
 default: string;
@@ -1875,7 +1869,6 @@ default: () => string;
 type: string;
 incrementMinutes: number;
 pickerSize: number;
-autoSwitch: boolean;
 hoursLabel: string;
 minutesLabel: string;
 }, {}>;
@@ -2328,8 +2321,8 @@ appendToBody: BooleanConstructor;
     trapFocus: boolean;
     expanded: boolean;
     disabled: boolean;
-    openOnFocus: boolean;
     appendToBody: boolean;
+    openOnFocus: boolean;
     inline: boolean;
     mobileModal: boolean;
     closeOnClick: boolean;
@@ -3101,8 +3094,8 @@ trapFocus: boolean;
 disabled: boolean;
 iconRightClickable: boolean;
 range: boolean;
-openOnFocus: boolean;
 appendToBody: boolean;
+openOnFocus: boolean;
 iconPrev: string;
 iconNext: string;
 inline: boolean;
@@ -3546,8 +3539,8 @@ appendToBody: BooleanConstructor;
 }, {
 disabled: boolean;
 iconRightClickable: boolean;
-openOnFocus: boolean;
 appendToBody: boolean;
+openOnFocus: boolean;
 inline: boolean;
 focusable: boolean;
 editable: boolean;
@@ -4034,8 +4027,8 @@ animation: string;
 ariaRole: string;
 expanded: boolean;
 disabled: boolean;
-maxHeight: string | number;
 appendToBody: boolean;
+maxHeight: string | number;
 inline: boolean;
 scrollable: boolean;
 triggers: ("click" | "contextmenu" | "focus" | "hover")[];
@@ -9506,9 +9499,9 @@ hasCounter: boolean;
 autocomplete: boolean;
 checkInfiniteScroll: boolean;
 keepFirst: boolean;
+appendToBody: boolean;
 openOnFocus: boolean;
 keepOpen: boolean;
-appendToBody: boolean;
 confirmKeys: string[];
 attached: boolean;
 ellipsis: boolean;
@@ -10099,8 +10092,8 @@ default: boolean;
 "onUpdate:modelValue"?: ((_value: Date | null) => any) | undefined;
 }, {
 disabled: boolean;
-openOnFocus: boolean;
 appendToBody: boolean;
+openOnFocus: boolean;
 inline: boolean;
 mobileModal: boolean;
 focusable: boolean;
@@ -11523,7 +11516,7 @@ export declare const Snackbar: {
     install(Vue: App): void;
 };
 
-declare type SnackbarOpenParams = Omit<SnackbarProps, 'message'> & {
+export declare type SnackbarOpenParams = Omit<SnackbarProps, 'message'> & {
     message?: string | VNode | (string | VNode)[];
     onClose?: () => void;
 };

package/dist/buefy.esm.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 */
 import { Fragment, Comment, Text, Static, defineComponent, h, resolveComponent, createElementBlock, openBlock, normalizeClass, createBlock, renderSlot, createCommentVNode, createTextVNode, toDisplayString, withCtx, createVNode, renderList, resolveDynamicComponent, mergeProps, withDirectives, vModelDynamic, vModelText, withKeys, withModifiers, Transition, createElementVNode, normalizeStyle, vShow, normalizeProps, guardReactiveProps, vModelCheckbox, resolveDirective, createSlots, vModelSelect, toHandlers, createApp, vModelRadio, toRaw, toHandlerKey } from 'vue';
 
 var __defProp$d = Object.defineProperty;
@@ -2003,7 +2003,9 @@ var _sfc_main$P = 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.
@@ -2011,6 +2013,7 @@ var _sfc_main$P = defineComponent({
      */
     whiteList() {
       var _a;
+      this.computedData;
       const whiteList = [];
       whiteList.push(this.$refs.input.$el.querySelector("input"));
       whiteList.push(this.$refs.dropdown);
@@ -2106,13 +2109,22 @@ var _sfc_main$P = 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
@@ -2123,11 +2135,11 @@ var _sfc_main$P = 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;
       }
     },
     /*
@@ -2138,6 +2150,9 @@ var _sfc_main$P = defineComponent({
     modelValue(value) {
       this.newValue = value;
     },
+    keepFirst(value) {
+      this.ariaAutocomplete = value ? "both" : "list";
+    },
     /*
      * Select first option if "keep-first
      */
@@ -2159,6 +2174,24 @@ var _sfc_main$P = 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 = createAbsoluteElement(
+            this.$refs.dropdown
+          );
+          this.updateAppendToBody();
+        }
+      } else if (!newValue && oldValue) {
+        if (this.$data._bodyEl) {
+          removeElement(this.$data._bodyEl);
+          this.$data._bodyEl = void 0;
+        }
+      }
     }
   },
   methods: {
@@ -2181,10 +2214,7 @@ var _sfc_main$P = 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);
         }
@@ -2211,6 +2241,31 @@ var _sfc_main$P = 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();
@@ -2221,7 +2276,11 @@ var _sfc_main$P = 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);
@@ -2277,7 +2336,9 @@ var _sfc_main$P = 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");
@@ -2305,9 +2366,7 @@ var _sfc_main$P = 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);
         }
@@ -2320,7 +2379,7 @@ var _sfc_main$P = 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;
@@ -2333,7 +2392,9 @@ var _sfc_main$P = 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";
@@ -2380,7 +2441,9 @@ var _sfc_main$P = 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();
     },
@@ -2406,6 +2469,9 @@ var _sfc_main$P = 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 = createAbsoluteElement(dropdownMenu);
+        }
         const root = this.$data._bodyEl;
         root.classList.forEach((item) => root.classList.remove(item));
         root.classList.add("autocomplete");
@@ -2436,17 +2502,30 @@ var _sfc_main$P = 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 = createAbsoluteElement(this.$refs.dropdown);
+      this.$data._bodyEl = createAbsoluteElement(
+        this.$refs.dropdown
+      );
       this.updateAppendToBody();
     }
   },
@@ -2454,14 +2533,28 @@ var _sfc_main$P = 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) {
       removeElement(this.$data._bodyEl);
     }
     clearTimeout(this.timeOutID);
@@ -6055,10 +6148,6 @@ var _sfc_main$B = defineComponent({
       type: Number,
       default: 5
     },
-    autoSwitch: {
-      type: Boolean,
-      default: true
-    },
     type: {
       type: String,
       default: "is-primary"
@@ -6117,8 +6206,22 @@ var _sfc_main$B = 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) {
@@ -6305,6 +6408,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
                     )
                   ])) : createCommentVNode("v-if", true),
                   createVNode(_component_b_clockpicker_face, {
+                    ref: "clockpickerFace",
                     "picker-size": _ctx.faceSize,
                     min: _ctx.minFaceValue,
                     max: _ctx.maxFaceValue,