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: https://github.com/JosephusPaye/Keen-UI/compare/v1.3.2...v1.4.0

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: https://github.com/JosephusPaye/Keen-UI/compare/v1.3.1...v1.3.2

v1.3.1

UiFileupload

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

View all changes: https://github.com/JosephusPaye/Keen-UI/compare/v1.3.0...v1.3.1

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: https://github.com/JosephusPaye/Keen-UI/compare/v1.2.1...v1.3.0

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: https://github.com/JosephusPaye/Keen-UI/compare/v1.2.0...v1.2.1

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.

UiDatepicker

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

https://github.com/JosephusPaye/Keen-UI/compare/v1.1.1...v1.1.2

UiDatepicker

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

UiDatepicker

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

https://github.com/JosephusPaye/Keen-UI/compare/v1.1.0...v1.1.1

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.

• Upgrade Vue to v2.4.2 and fix template warnings. See #268.
• Add aria-describedby attribute to UiTooltip
• Fix bug where help and error content provided via slot isn't shown unless the help or error props are set. Affects UiAutocomplete, UiCheckboxGroup, UiDatepicker, UiRadioGroup, UiSelect, and UiTextbox. See #204.
• Allow null for UiAutocomplete and UiTextbox value prop. See #253.
• Allow UiTooltip trigger prop to be a VueComponent instance. See #204.
• Add checked attribute to the input element for UiRadio. See #207.
• Fix error being thrown when using UiRippleInk with SVG elements on touch devices. See #236.
• Fix minor errors and dead links in the docs
• Remove Material Icons webfont and use inline SVG icons in the docs
• Update contributing guidelines with information about linting, BEM and using the next branch

There are several breaking changes in this release, as the components have been re-written from scratch to support Vue 2. However, this release marks a stabilization of the API (hence v1.0) and breaking changes will be avoided in 1.x where possible.

Please consult the docs for component API changes.

Highlights

• New components: UiCheckboxGroup, UiDatepicker and UiFileupload
• Documentation for customizing the components
• Global configuration now available for certain component props
• CSS switched from Stylus to Sass, adopting the BEM naming convention
• Component sizing switched from px to rem, using a root font size of 16px. Changing this font size will scale the components up/down appropriately.
• Component event names switched from past tense to present to be more in line with the native DOM events
• Remove validatorjs and draggabilly dependencies
• Now shipping both minified and unminified versions of standalone component files in lib/
• Fix several issues and unnecessary API limitations

New

• UiAutocomplete, UiSelect, and UiTextbox: Add ui-input::set-validity event for setting the validity and a custom error message from outside the component
• UiAutocomplete and UiSelect: Add new filter prop for defining a custom search filter function
• UiAutocomplete and UiSelect: Add new prop keys to allow for redefining the text, value and image keys
• UiAutocomplete and UiTextbox: Add autofocus prop
• UiAutocomplete: Add opened, and closed events
• UiAutocomplete: Add highlighted, highlight-overflow and selected events (thanks @rowanwins)
• UiAutocomplete: Add autoHighlightFirstMatch and cycleHighlight props for customizing highlight behaviour (thanks @rowanwins)
• UiButton and UiIconButton: Add buttonType prop
• UiCheckbox: New model and value prop combination can be used for connecting multiple checkboxes to a single model (array).
• UiFab and UiIconButton: Add openTooltipOn prop for customizing which events cause the tooltip to show
• UiMenu and UiPopover: Add ui-dropdown::open, ui-dropdown::close and ui-dropdown::toggle events
• UiMenu and UiMenuOption: Add partial and closeOnSelect props, to allow for using custom HTML in menu options
• UiModal: Add revealed and hidden events, for detecting when the show/hide transition ends
• UiSelect: Add new optionsLoaded for selects with dynamic options
• UiSelect: Allow for more flexibity in the format of the options and default props. options now supports a plain array, e.g. ['Red', 'Blue', 'Green'] as well as an array of objects whose keys can be redefined to something other than text and value. default now supports any string, number or object, or an array of those, (provided the string, number or value key of the object matches with an option) - (thanks @qetee)
• UiSelect: Add ui-select::set-selected event for programmatically setting the currently selected value/values
• UiSnackbarContainer: Add allowHtml attribute to snackbar object, which allows for HTML in the message attribute
• UiTabs: Add id prop
• UiTabs: Add ui-tabs::select event for programmatically changing the active tab

Fixes

• UiAlert: Fix reactivity of icon prop
• UiAutocomplete and UiTextbox: Fix debounce prop handling
• UiAutocomplete, UiSelect and UiTextbox: Update validation-rules prop to accept Array, for specifying regex validation rules that use the pipe | character.
• UiButton and UiIconButton: Fix dropdownPosition prop not being passed to UiPopover
• UiCollapsible: fix height issues when using dynamic content in the collapsible body (thanks @citycide). Note that you should still trigger ui-collapsible::refresh-height when you change the collapsible body content.
• UiFab and UiIconButton: Set icon width to 100% to fix horizontal centering in Safari on macOS
• UiMenu, UiModal, and UiPopover: Make sure lastFocussedElement exists before attempting to return the focus. This fixes an error with Webpack hot reloading (thanks @lesion).
• UiMenu and UiPopover: Automatically adjust horizontal positioning to keep dropdown in the viewport (thanks @AlexandreBonaventure)
• UiProgressLinear: Fix color incorrectly defaulting to "color-color-primary" (thanks @lesion)

Breaking

• UiCheckbox: Rename value prop to model, value now maps directly to the checkbox input's value attribute and is used with connecting multiple checkboxes to a single array.
• UiMenu and UiMenuOption: Rename UiMenuItem component to UiMenuOption
• UiSelect: Remove noResults prop in favor of setting optionsLoaded to true and setting an empty array for options
• UiSelect: Rename disableFiltering prop to optionsDynamic, because the prop does more than just disabling filtering
• UiTextbox: autocomplete prop type changed to String, to allow for configuring browser autocomplete

Docs

• Add View Source links for components and examples

New

• Added UiSelect component
• Added UiSlider component

Fixes

• Added pointer cursor to all relevant interactive components (UiButton, UiIconButton, UiFab, UiMenuItem, UiCheckbox, UiRadio, UiSwitch)
• Fixed z-index issue with tooltips and dropdowns in a modal
• UiIcon: Vertically align icons to middle for use inline with text
• UiMenu: Show scrollbar when menu height exceeds viewport height
• UiAutocomplete, UiRadioGroup, UiRating and UiTextbox: Keep help text visible when disabled
• UiIconButton and UiFab: Fixed horizontal centering of icon in Firefox
• UiIconButton: Changed display to inline-flex
• UiCollapsible: Fixed header vertical centering in IE

Breaking

• UiMenu and UiMenuItem: Renamed keyboardShortcut and showKeyboardShortcuts props to secondaryText and showSecondaryText, menu options should use the secondaryText property for showing secondary text like keyboard shortcuts and badges
• UiButton and UiIconButton: Renamed showMenuKeyboardShortcuts prop to showMenuSecondaryText, menu options should use the secondaryText property for showing secondary text like keyboard shortcuts and badges

New

• Add individual standalone components in the lib/ directory.
• Document AMD usage