A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.
MIT License
Bot releases are visible (Hide)
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
Published by JosephusPaye almost 3 years ago
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
Published by JosephusPaye about 4 years ago
clear()
method to reset the placeholder. See #510.View all changes: https://github.com/JosephusPaye/Keen-UI/compare/v1.3.0...v1.3.1
Published by JosephusPaye over 4 years ago
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
Published by JosephusPaye almost 5 years ago
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
Published by JosephusPaye over 5 years ago
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.Published by JosephusPaye over 5 years ago
https://github.com/JosephusPaye/Keen-UI/compare/v1.1.1...v1.1.2
Published by JosephusPaye over 5 years ago
Fix month transition when current date is not in target month. See #434.
Published by JosephusPaye over 5 years ago
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
Published by JosephusPaye over 5 years ago
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.v2.4.2
and fix template warnings. See #268.aria-describedby
attribute to UiTooltiphelp
or error
props are set. Affects UiAutocomplete, UiCheckboxGroup, UiDatepicker, UiRadioGroup, UiSelect, and UiTextbox. See #204.null
for UiAutocomplete and UiTextbox value
prop. See #253.trigger
prop to be a VueComponent instance. See #204.checked
attribute to the input
element for UiRadio. See #207.next
branchThere 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.
px
to rem
, using a root font size of 16px
. Changing this font size will scale the components up/down appropriately.lib/
Published by JosephusPaye about 8 years ago
ui-input::set-validity
event for setting the validity and a custom error message from outside the componentfilter
prop for defining a custom search filter functionkeys
to allow for redefining the text
, value
and image
keysautofocus
propopened
, and closed
eventshighlighted
, highlight-overflow
and selected
events (thanks @rowanwins)autoHighlightFirstMatch
and cycleHighlight
props for customizing highlight behaviour (thanks @rowanwins)buttonType
propmodel
and value
prop combination can be used for connecting multiple checkboxes to a single model (array).openTooltipOn
prop for customizing which events cause the tooltip to showui-dropdown::open
, ui-dropdown::close
and ui-dropdown::toggle
eventspartial
and closeOnSelect
props, to allow for using custom HTML in menu optionsrevealed
and hidden
events, for detecting when the show/hide transition endsoptionsLoaded
for selects with dynamic optionsoptions
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)ui-select::set-selected
event for programmatically setting the currently selected value/valuesallowHtml
attribute to snackbar object, which allows for HTML in the message
attributeid
propui-tabs::select
event for programmatically changing the active tabicon
propdebounce
prop handlingvalidation-rules
prop to accept Array, for specifying regex validation rules that use the pipe |
character.dropdownPosition
prop not being passed to UiPopoverui-collapsible::refresh-height
when you change the collapsible body content.100%
to fix horizontal centering in Safari on macOSlastFocussedElement
exists before attempting to return the focus. This fixes an error with Webpack hot reloading (thanks @lesion)."color-color-primary"
(thanks @lesion)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.noResults
prop in favor of setting optionsLoaded
to true
and setting an empty array for options
disableFiltering
prop to optionsDynamic
, because the prop does more than just disabling filteringautocomplete
prop type changed to String, to allow for configuring browser autocompletePublished by JosephusPaye over 8 years ago
display
to inline-flex
keyboardShortcut
and showKeyboardShortcuts
props to secondaryText
and showSecondaryText
, menu options should use the secondaryText
property for showing secondary text like keyboard shortcuts and badgesshowMenuKeyboardShortcuts
prop to showMenuSecondaryText
, menu options should use the secondaryText
property for showing secondary text like keyboard shortcuts and badgesPublished by JosephusPaye over 8 years ago
lib/
directory.