v1.4.0

v1.4.0

Potentially Breaking Change: Upgraded from node-sass to sass, and fixed warnings about / division (see #529). node-sass is now deprecated, and sass no longer uses the / operator for division.

If you import Keen UI components from the source folder (e.g. import UiButton from 'keen-ui/src/UiButton.vue), this release might break your project due to the switch from node-sass to sass. There are a few options to fix this:

1. If you don't need Sass customisation, import from the compiled components instead of the source components. The compiled components come with plain CSS instead of Sass. Here's an example of changing from a source component import to a compiled component import:

   -import UiButton from 'keen-ui/src/UiButton.vue'
   +import { UiButton } from 'keen-ui'

2. Upgrade to sass in your project, and replace all usage of / for division in your Sass files with the new math.div() function.

3. Pin your version of Keen UI to the previous release (1.3.2) to avoid getting the new version with the breaking change until you're ready to upgrade to sass.

UiPopover

• Add new props closeOnEsc and closeOnExternalClick for more control over when the popover closes. See #536.

---

View all changes: v1.3.2...v1.4.0

v1.3.2

v1.3.2

Sass customisation

• Add the ability to define a custom rem() function to override Keen UI's default. See #520.

UiCalendar

• Fix the prev/next month buttons being incorrectly disabled when yearRange is a list of years in descending order. See #491.

UiCollapsible

• Hide collapsible content overflow only during the open/close animation. See #519.

UiModal

• Close on backdrop click only if the backdrop also got a mousedown event. This avoids closing the modal when selecting text and releasing the mouse with the cursor over the backdrop. See #497.
• Added a new prop beforeClose that can be used to dynamically allow or reject closing of the modal on backdrop clicks. See the docs for details.

UiPopover

• Support rendering inside a Shadow DOM. See #518.

UiSwitch

• Fix UiSwitch thumb overlapping open modals in certain cases due to z-index. See #514.

UiTextbox

• Add autocapitalize prop. See #501.
• Fix a value of zero being treated as falsy in UiTextbox value length calculation. Previously, when the value was the number 0, the textbox would be considered empty. See #516.

View all changes: v1.3.1...v1.3.2

v1.3.1

v1.3.1

UiFileupload

• Potentially Breaking: Update UiFileupload's clear() method to reset the placeholder. See #510.

View all changes: v1.3.0...v1.3.1

v1.3.0

UiSlider

• Potentially Breaking: Update slider to work when initially-hidden, e.g. in a tab or modal. The refreshSize() method is no longer needed and has been removed. See #489.

UiPopover

• Change Tippy's hideOnClick prop to true to close popover on external click

---

See all changes: v1.2.1...v1.3.0

v1.2.1

UiSelectOption

• Allow a Number as option. See #472.

UiCheckbox, UiRadio, UiRadioGroup

• Change selected check to use strict equals (===) instead of loose equal (==). This allows an empty string '' to be used as the radio or checkbox's value. See #465.

UiCheckbox

• Apply border-radius to checkmark background. Also switch background from ::before pseudo element to an actual element: .ui-checkbox__checkmark-background. This avoids visual artifacts that appear when applying border-radius to a pseudo element. See #471.

UiDatepicker

• Add new prop defaultView to set the default datepicker view: date or year. See #454.

UiTextbox

• Add new prop minlength to set the minlength attribute on the textbox input or textarea.
• Allow a Number for step prop. See #460.
• Ensure floating label doesn't overflow parent when scaling up. See [#447](https://github.com/JosephusPaye/Keen-UI/issues/

---

See all changes: v1.2.0...v1.2.1

v1.2.0

UiCalendar (new)

• Added a new calendar component for showing calendars. Using a scoped slot, you can specify a custom template that will be used to render each date in the calendar. This could be used to add things like events to the calendar.

UiDatepicker

• Breaking Remove OK and Cancel button in modal picker. Now, like the popover picker, dismissing the picker without a selection is "Cancel" and selecting a date is "OK".
• Rewrite internal calendar for better semantics and accessibility.
• Removed month switch animation. This unnecessarily slows down the user when switching through many months.
• Add new prop appendDropdownToBody to append the dropdown to the document body.
• Add new prop dropdownZIndex to customize the dropdown z-index.
• Fix implementation to respect yearRange prop. See #449.
• Keep dropdown open on scroll

UiModal

• Add new size: auto, to make the modal's width grow to fit its content.

UiPopover

• Upgrade to Tippy.js 4.
• Breaking: Remove offset prop, as it's not recommended for interactive poppers (which is what UiPopover is).
• Add new animation: scale.
• Add new prop zIndex to customize the z-index of the popover.

UiSelect

• Keep dropdown open on scroll

UiTooltip

• Upgrade to Tippy.js 4.
• Add new animation: scale.
• Add new prop zIndex to customize the z-index of the tooltip.

v1.1.2

UiDatepicker

• Fix loss of popover reference when disabled and re-enabled. See #435.

v1.1.1...v1.1.2

v1.1.1

UiDatepicker

Fix month transition when current date is not in target month. See #434.

v1.1.0...v1.1.1

v1.0.2

UiDatepicker

Fix month transition when current date is not in target month. See #434.

v1.1.0

There are breaking changes in this release. Read through and update your usage where required. The upgrade should take less than an hour. If you find any changes not documented here, please file a new issue.

Note: currently Keen UI doesn't follow semver, and there may be breaking changes in minor x.x releases. To avoid these breaking changes, use the ~ version constraint to lock to a specific minor version, restricting updates to patch releases only. Example, in package.json:

-"keen-ui": "^1.1.0",
+"keen-ui": "~1.0.0",

General

• Breaking: Bumped required Vue version to v2.5 or later, due to this scoped slot change.
• Breaking: Rewrote global prop configuration system to be simpler and more reliable. See updated Customization guide for details.
• Rewrote Sass customization guide for clarity.

UiAlert

• Add new prop disableAnimation to disable the show/hide animation.

UiAutocomplete

• Add new method focus() to focus programmatically.
• Add new prop sort for a custom sort function.
• Pass default filter function as third parameter to filter prop.

UiButton

• Breaking: Accepted values for prop dropdownPosition have changed to match Tippy.js. See docs for new values.
• Fix ripple position starting off when directly clicking an inner element. Fixes #220.
• Add tooltip, tooltipPosition and openTooltipOn props.
• Make focus ring transition to fill the button. Previously, it stopped halfway. Fixes #205.
• Remove UiProgressCircular from the DOM when loading is false. Previously, it was hidden with display: none.
• Remove pointer cursor, to match default HTML buttons. If you want the hand pointer on buttons by default, add:

  .ui-button {
      cursor: pointer;
  }

• For secondary buttons, use button color as background for hover and focus.
• Add new prop href. Setting this prop will render an anchor tag.

UiCollapsible

• Breaking: Remove no longer needed refreshHeight() method.
• Refactor toggle transition to be smoother and less janky.

UiConfirm

• Breaking: Default transition scale is now scale-down. If you didn't use size="scale", this will not affect you.
• Add new prop size.
• Document reveal and hide events.

UiDatepicker

• Breaking: The month of the submitted value now starts at 1, instead of JavaScript's default which starts at 0. So, January is now 1 instead of 0, February is 2, etc.
• Allow a string for value prop. See #45.
• Add new prop startOfWeek to change the starting day of the week in the calendar shown.
• Add new method clear to clear the selected date.

UiFab

• Breaking: tooltipPosition prop accepted values have changed to match Tippy.js. See docs for new values.

UiFileupload

• Add new method openPicker() to open the file picker programmatically.
• Add new method clear() to clear the selected file, if any.

UiIconButton

• Breaking: Accepted values for prop dropdownPosition have changed to match Tippy.js. See docs for new values.
• Breaking: tooltipPosition prop accepted values have changed to match Tippy.js. See docs for new values.
• Remove UiProgressCircular from the DOM when loading is false. Previously, it was hidden with display: none.
• Remove pointer cursor, to match default HTML buttons.
• For secondary icon buttons, use button color as background for hover and focus.
• Add new size: mini.
• Add href prop. Setting this prop will render an anchor tag.

UiMenu and UiMenuOption

• Add new props href and target for menu options. Setting the href prop will render the menu option as an anchor tag.
• Fix focus containment when tabbing backwards.

UiModal

• Breaking: Default transition scale is now scale-down. If you didn't use size="scale", this will not affect you.
• Add new props alignTop and alignTopMargin, for creating modals that are vertically aligned to the top of the viewport.
• Add new size fullscreen.
• Add new transition scale-up.

UiPopover

• Breaking: Switch positioning library to Tippy.js, which uses Popper.js.
• Breaking: trigger prop is now a DOM Element, VueComponent instance, or selector string. If no trigger is provided or the selector doesn't match any element, the popover's immediate parent element is used as the trigger.

  <!-- Instead of: ref + trigger -->
  <button ref="button">My Button</button>
  <ui-popover trigger="button">My Popover</ui-popover>
  
  <!-- Use: nested <ui-popover> in target element -->
  <button>
      My Button <ui-popover>My Popover</ui-popover>
  </button>

• Breaking: Rename dropdownPosition prop to position, to match UiTooltip. Accepted values have changed to match Tippy.js. See docs for new values.
• Remove prop removeOnClose, no longer needed. All popovers are now removed from the DOM on close.
• Add new prop animation to choose animation style.
• Add new prop closeOnScroll to close an open popover on external scroll.
• Add new prop appendToBody, to choose between appending popover to document.body or the local parent element.
• Add new method isOpen(), used to determine if the popover is open.
• Add new events reveal and hide.
• Add new prop disabled, to disable the popover.
• Add new prop offset, to change the popover's offset from the trigger element.

UiProgressLinear

• Rewrite animation to use transform only (GPU accelerated), remove ::before/::after pseudo elements used for previous animation.

UiRippleInk

• Breaking: trigger prop is now a DOM Element instance or selector string. If no trigger is provided or the selector doesn't match any element, the ripple's immediate parent element is used as the trigger.
• Fix incorrect ripple position when clicking directly on trigger's inner elements. Fixes #220.

UiSelect

• Add new method clearSelection() to clear the current selection.
• Add new method clearQuery() to clear the current search query.
• Add new method focus() to focus programmatically.
• Add new prop sort for a custom sort function.
• Pass default filter function as third parameter to filter prop.

UiSlider

• Add new method focus() to focus programmatically.
• Add new props min and max to specify a custom slider range. See #368.

UiSnackbarContainer

• Add new event queue-end, emitted when the last snackbar in a queue is hidden.

UiTabs and UiTab

• UiTabs

  • Breaking: argument passed to tab-change event handler is now the tab instance, not the id. To get the id, use tab.id.
  • Breaking: Remove refreshIndicator method, no longer needed.
  • Change active tab indicator animation, to fix issues related to window resizing and initially hidden tabs. Fixes #328.
  • Add new event tab-click, emitted when a tab is clicked, whether or not the tab is selected.
  • Add new prop confirmTabChange, A function that will be called for confirmation when the user attempts to change tabs.

• UiTab

  • Breaking: Remove show prop, use v-for with a filtered array of tabs instead.
  • Breaking: Remove icon (string) and iconProps (object) props, use the header slot instead.
  • Tabs can now be created using v-for. Fixes #349.
  • HTML can now be used in tab headers, using the header slot.

UiTextbox

• Add new method focus() to focus programmatically.

UiTooltip

• Breaking: Switch positioning library to Tippy.js, which uses Popper.js.
• Breaking: trigger prop is now a DOM Element, VueComponent instance, or selector string. If no trigger is provided or the selector doesn't match any element, the tooltip's immediate parent element is used as the trigger.

  <!-- Instead of: ref + trigger -->
  <button ref="button">My Button</button>
  <ui-tooltip trigger="button">My Tooltip</ui-tooltip>
  
  <!-- Use: nested <ui-tooltip> in target element -->
  <button>
      My Button <ui-tooltip>My Tooltip</ui-tooltip>
  </button>

• Breaking: position prop accepted values have changed to match Tippy.js. See docs for new values.
• Add new prop animation to choose animation style.
• Add new prop appendToBody, to choose between appending tooltip to document.body or the local parent element.