vue-scroll-picker 2.0.0

on Node.js NPM

• Migration to Vue Composition API - Refactored using Vue 3 Composition API for better structure and reusability.
• Improved TypeScript Support with Generics - Generic types enable stricter and safer type checking.
• Enhanced Scrolling with Bounce Effect - Smoother scrolling experience with a bounce effect on wheel actions.
• (Breaking Change) Placeholder Removal - Placeholder prop removed; use null in options instead.
• (Breaking Change) update:modelValue Behavior Update - Invalid values no longer trigger update:modelValue. (#916)
• (Bug Fix) Consistent Passive Event Listeners - Explicitly defines passive attribute for cross-browser consistency. (#863)

Breaking Changes

Placeholder Removal

The placeholder prop has been removed in favor of handling placeholder functionality using an explicit null value in the options array. This aligns with the behavior of native<select /> elements in HTML.

Example of Native <select />:

<select v-model="currentValue">
  <option disabled value="">Select an option</option>
  <option value="1">Option 1</option>
</select>

Updated VueScrollPicker Implementation:

<template>
  <!-- Before (deprecated) -->
  <VueScrollPicker
    placeholder="Select an option"
    :options="[
      { name: 'Option 1', value: '1' },
      { name: 'Option 2', value: '2' },
      { name: 'Option 3', value: '3' },
    ]"
  />

  <!-- After (correct usage) -->
  <VueScrollPicker
    :options="[
      { name: 'Select an option', value: null },
      { name: 'Option 1', value: '1' },
      { name: 'Option 2', value: '2' },
      { name: 'Option 3', value: '3' },
    ]"
  />
</template>

update:modelValue Behavior Update

Previously, if an invalid value was passed to the component, update:modelValue would emit a valid fallback value. This behavior has been removed to better align with native <select /> elements. Now, if an invalid value is provided, the UI will behave as if null was selected, without emitting an automatic correction event.