- BREAKING. Controls. Renamed
valueToUrl/valueFromUrl
tovalueToStorage/valueFromStorage
- Combobox controls (Select, SelectMany, Date, Time). Added method
.renderPopup()
to have ability to override popup options - SelectControl. SelectManyControl. RadioControl.
- Allowed to use mixed types in
$options.items
. Improved JSDoc (added example) - Allowed to prevent closing menu via ev.preventDefault =>
$options.items = [{value: 1, text: (v, li) => {... li.onclick = (e) => e.preventDefault();... } }]
- Allowed to use complex values with saving to storage (refactored methods
valueToStorage/valueFromStorage
)
- Allowed to use mixed types in
- HTML. Fixed intellisense (html.json was missed in the package)
- Styles. Textbased controls. Added
opacity: 1
forbutton[clear]/prefix/postfix
as fix when controls in a flex-row and it resizes on hover - Combobox controls (Select, SelectMany, Date, Time). Memory leak: menu is closed but not removed when click on body outside control
- WUPTimeObject. Add init by date to constructor
- DateControl. Add sync with TimeControl (value, min, max)
- Helpers. Deprecate
mathSumFloat
in favor ofmathFixFP
- Styles.
- Moved all icons to single
./styles.ts const WUPcssIconSet
to allow re-use it - Added init root styles on script run (to allow re-use css variables before any WUP component is appended)
- Moved all icons to single
- Modal
- Allow to prevent auto closing via
form.$onSubmitEnd = (e) => e.preventDefault()
- Allow to prevent auto closing via
form.$onSubmit = (e) => e.preventDefault()
- Allow to prevent auto closing via
- Controls. Added css-animation for box-shadow/borders
- RadioControl. Added comparison by item.id to allow use cloned items/value
- NumberControl. New options
scale
&offset
- Form
- Added
form.$validate(...)
for manual triggering validations - Changed spinner to custom friendly looked
- Added
- Global. Custom event callbacks like $onChange(e) have
e.target: null
- Controls
- Wrong TS-type on $onChange() callback
- Form
- Focus lost on pending (because every active element is disabled). Refactored pending state: elements changes to
readonly
+ applied css-style [busy] + added attributearia-busy
to form - Possible to submit by Enter key in pending state
- Focus lost on pending (because every active element is disabled). Refactored pending state: elements changes to
- ModalElement. button[close] is overlayed by header
- Global
- Added Preact tsx/jsx support
- Controls
- Added
text-align: start
by default to avoid unexpected inheritance - RadioControl. Added attribute
[checked]
to re-style whole item
- Added
- ModalElement. Wrong behavior on confirmModal + replace: true + click outside on previous/hidden modal
- PopupElement. Popup blinks on fast open+close
- Controls
- Missed css-var
--base-margin
- Missed style
flex: 1
for switch/checkbox controls
- Missed css-var
- ModalElement demo
- Global
- Added multi language support: override
window.__wupln
(to dynamic change) or global__wupln
during the compilation (for static change) - Added css variable
--base-margin
to unify margins for all elements - Added support HTML intellisense for WebStorm (no action required from developer/user side)
- Added multi language support: override
- helper focusFirst. Added option
isFocusLast
& static querySelector (possible to get fromfocusFirst.$selector
) - FormElement
- Increased height of
button[type=submit]
- Added callback
$onSubmitEnd
& event$submitEnd
- Added public method
$submit()
for manual calling - Web Accessibility: auto-tie with closest heading via aria-labelledby
- Increased height of
- Text based controls
- Added css variable
--ctrl-label-active-pos
to simplify customization of label position
- Added css variable
- SelectControl. SelectManyControl. Improved handling promise rejection in
$options.items
- SelectManyControl. Added scrolling style & restricted max-height by default
- helper findScrollParent. Returns parent despite on parent.child with position-fixed
- helper promiseWait. Throws error twice instead of 1 time
- PopupElement. Popup hidden if target inside content with position: fixed and target.parent.parent is scrollable
- DropdownElement. Target button is overflowed by menu in animation-stack
- PasswordControl. Input height is changed on button[eye] click
- Text based controls
- Sometimes weird blink & poor render during the animation on focus
- Button clear changes control size on hover if parent is flexbox
- SelectControl. SelectManyControl. storageKey + items as Promise don't work together
- CircleElement. Update options/items colors triggers animated re-render with blink
-
Global.
-
Added static
.$use()
. Call it before using element:WUPTextControl.$use()
(self-registration by import works now and will be removed in the future) -
Renamed css-vars:
--ctrl-select-menu-hover
>>>--menu-hover-bg
--anim-time
>>>--anim-t
--popup
>>>popup-text
--popup-anim
>>>popup-anim-t
--tooltip
>>>tooltip-text
--spin-speed
>>>spin-t
--btn-submit
>>>--btn-submit-text
--ctrl
>>>--ctrl-text
--ctrl-clr-width
>>>--ctrl-clr-w
--ctrl-select-item
>>>--ctrl-select-item-text
--ctrl-time-off
>>>--ctrl-time-off-text
--ctrl-select-menu-hover
>>>--menu-hover-bg
-
Refactored & unified custom events. Now every event contains detail as object:
e.detail = { ... }
-
-
- z-index is changed from
90000
to8000
- Renamed
show/hide
toopen/close
(the same for DropdownElement):- enum
ShowCases
>>>PopupShowCases
- enum
HideCases
>>>PopupHideCases
- option
showCase
>>>openCase
- method
$show()
>>>$open()
- method
$hide()
>>>$close()
- state-prop
$isShown
>>>$isOpened
- event
$onShown
>>>$onOpened
- etc.
- enum
- Refactored/normalized enum PopupShowCases
- z-index is changed from
-
Combobox controls (Select, SelectMany, Date, Time)
- Renamed
show/hide
toopen/close
:- enum
ShowCases
>>>MenuShowCases
- enum
HideCases
>>>MenuHideCases
- event
$showMenu
>>>$openMenu
- event
$hideMenu
>>>$closeMenu
etc.
- enum
- Renamed
Fixes:
- SelectControl. SelectManyControl. Error message in console if
$options.items = new Promise
&$initValue = ...
BREAKING CHANGES:
- Controls. Renamed some css-vars (this is last big breaking change)
- FormElement. Option
autoSave
renamed toautoStore
Fixes:
- TypeScript. Updated CustomEvents
$onWillShow
,$onWillHide
,$onChange
- Text based controls
- Label doesn't go to top on browser autofill
- Value missed & undo/redo failed on browser autofill
- SelectManyControl
- Showing button[clear] on hover changes height
- Focus sometimes is wrong when user removes item & reverts changes via click on button[clear=back]
New/Features:
- Added built-in colors for darkMode. Append attr
[wupdark]
to body to use it. Don't forget to define general text & background colors yourself
BREAKING CHANGES:
- Internals (Note: Skip this if you haven't created custom Elements inherited from WUP...)
- Added auto-mapping between attributes <=> options based on key-values in
$defaults
- TypeScript. Removed interface
Defaults
. Merged with interfaceOptions
and now contains all fields as required - Now removing attributes/options always rollbacks to value defined in
$defaults
- Method
getAttr
changed toparseAttr
- Added auto-mapping between attributes <=> options based on key-values in
- Global
- All attributes refactored and starts with
w-...
(attrs[readonly]
&[disabled]
without changes) - Style rules changed from
[reverse]
to[w-reverse]
for RadioControl, SwitchControl, CheckControl & PasswordControl
- All attributes refactored and starts with
- Controls
- Option
skey
renamed tostorageKey
- Option
storageKey
changes$value
instead of$initValue
and now triggers$onChange
event on init (added enum-keySetValueReasons.storage
) - Removed css
maxHeight
for [error] popup - Changing
$initValue
isn't fired$onChange
event anymore
- Option
- CircleElement. Renamed option minsize to minSize
- SpinElement
- Defaults
fit
&overflowTarget
=auto
(wasnull
) - Attribute
w-overflowtarget
expectsauto
orquerySelector
string (previously expected global-refwindow.someObj
)
- Defaults
Fixes:
- TypeScript
- Updated version & types
- Refactored & fixed some types
- helper observer. excludeNested doesn't exclude when re-assign nested properties
- RadioControl. autoFocus makes focused 1st but not active input when
form.$options.autoFocus=true
- SelectControl. Wrong error
Not found in items
when re-assignitems
&initValue
after a time - SelectManyControl
- Wrong error
Not found in items
when re-assignitems
&initValue
after a time - Removing item from value affects on
$initValue
- $isChanged is wrong if user removed then added same value
- Wrong error
- DateControl
- Validations
min
,max
,exclude
don't exclude time in comparison - Validations messages
min
&max
isn't formatted according toutc
- Error message doesn't appear for invalid input by pressing Enter
- Validation
_parse
doesn't work when added extra char and another char auto-removed (shifted & removed) - History undo works wrong is select all + type new + Ctrl-Z
- Validations
- TimeControl
- Validation
_parse
doesn't work when added extra char and another char auto-removed (shifted & removed) - Error message doesn't appear for invalid input by pressing Enter
- Validation
- CalendarControl. Removed useless background for button month in the header
New/Features:
- Global. Added support HTML intellisense in VSCode: follow instructions to use this
- Controls
button[clear]
not hidden anymore for required controls (user must have ability to clear all at once & put new text). To rollback it use css-rulewup-text[required] button[clear] { display: none; }
button[clear]
visible only on focus & hover. To rollback it use csswup-text button[clear] { display: block!important; }
- updated hover & focus styles
- Combobox controls (Select, Date, Time)
- Now menu is hidden by default when
autoFocus
enabled. To revert to previous behavior useWUPSelectControl.$defaults.showCase |= ShowCases.onFocusAuto
- Now menu is hidden by default when
- SelectControl.SelectManyControl.
- Added validationRules
minCount
&maxCount
- Updated hover style for menu items. User css-var
--ctrl-select-menu-hover
to change
- Added validationRules
BREAKING CHANGES:
- Internals (Note: If you haven't created custom Elements inherited from WUP... - don't pay attention on it).
- Refactored
$options
initialization. So all inherited Elements must override only$defaults
and useTOptions
as generic instead of overriding $options like it was before. - Deprecated static property nameUnique
- Controls. Disable
maxWidthByTarget
for error-popup - Global. Improved styles performance via refactoring selectors
- Refactored
Fixes:
- Text based controls
- $initValue + click on button[clear] + Ctrl+Z => history undo does't work
- button[clear] isn't updated on
$initValue
or$options.clearActions
changing - wrong behavior_when user removes/inserts text in the start
- SelectControl
- clearing input + click outside doesn't clear value
$options.readOnlyInput=7
must be ignored whenallowNewValue
enabled- improved input delete behavior for
$options.multiple
- menu isn't refreshed after button-clear click
- selected menu-item isn't into view sometimes with 1st opening popup
- Combobox controls (Select, Date, Time). Popup shows/hides when user select text with mouseUp on label (outside input)
- CalendarControl.
$value=undefined
doesn't reset selected - NumberControl.
- Alt+MouseWheel changes ±0.1 when decimal isn't allowed
- Alt+MouseWheel changes ±0.1 but Alt-keyUp moves focus to browser panel
- CircleElement.
- wrong tooltip position when segment is half of circle
- wrong console.error when
items=[{value:2}]
- *wrong label-value when item value < option minsize*
- edges of small segment are not rounded according to corner
- TimeControl.
- menu items with wrong sizes and text not aligned
- extra pixel when scrolled if content size is decimal h=239.7
New/Features:
- Controls. Event
$change
and callback$onChange
has propSetValueReason.initValue
now - Internals. Improved memory consumption & performance via excluding nested props of $options to be observed
- Text based controls
- History undo/redo (Ctrl+Z, Ctrl+Y, Ctrl+Shift+Z). Refactored, fixed & optimized via storing only changes
- PopupElement. Added showCase alwaysOff (popup hidden by default)
- CircleElement. Added percentage for tooltips
- TimeControl. Added option
menuButtonsOff
to hide buttons
BREAKING CHANGES:
- Controls.
$options.clearAction
=> refactored enum-names & improved behavior/dynamic-icon forbutton[clear]
Fixes:
- SelectControl.SelectManyControl
- menu scrolled to 1st selected item if even select last one (when multiple is allowed)
- $options.items[0] !== items[0] because wrapped to observer
- Unable to clear value with Backspace+Enter
- SelectManyControl. Menu hides when user selects all items - but it's maybe wrong
- RadioControl
- $options.items[0] !== items[0] because wrapped to observer
$options.readOnly
doesn't work - user able to change value
- CalendarControl
- Wrong size of monthPicker if previously scroll dayPicker to min/max date
- User can't scroll when
$initValue
>$options.max
- DateControl. Menu isn't closed if click on the selected date
- TextareaControl
- Exception when try to clear empty control
Ctrl + Z
doesn't revert changes
- NumberControl. option
format
isn't applied on init - Text based controls. Mask. Wrong behavior_when user removes/inserts text in the middle
- Text based controls - Improved undo/redo overall
- Ctrl+Z sometimes is wrong
- Ctrl+Я doesn't work. Need support for different languages
- Press Escape, Ctrl+Z => no undo-action
- No undo-action when shake iPhone
- Controls.Styles. button[clear] has shifted icon when mouse hover
New/Features:
- helper observer. Added option
excludeNested
to exclude some nested properties from observer - SelectControl.SelectManyControl.
$options.readOnlyInput
can be number X to enable autoMode where input.readOnly = items.length < X. - Combobox controls (Select, Date, Time). readOnlyInput moved to $defaults
- Controls.Global
- Improved value comparison (static method
$isEqual
) to compare by.id
. So now don't need to worry about complex objects with id's (mostly related toSelectControl.$options.items
&RadioControl.$options.items
) - Added readonly property
$isRequired
based on$options.validations.required
- Improved value comparison (static method
- CalendarControl. DateControl.
$options.startWith
can be string-date
Fixes:
- Controls.
$initValue
overrides$value
when it set before - Combobox controls (Select, SelectMany Date, Time). Menu border is blue when invalid + hover
- Combobox controls (Select, SelectMany, Date, Time). Sometimes menu not scrolled to selected item by opening
- SwitchControl. CheckControl. form.$initModel is ignored
- RadioControl.
$options.items
with object-values doesn't work - RadioControl. set in a row
$options.items=...
and$value=...
doesn't work - SelectControl.SelectManyControl. Set in a row
$options.items=...
and$value=...
doesn't work - SelectControl.SelectManyControl. Arrow changes control size during rotation
- PopupElement. Wrong position if target inside body and html is scrollable instead of body
- NumberControl. Pattern
0.#
and value2
shows errorIncomplete value
- helper observer. Exception on promise-property
- Global. Sometimes some css-vars not appended to styles in production (as result black Circle)
- CalendarControl. Wrong autoscroll to top page after 1st focus
- TimeControl. Scrollbar is visible when menu opens to top
New/Features:
- FormElement. Added option
autoSave
to prevent losing not-submitted data - Controls
- Internal
setValue
has argumentreason
now - Event
$change
and callback$onChange
has propdetail: SetValueReason
now - Added
$defaults.storage
and$options.skey
to store/get value in different storageslocal/session/url
- Extended custom validation to
(value, control, reason) => false | string
. Was(value) => false | string
- Hide
button[clear]
by default for disabled/readonly/required
- Internal
- Global. Added JSDoc comments for
jsx/tsx
files (previously hovering on<wup-text>
showed nothing)
BREAKING CHANGES:
- helper animateDropdown moved into web-ui-pack/helpers/animateDropdown
- PopupElement. Fixed typo
$isHidding
to$isHiding
Fixes:
- helper animateDropdown. Wrong for left,right,top directions
- PopupElement. Popup hides by mouseenter if was opened by target.mouseenter
- PopupElement. Popup impossible to hide by click if opened by hover
- NumberControl.
-234
showed as-,234
- error message min/max is not formatted as input
- useless inline style 'overflow' on focus
- Controls. Asterisk is visible on empty label when value is required
New/Features:
- DropdownElement demo
- Added ability to reuse built-in styles (scroll,button['submit'] etc.). See FAQ/sharedStyles
- SelectManyControl demo. Added ability to sort/order items via drag&drop OR Arrows + Shift
- Added helper animateStack
- PopupElement
- Added option animation: Animations.stack
- Added support for attribute [animation] ("stack","drawer","") :
<wup-popup animation="stack">...</wup-popup>
- Extended attribute placement. Now it has predefined opposite rules (so
right-middle
means[right-middle, left-middle]
) - Reduced memory consumption via significant refactoring listeners & callback
- Popup always closed by keydown Escape if wasn't prevented (if was opened via default listener)
- Popup always closed by focusLost of target & popup for accessibility purpose (if was opened via default listener)
- Ability to call $show() and $hide() with working listeners (previously manual call of $show() removed all listeners)
- Controls. Able to setup
$defaults.validations
(likeWUPNumberControl.$validations = {min: 0}
etc.)
- Global. Added custom callbacks for events. So event
popup.addEventListener("$show",e=>...)
equal topopup.$onShow = (e)=>...
Fixes:
- Controls. Need to add border by default otherwise it's invisible on the white body
- CircleElement. Wrong tooltip position when segment is half of circle
BREAKING CHANGES:
- Internals. Methods
getNumAttr
,getRefAttr
,getBoolAttr
is refactored to singlegetAttr
- SelectControl. Simplified menu styling
- PopupElement. Prop
$isOpen
deprecated in favor of$isShown
New:
- SelectManyControl demo
- SelectControl. Added option
multiple
(attribute [multiple] & $options.multiple) - PopupElement
- Option
target
can be SVGElement - Option
offset
can be function - Added properties
$isShown, $isHidden, $isShowing, $isHidding
- Added rule: popup can't be more than
window.innerWidth & window.innerHeight
. The rule impossible to disable! - Calling
$show() & $hide()
possible several times at once without re-rendering - Events
$willShow & $willHide
have propertiesdetail.showCase & detail.hideCase
- Option
- CircleElement
- Added option
minsize
(attribute [minsize] & $options.minsize) - Added option
tooltip
per item ($options.items[0].tooltip)
- Added option
Fixes:
- Global. Sometimes events are not disposed. Fix for helper onEvent (need to remove events with options as is)
- helper onFocusLost. Isn't fired if stopPropagation is called
- TimeControl. Extra margin for menu-buttons on Safari
- SwitchControl. CheckControl. Attribute
initvalue=''
sets value totrue
(expectedfalse
) - TextareaControl.
Ctrl + B
makes text bold but it's unexpected for plain textarea - Controls. Hover effect on Android devices (expected: no-hover on touch-screens)
- Controls. Focus frame isn't rounded on Safari
- Controls. Attributes
initvalue,min,max
for controls Date & Calendar doesn't work on Safari (Date.parse(yyyy-MM-dd) doesn't work by default) - Controls. Controls are not rendered if parsing initvalue is wrong
- Controls. Unexpected autofocus on mask-inputs on Safari
- Controls. Annoying autoselect on touchscreens. Now $options.selectOnFocus is disabled by default
- Combobox controls (Select, Date, Time). Now popup isn't opened if user clears control and gets focus at the same time
- Combobox controls (Select, Date, Time). Click on disabled item throws console.error
- Combobox controls (Select, Date, Time). Focus goes to menu-list by keydown 'Tab' in Firefox
- SelectControl. Sometimes popup isn't not scrolled to selected item during the opening
- SpinElement. Animation for TwinDualRing doesn't work on Safari 14-
- SpinElement. Wrong render on option
fit
on Safari 14- - PopupElement. Animation for opacity doesn't work on Safari 14-
- PopupElement. Animation affects on bluring text if user scroll body during the animation
- PopupElement. Wrong position during dropdownAnimation and several show/hide at once
- PopupElement. Allow to show/hide on double-click (because on some browsers double-click works with huge delay)
- PopupElement. 2nd $show() has predefined maxSize & position can be different
- PopupElement. Popup could be > 100vw. Now popup has max size 100vw & 100vh (by default)
- PopupElement. No-updates on screensize changes. Now popup position & size changes with device-rotation
- PopupElement. No popup if mousedown>move>up>click on target
- CircleElement. Items color doesn't work (because attr
[fill]
can't override css-rule)
New:
- SpinElement demo. Added type hash
- CircleElement demo
Fixes:
- CalendarControl. Different pickers height after scrolling
- helper WUPScrolled. maxHeight left after scrolling finished
- helper WUPScrolled. goto previous sometimes scrolls through the whole range
BREAKING CHANGES:
- Namespaces
WUP...
is refactored fromWUPPopup
toWUP.Popup
etc. So re-export enumsShowCases, HideCases, Animations
without prefix now - helper animateDropdown moved into web-ui-pack/helpers/animate
- helper localeInfo moved into web-ui-pack/objects/localeInfo
- helper scrollCarousel refactored to WUPScrolled class
- helper mathSumFloat moved into web-ui-pack/helpers/math
- helper stringUpperCount moved into web-ui-pack/helpers/string
- helper stringLowerCount moved into web-ui-pack/helpers/string
- helper stringPrettify moved into web-ui-pack/helpers/string
- DateControl. Changed validation message from
This date is disabled
toThis value is disabled
New:
- WUPTimeObject =>
Ordinary class Time with hours & minutes
- TimeControl demo
- helper mathScaleValue
- Text based controls. Mask supports letters also (previously only digits can be variabled)
Fixes:
- helper localeInfo.
AM/PM parsed to 'a' but expected 'A'
- helper dateFromString.
12:00 PM throws Error but expected 12:00
- Icon check. Reduced thickness to fit other texts & icons
- PopupElement. Changing content size doesn't re-calc popup position
- PopupElement. Wrong position if parent has style transform.translate
- PopupElement. Content is blured if transform.translate with float values
- DateControl. Clearing input doesn't reset $value
- DateControl. Required asterisk is removed by opening menu
BREAKING CHANGES:
- DateControl:
- Was
- changing
$options.format
& attr[format]
related to all date-strings: attributesinitvalue/min/max
. - default value
YYYY-MM-DD
- changing
- Now
- Was
- CalendarControl:
- deprecated static getters
$namesDayShort, $namesMonth, $namesMonthShort
in favor of localeInfo helper $options.firstDayOfWeek
is renamed tofirstWeekDay
$options.firstWeekDay
- default value depends on user localization; see locale
- deprecated static getters
New:
- Helpers dateToString, dateFromString. Added support MMM format
- Text based controls. Added
$options
prefix
&postfix
- Controls Number, Date, Calendar are locale based and depends on localeInfo helper
- Added elements
- Added helpers
Fixes:
- helper promiseWait. Callback called before time end
- PopupElement with arrow. Firefox bug: css filter
drop-shadow
works wrong with angle 180.0 - SpinElement. Impossible to override color via applying css-var to body
--spin-2
New:
- Controls throws error if attr [validations] has object-key to undefined value
- Added mask for text based controls
- Added elements
- Added helpers
Fixes:
- Controls. Blue highlight blink on tap action
- Controls. Click on button
Clear
throws console.error - Controls. Validation gets undefined value but must be skipped in this case (value is undefined only for messages or validations.required)
- SelectControl. Click on custom list-item with nested span doesn't call click-event
- SelectControl. No scroll to selected element at first opening
- SelectControl. Sometimes menu isn't opened
- SelectControl.
noItems
appeared on 2nd menu opening when user created a new value - helper observer. onChange fired even date.setHours didn't change value
- Hotfix: gotReady() calls gotChanges() when element disconnected (possible in React)
BREAKING CHANGES:
- helpers reorganized to WUPHelpers (
WUPHelpers.isEqual
,WUPHelpers.focusFirst
etc.) - PopupElement. Renamed
$arrowElement
to$refArrow
New:
-
Optimized for webpack (via sideEffects)
-
Optimized memory consumption (removed auto-bind functions)
-
Added helpers
-
Added elements
-
helper nestedProperty: added option
out.hasProp
-
helper promiseWait: added option
smartOrCallback
to prevent useless pending on already resolved promises -
- Renamed $arrowElement to $refArrow
- Added $refresh() - to force update/re-calc position when nested content is changed
- Added option animation with animation-drawer
- Added option maxWidthByTarget
- Added option offsetFitElement
- Added promise-result for $hide() and $show() (resolved by animation time)
- Allowed to use other inline transform styles
- Improved listener (filter mouse-move, double-click, mouse-right-click etc.)
- Fixed helper onFocusLost: missed callback when user clicks several times fast
- PopupElement
- Fixed behavior on target-remove
- Deprecated shadow mode
- Fixed half-pixel issue on arrow
- PopupElement
- Fixed $options.offset
- Fixed behavior on target-remove
- Added helper onSpy to spy on method-call
- Added PopupElement demo
- Added helpers
- Removed helper
detectFocusLeft
in favoronFocusLost
- Added helpers
detectFocusLeft
- focusFirst
- nestedProperty.set/get
- promiseWait