A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.
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:
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'
Upgrade to sass
in your project, and replace all usage of /
for division in your Sass files with the new math.div()
function.
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
.
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
rem()
function to override Keen UI's default. See #520.yearRange
is a list of years in descending order. See #491.mousedown
event. This avoids closing the modal when selecting text and releasing the mouse with the cursor over the backdrop. See #497.beforeClose
that can be used to dynamically allow or reject closing of the modal on backdrop clicks. See the docs for details.autocapitalize
prop. See #501.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
clear()
method to reset the placeholder. See #510.View all changes: https://github.com/JosephusPaye/Keen-UI/compare/v1.3.0...v1.3.1
refreshSize()
method is no longer needed and has been removed. See #489.hideOnClick
prop to true
to close popover on external clickSee all changes: https://github.com/JosephusPaye/Keen-UI/compare/v1.2.1...v1.3.0
Number
as option. See #472.===
) instead of loose equal (==
). This allows an empty string ''
to be used as the radio or checkbox's value. See #465.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.defaultView
to set the default datepicker view: date
or year
. See #454.minlength
to set the minlength
attribute on the textbox input or textarea.Number
for step
prop. See #460.See all changes: https://github.com/JosephusPaye/Keen-UI/compare/v1.2.0...v1.2.1
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".appendDropdownToBody
to append the dropdown to the document body.dropdownZIndex
to customize the dropdown z-index.yearRange
prop. See #449.size
: auto
, to make the modal's width grow to fit its content.offset
prop, as it's not recommended for interactive poppers (which is what UiPopover is).scale
.zIndex
to customize the z-index of the popover.scale
.zIndex
to customize the z-index of the tooltip.https://github.com/JosephusPaye/Keen-UI/compare/v1.1.1...v1.1.2
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",
v2.5
or later, due to this scoped slot change.disableAnimation
to disable the show/hide animation.focus()
to focus programmatically.sort
for a custom sort function.filter
prop.dropdownPosition
have changed to match Tippy.js. See docs for new values.tooltip
, tooltipPosition
and openTooltipOn
props.loading
is false. Previously, it was hidden with display: none
..ui-button {
cursor: pointer;
}
href
. Setting this prop will render an anchor tag.refreshHeight()
method.scale
is now scale-down
. If you didn't use size="scale"
, this will not affect you.size
.reveal
and hide
events.1
, instead of JavaScript's default which starts at 0
. So, January is now 1
instead of 0
, February is 2
, etc.value
prop. See #45.startOfWeek
to change the starting day of the week in the calendar shown.clear
to clear the selected date.tooltipPosition
prop accepted values have changed to match Tippy.js. See docs for new values.openPicker()
to open the file picker programmatically.clear()
to clear the selected file, if any.dropdownPosition
have changed to match Tippy.js. See docs for new values.tooltipPosition
prop accepted values have changed to match Tippy.js. See docs for new values.loading
is false. Previously, it was hidden with display: none
.mini
.href
prop. Setting this prop will render an anchor tag.href
and target
for menu options. Setting the href
prop will render the menu option as an anchor tag.scale
is now scale-down
. If you didn't use size="scale"
, this will not affect you.alignTop
and alignTopMargin
, for creating modals that are vertically aligned to the top of the viewport.fullscreen
.scale-up
.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>
dropdownPosition
prop to position
, to match UiTooltip. Accepted values have changed to match Tippy.js. See docs for new values.removeOnClose
, no longer needed. All popovers are now removed from the DOM on close.animation
to choose animation style.closeOnScroll
to close an open popover on external scroll.appendToBody
, to choose between appending popover to document.body
or the local parent element.isOpen()
, used to determine if the popover is open.reveal
and hide
.disabled
, to disable the popover.offset
, to change the popover's offset from the trigger element.transform
only (GPU accelerated), remove ::before/::after pseudo elements used for previous animation.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.clearSelection()
to clear the current selection.clearQuery()
to clear the current search query.focus()
to focus programmatically.sort
for a custom sort function.filter
prop.focus()
to focus programmatically.min
and max
to specify a custom slider range. See #368.queue-end
, emitted when the last snackbar in a queue is hidden.UiTabs
tab-change
event handler is now the tab instance, not the id. To get the id, use tab.id
.refreshIndicator
method, no longer needed.tab-click
, emitted when a tab is clicked, whether or not the tab is selected.confirmTabChange
, A function that will be called for confirmation when the user attempts to change tabs.UiTab
show
prop, use v-for
with a filtered array of tabs instead.icon
(string) and iconProps
(object) props, use the header
slot instead.v-for
. Fixes #349.header
slot.focus()
to focus programmatically.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>
position
prop accepted values have changed to match Tippy.js. See docs for new values.animation
to choose animation style.appendToBody
, to choose between appending tooltip to document.body
or the local parent element.