Merge buefy updates #192
Merged
Merge buefy updates #192
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Updated documentation for attribute `auto-close` from buefy#3855
…fy#3856) * Fix: Expired and broken websites in expo page (buefy#3780) * Fix: Full width sidebar doesn't have a close button (buefy#3802) * Fix: Full width sidebar doesn't have a close button (buefy#3802) - format code * Fix: Full width sidebar doesn't have a close button (buefy#3802) - Add documentation * Test: update Sidebar snapshot
- Fixes the bug that `Datepicker` ended up with an infinite loop when a user tried to move focus onto an unselectable cell. Also related to ntohq#43
…ng the value (buefy#3884) (buefy#3886) * fix(lib): Input not validate on value prop change - Fixes the bug that `Input` did not validate an updated value if `modelValue` prop was updated from outside; i.e., without user interaction. Runs validation whenever `modelValue` is changed from outside. It determines the update is from outside if `computedValue` and the new value are different. Intentionally uses `!=` instead of `!==`, because `computedValue` and `modelValue` may be either string or number. * test(lib): test validation on Input - Introduces new test cases for `Input` that test validation runs on relevant events: - "input" event - "change" event - `modelValue` prop is programmatically changed Also test cases where the `Input` value has v-model binding. These tests make sure that the chain of events won't run validation twice on the same value. - Includes migration to Vue 3 and Vue Test Utils v2: - `value` → `modelValue` - `find` → `findComponent`
…) persists after value is corrected (buefy#3883) (buefy#3885) * fix(lib): validation error on addons persisted - Fixes the bug that a validation error on a `Field` that wraps multile child components (has addons) persisted. `Field` wraps its slot in another `Field` (wrapper) if the slot is consisting of multiple components. It used to propagate `newType` to the wrapper, but this prevented the type of the wrapper updated once `newType` was set due to the line: https://github.com/buefy/buefy/blob/6f41e91bd24dfef8f680f27313e07b488ddcfc1d/src/utils/FormElementMixin.js#L137 Propagates `type` instead of `newType` to the wrapper. * test(lib): add test for Field's type - Adds a new test case for `Field` that tests if `Field` containing multiple components (addons) reflects the validation status of a wrapped input. This verifies the fix of the bug that `Field` with addons did not update its validation status (`newType`) once it was set. - Includes migration to Vue Test Utils v2 and fixes: - `find` → `findComponent` - Inserts an extra `$nextTick` await after `setInvalid` and `setValidity`, because `setInvalid` and `setValidity` take effect on the first `$nextTick`
* Add nearbyMonthDays prop support to Datetimepicker Add Datepicker component prop `nearby-month-days` to Datetimepicker component * FIX lint Datetimepicker.vue * Use Datepicker default behavior for nearbyMonthDays prop * Update datetimepicker api doc with nearbyMonthDays prop
* Updated The Documentation's Twitter Link * Updated Sponsor Links * Update FUNDING.yml
* Fix eslint errors in pagination examples
* feat: add renderOnMounted prop for Modal
- `Modal` introduces a new prop `renderOnMounted` that determines if DOM
for the modal content is created on mounted whether modal is active or
not. This flag is useful if you want to access DOM before first
activating the modal.
Also adds test cases for this prop.
Includes migration to Vue 3 and Vue Test Utils v2:
- `active` → `modelValue`
- Arguments for `shallowMount`:
- `propsData` → `props`
- `stubs` → `global.stubs`
* docs: document renderOnMounted prop of Modal
* 🚧 Add default value for dialog loading prop.
* 🚧 Add unit test for dialog loading.
* 💡 document the new feature.
* 🚧 format code.
Comments added by Kikuo:
- Introduces new methods:
- `startLoading`: turns the confirm button into loading state
- `cancelLoading`: resets the loading state of the confirm button
- Adds `startLoading` and `cancelLoading` to `open` function for
programmatically opening dialogs.
- Includes migration to buefy-next and Vue Test Utils v2:
- Replaces `onConfirm` → `confirmCallback`
- Awaits `setProps`
Co-authored-by: Kikuo Emoto <[email protected]>
* Fix eslint errors in autocomplete and breadcrumb components
…to body (buefy#3865) When Autocomplete is used as Taginput child, appended to body Dropdown position should be calculated from Taginput element as trigger.
- Includes migration to Vue Test Utils v2:
- Awaits `setProps`
Co-authored-by: Kikuo Emoto <[email protected]>
- Fixes the issue that `Tag` did not accept objects as its `type` while objects actually work. Adds `Object` to acceptable types of `type`. issue buefy#3887
- Fixes the issue that SVG icons were too large on Safari. See the
following comments for workarounds:
- buefy#3872 (comment)
- buefy#3872 (comment)
* fix(lib): tooltip layout (appendToBody) - Fixes the issue that `Tooltip` is shown at a place slightly shifted from the expected one when `appendToBody` is `true`, and `position` is "is-top" or "is-bottom". Updates the absolute position of the anchor element (`tooltipEl`) instead of the `wrapper` element. See buefy#3753 (comment) * fix(lib): Tooltip did not respond to resize - Fixes the issue that `Tooltip` did not respond to resizing when it was appended to body. Observes changes in the sizes of windown and the immediate parent element. See the comment: - buefy#3753 (comment) * fix(lib): Tooltip was dislodge when Modal opened - Fixes the issue that a Tooltip was slightly dislodged when a Modal was just opened if the Tooltip was in the Modal and appended to body. This should have been caused by the CSS transition involving changes in the Modal size. Updates the position after the CSS transition of the closest `.animation-content` if such an element exists. See the comment: - buefy#3753 (comment) Also fixes buefy#3065
- Fixes the issue that `BTable` ignored column widths if there were more
columns than fitting in a page. Applies the `width` to the child `<div
class="th-wrap">` of `<th>` to enforce the `width`. `BTableColumn`
introduces a new computed property `thWrapStyle` that is applied to
`th-wrap` elements.
Unfortunately, `<table>` may ignore `width` unless `table-layout` is
fixed. `table-layout: fixed`, however, requires an explicit table
width to work and is not always relevant. The workaround is inspired
by the following StackOverflow comment:
- https://stackoverflow.com/questions/18503849/set-min-width-in-html-tables-td#comment27205973_18503849
Fortunately, `BTable` had `<div class="th-wrap">` inside all the
`<th>` elements. So I decided to apply `width` to those elements.
issue buefy#3726
- Includes an additional fix for buefy-next:
- `mockTableColumn` also provides `thWrapStyle`
* fix(docs): custom pagination routing did not work
- Fixes the issue that routing for "Custom pagination buttons" did not
work. `ExSlot` tried to extract the page number from the hash in the
current URL, though, `parseInt` always got an extra leading hash
character ('#') in the input and ended up with `NaN`. Includes a hash
character in the pattern for matching the non-digit part in the hash
in the URL.
issue buefy#3935
* fix(docs): disabled page shown with custom pagination
- Works around the problem that disabled "Previous" and "Next" buttons
navigated to non-existing pages in Section "Custom pagination
buttons". It happened when `router-link` was specified as custom
pagination button tags. `BPaginationButton` tries to trap click events
leading to disabled pages, however, `router-link` overwrites this
behavior with its own click handler. As far as I investigated,
`BPaginationButton` can do nothing to prevent this.
A workaround I came up with is to switch `tag` between `a` and
`router-link` according to `page.disabled` value in `v-slot`. Updates
Section "Custom pagination buttons" to apply and remark this
workaround.
issue buefy#3852
- Fixes the issue that sort icons on Table overlapped or were clipped by next columns. Since sort icons were absolutely positioned and placed at the right side of the column label texts, the icons overlapped or were clipped by the right columns when columns were packed. This commit changes the anchor element for sort icons to `<div class="th-wrap">` elements that wrap the column label texts and absolutely places sort icons ON the right end of the `<div class="th-wrap">` elements instead. If the column `is-numeric`, the sort icon is placed on the left end of the `<div class="th-wrap">` element, otherwise the sort icon overlaps the column label text. Similar problems occurred when the `sort-multiple` option was turned on. Applying the above solution to the delete buttons of sort indicators did not work well. The delete buttons were torn apart from the sort icons since the sort icons aligned with the normal flow of the column label texts. I decided to group the sort icon, number, and delete button as `multi-sort-icons` so that they do not split. `multi-sort-icons` is placed in the normal flow of the column label texts and moves to the next line if the column is packed. issues - buefy#2886 - buefy#3034
- Keeps `modal-close` visible when the `modal-content` fills the screen. Switches the background color of `modal-close` from `none` to a translucent dark color (`$modal-background-background-color`) when the screen width is within the modal breakpoint (768px by default). issue buefy#2621
* feat(lib): emulate drag&drop on Table row on touch device
- Emulates drag&drop events on `BTable` rows on touch-enabled devices.
To start drag&drop of a row, a user has to click (tap) the row first.
This may not be intuitive, though, touch and drag&drop events have
a tradeoff. Since touch events are used to scroll the contents by
default, we cannot interpret them as drag&drop events unless we
prevent the default behavior; i.e., scrolling. However, I felt
trapping scrolling the contents was annoying; scrolling suddenly stops
on a table. So I decided to introduce an extra clicking motion to
start drag&drop.
* feat(lib): emulate drag&drop on Table column on touch device
- Emulates drag&drop events on `BTable` columns on touch-enabled
devices.
Unlike rows, a user does not have to tap columns before starting
drag&drop columns because I felt columns trapping scrolling less
disturbing.
* feat(lib): fire dragstart at first touchmove (BTable)
- Fires "dragstart" events at the first "touchmove" events rather than
at "touchstart" events. This will reduce inconsistency that users may
feel when they double-tap columns or rows; columns trigger "drop"
events on themselves when double-tapped, but rows won't trigger "drop"
events. Suppresses "drop" events triggered when users double-tap
columns or rows. Now we may tell users "double-tap and hold columns or
rows if you want to drag&drop them on touch-enabled devices."
* feat(lib): add visual effect of touch-dragging (BTable)
- Introduces visual effects shown while rows or columns on `BTable` are
being dragged on touch-enabled devices. The contents of dragged rows
or columns are shown in an extra `div` element appended to `BTable`,
which has `touch-dragged-cell` class and is referenced as
`draggedCell`. `draggedCell` is invisible until rows or columns are
draged on touch-enabled devices. Once touch-dragging starts,
`draggedCell` becomes visible and tracks the point being touched. It
becomes invisible when touch-dragging ends. The content of
`draggedCell` is given via potentially unsafe `v-html`, though, it
should not matter because only valid HTMLs are assigned.
`_table.scss` introduces styles for `touch-dragged-cell` and its
children. It has `background-color` with translucent (10%)
`$table-background-color`.
* feat(lib): emulate mobile cards dnd effects (BTable)
- Emulates the visual effects of drag&drop on BTable in the mobile card
mode. Cells must be virtically stacked in the mobile card mode.
Addresses the following comment:
- buefy#3941 (comment)
- Also improves the visual effects of drag&drop so that the floating
shapes better imitate the dragged rows.
* chore(docs): add how to start dragging (BTable)
- Adds how to start dragging rows on touch devices to the documentation
page of `BTable`.
* test(lib): refresh the snapshot of Table.spec
- Merging 3c5029b becomes no longer
necessary.
* Includes suppression of ESLint warning on `v-html`
…efy#2681) (buefy#3945) * test(lib): add tests around BTable sort - Adds test cases that test sortable columns of BTable. Tests the following functionalities: - Sort single column - Sort multicolumns - Sort single column with custom sort * feat(lib): support multi-column sort with custom sort - `BTable` now uses `customSort` of each column if exists when it sorts multiple columns. Actual sorting is done by `multiColumnSort` function defined in `src/utils/helpers.js`. To support custom sort, `multiColumnSort` changes the format of the second parameter `sortingPriority` which used to accept an array of dot-separated field paths but now accepts an array of objects with the following fields: - `field`: dot-separated field path - `order`: sort direction: - 'asc' | undefined → ascending order - 'desc' → descending order - `customSort`: function to compare two field values for sorting. The same function given to the column definition. Natural ordering is used if omitted. As far as I checked, `multiColumnSort` is only used by `BTable`. Adds test cases that test multi-column sorting with custom sort. - Includes migration to Vue 3, and Vue Test Utils v2: - Applies `toRaw` before testing if two columns, `column` and `currentSortColumn`, are indentical because they are reactive states. See Vue's documentation for more details: - https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-proxy-vs-original - https://vuejs.org/api/reactivity-advanced.html#toraw - Renames `propsData` → `props`
…uefy#3946) * fix(lib): duplicate navbar dropdown items - Fixes the issue that items in a navbar dropdown were duplicated. `BNavbarDropdown` used to have two `<div>`s that both rendered the default slot. Either of the two `<div>`s was visible depending on the screen size; one had `is-hidden-desktop` and the other had `is-hidden-touch`, and `is-hidden-desktop` and `is-hidden-touch` are mutually exclusive. So there was no problem in terms of the appearance. However, it might been problematic if one wanted to query dropdown items, because duplicate elements might hit the query. See Issue buefy#3939 for more details. I understood these two `<div>`s were introduced to realize a specific requirement for touch devices where dropdown items are always visible unless `collapsible` is `true`. `BNavbarDropdown` now has only one `<div>` that renders the default slot. The `<div>` no longer has `is-hidden-desktop` but conditionally has `is-hidden-touch` if the dropdown is collapsible and inactive. * chore(lib): refresh NavbarDropdown snapshot - Refreshes the `NavbarDropdown` snapshot because the last commit changed the HTML structure.
…buefy#3948) * fix(lib): dislodged tag with attached close button - Fixes the issue that tags with the attached close button were slightly dislodged from other tags. `BTag` with the attached close button is not actually a `.tag` but a `<div>` with `.tags`. Bulma imposes `margin-bottom: -0.5rem` or `margin-bottom: 1.0rem` on `.tags`, and this caused the misalignment. Introduces a new class `inline-tags` to cancel the margin imposed by Bulma. * fix(lib): no margin after tag with attached close - Fixes the issue that `BTag` with the attached close button did not have the margin after it; i.e., a subsequent `BTag` stuck to it. Introduces a left/right margin in a text-direction-aware manner.
…ices (buefy#3961) (buefy#3962) * fix(lib): dislodged hoverable dropdown on mobile screen - Fixes the issue that the contents of a hoverable `BDropdown` was displayed at a wrong position on a mobile (narrow) screen. I initially thought to cancel the effect of `is-hoverable` on narrow screen whether it is on mobile devices or not. But it contradicted to the documentation of `Dropdown`, and I decided to keep the original statement about the behavior of "hover" trigger. buefy#3961 (comment) Since hover events do not make sense on touch devices. "hover" trigger now works like "click" trigger on touch devices, and dropdown contents are shown in a modal when the screen is narrow. To detect actual touch devices, the trigger element of `BDropdown` now handles touch events: touchstart, touchmove, and touchend. The contents of `BDropdown` with "hover" trigger on a touch device pops up only when the trigger is tapped; i.e., at touchend immediately following touchstart. `BDropdown` bears `.is-touch-enabled` class if the trigger is tapped. The modal style is applied when the screen is narrow and: - `.is-hoverable` is disabled - or `.is-touch-enabled` is enabled The `:hover` state is only applied if touch is not enabled (`:not(.is-touch-enabled)`). Delays to reset `isTouchEnabled` to avoid glitches; I observed a ghost of the dropdown menu under the trigger on a touch device. I avoided `@media (hover: hover)` condition for the `:hover` state, because it might cause problems on 2-in-1 devices: buefy#3962 (comment) "hover" trigger precedes "click" trigger in case both are enabled. * feat(docs): dropdown "hover" behavior on touch devices - `ExSimple` example of `BDropdown` explains the new behavior of `BDropdown` with "hover" trigger on touch devices. --------- Co-authored-by: Wesley Ford <[email protected]>
- Fixes the issue that no dropdown showed up if the data array was empty and only the footer slot was registered. Display Autocomplete list if footer slot is registered
* docs: update CHANGELOG.md - Prepends changes from v0.9.27 to v0.9.28. Tells v0.9.26 was withdrawn due to missing `dist` folder in the package. * docs: link CHANGELOG to relevant issues - `CHANGELOG.md` now has working links to relevant issues. I replaced the issue numbers in `CHANGELOG.md` with the Python script available from the following repo: https://github.com/kikuomax/link-commit-hash issue buefy#3960
* feat(docs): add how to install @ntohq/buefy-next - `Home` shows how to install `@ntohq/buefy-next` for people who need Vue 3 support. issue buefy#3967 * feat(docs): add link to ntohq/buefy-next repo - Adds a link to `ntohq/buefy-next` repo to `Home`. issue buefy#3967 * chore(docs): replace "work in progress" - Replaces "work in progress" with "official fork in develoment" on `Home`. Aligns it with the expression used in `README.md`. * feat(docs): add link to ntohq/buefy-next to Start - Adds the link to `ntohq/buefy-next` repo to `Start`. This addresses the following comment: buefy#3967 (comment) issue buefy#3967 * fix(docs): Home overflowed on narrow screen - Fixes the issue that `Home` overflowed and had contents not centered on narrow screens; e.g., mobile portrait, which was pointed at in the following comment: buefy#3969 (comment) There were two problems: 1. The width of the code snippet was not constrained 2. `display: flex` style of `div.hero-body` was problematic Solutions: 1. Adds `max-width: 100%` to `.npm` class. 2. Replaces `display` style of `div.hero-body` to `block` by adding `.is-block` Bulma class. `flex` tried to expand the boundary of `div` to contain the code snippet `$ npm install @ntohq/buefy-next`, and then `Home` ended up with being wider than the screen and having dislodged contents.
buefy#3971) (buefy#3986) * fix(lib): percentage width on columns doubly applied - Fixes the issue that column widths were doubly applied when they were given in percentage ('%'). Interestingly, percentage widths have effect on `<th>` elements in contrast to absolute values; e.g., 200px. So we won't apply the column widths given in percentage to `.th-wrap` elements to prevent widths from being doubly applied. issue buefy#3971
…efy#3863) Migrates to Vue 3 and Vue test-utils v2: - Adds "active" to `emits` of `Autocomplete` - Adapts `Autocomplete.spec.js` to Vue test-utils v2. `await`s `setProps` and `trigger` Co-authored-by: Kikuo Emoto <[email protected]>
…props (buefy#3862) * Expose isActiveDetailRow method in table component column slot props Removes `sync: false` from `mount` call in `TableColumn.spec.js` because it was deprecated and has no effect. `TableColumn.spec.js` causes infinite updates of reactive states, it is likely a bug of `Table`.
* chore(docs): update table column docs for default slot - Adds `toggleDetails` and `isActiveDetailRow` to the props provided by the scoped default slot of `TableColumn`. Addresses the comment: buefy#3862 (review)
…y#3991) fix(lib): potential leak and call after unmount - `NumberInput` clears the timeout on unmount to make sure it is not called after unmount - `Sidebar` clears the timeout on unmount to make sure it is not called after unmount - `SliderThumb` removes listeners in case they might be left in overlooked edge cases fix(docs): dangling listeners - `TheNabver` and `Documentation` removes listeners on unmount chore: migrate to Vue 3 - Replaces `beforeDestroy` with `beforeUnmount`
* docs: update CHANGELOG on v0.9.28 - Adds changes in v0.9.28 since `CHANGELOG` was last updated.
…efy#4000) * Clear timing events and event listeners before component unmounts - The following components clear timeouts before unmounted so that timeout callbacks won't access unmounted component instances: - `Autocomplete` - `ColorpickerHSLRepresentationSquare` - `ColorpickerHSLRepresentationTriangle` - `Dropdown` - `Slider` - `Taginput` - `Tooltip` * feat(lib): revert unnecessary clearTimeout - Reverts unnecessary `clearTimeout` calls in: - `Dialog`: buefy#4000 (comment) - `Loading`: buefy#4000 (comment) - `Modal`: buefy#4000 (comment) - `NotificationNotice`: buefy#4000 (comment) * chore(lib): migrate to Vue 3 - Replaces `beforeDestroy` with `beforeUnmount` --------- Co-authored-by: Kikuo Emoto <[email protected]>
- Adds changes made since `CHANGELOG.md` was last updated.
- Refreshes the outdated snapshot of the Table spec.
64 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes
Proposed Changes
Do not "Squash and merge" to retain individual commits! "Rebase and merge" should work this time.