- Type fix, now items array accepts null, undefined or boolean for conditional items.
- Now
items
prop supports nested array of items like Vue/React render function, nested arrays are converted tovNode[]
in render phase.
const items = [
item(...),
users.map((user) => item(user)), // Item[],
itemGroup({
key: '__',
items: [
item(...),
[
customItem(...)
]
]
})
]
- Now
itemDefaults
prop accepts a function that hasitem
passed as parameter, for type safetycreateItemDefaults
is updated as well.
- Now instead of passing
meta
to render slot#render="meta"
it passed whole item data#render="{ meta, disabled, onSelect }"
. This will be helpful for detecting disabled state etc.
- Now instead of creating a renderer function on every render, SelectableItems now returns render function from setup and renderer function is created only once per component. This will increase performance a bit but not recognizable.
### Features
-
New
itemDefaults
prop to create default options for all selectable items can be created. -
New
createItemDefaults(options: ItemDefaults)
function for default options, this function will wrapwrapperComponentOrTag
withmarkRaw
if component is given.
- Fixed not wrapping functional components with
markRaw
initem()
anditemGroup()
.
- Fixed types of hooks/events.
Context['selectFocusedElement']
was incorrect name, fixed to correct oneContext['selectFocusedItem']
-
Now
focus
event/hook has a fourth parameterbyPointer: boolean
. If user is focused to an item by pointer this parameter will betrue
otherwisefalse
. -
Now
DOMFocus
event has four arguments. Frst argument ofDomFocus
event isFocus Event
, rest isMeta, Item<Meta>, HTMLElement
.
- Removed
itemHover
event andContext['onHover']
hook, use focus with fourth parameter instead.
- Removed unused variables from setup return.
- Updated readme
- Now
ItemOptions
havedisabled
option. Disabled items havevue-selectable-items-item-disabled
class.item({ key: 'myKey', disabled: true })
- If current focused item key doesn't exist anymore, focus will be resetted.
-
itemFocus
,itemUnfocus
,itemDOMFocus
,itemHover
emits are added. -
SelectableItems
component now exposesContext
as template ref. -
Now all events has 3 arguments; Meta, Item and HTMLElement.
-
New exported functions
filterSelectableAndCustomItems
andfilterSelectableItems
. -
Now
onSelect
property of an item has correct type support. -
-
getItemMetaDataByKey
renamed asgetItemMetaByKey
with generic support.getItemMetabyKey<Meta = unknown>
-
getSelectableItems
now supports generic.getSelectableItems<Meta = unknown>
-
getFocusedElement
renamed asgetFocusedItemElement
-
onMouseEnter
renamed asonHover
-
- Updated readme.
itemGroup()
anditem()
now wraps givenwrapperComponentOrTag
withmarkRaw
for performance optimization.itemGroup()
anditem()
now has type support forwrapperProps
.onClick(meta)
property ofitem()
now has correct types.- Added
data-vue-selectable-items-item
to selectable item elements to help users query items likedocument.activeElement.hasAttribute('data-vue-selectable-items-item')
.
-
Now each item requires a unique key, old approach was creating a random key for each item but that wasn't a good choice because most people are creating items in a computed and computed creates unique key for each trigger. This makes all items to rerender even if they didn't change.
-
itemGroup, customItem and item functions are now expecting 1 argument as object and has generic meta type support.
-
metaData
renamed tometa
and. -
slotName
option ofCustomItem
renamed asname
.
- Added new functions to
setup
prop arguments. - Exported missing types.