Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial vue 3 support, resolves #440 #587

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

tbl0605
Copy link
Contributor

@tbl0605 tbl0605 commented Aug 28, 2023

Hi everybody,
Hi @kaskar2008,
I finally decided to share my Vue 3 rewrite of the vue-simple-suggest library. Took me some time to achieve, and there are still some things to do (see below).

What works

  • all previous features of vue-simple-suggest should continue to work, except for a few breaking changes. As I haven't tested all the features of vue-simple-suggest, more testing would be welcome.
  • npm run dev. You can launch and test same demo as the one found at https://kazanexpress.github.io/vue-simple-suggest/

What still needs to be done

  • update the documentation (about the breaking changes)
  • npm run build: it compiles "something", but it's probably wrong as-is.
    For now, I simply updated all the webpack + rollup dependencies to support Vue 3, but it all looks like clumsy and incomplete.
    The dist/ directory has been updated but the contents of the generated files may be incorrect (not tested yet).
    Some project files (like lib/window.js) are obsolete now.
    Probably the best solution would be to migrate all the build process to use Vite + rollup. Some help here would be more than welcome.

Breaking changes

  • When the user provides its own input, he has to add some listener bindings (provided by the vue-simple-suggest component) to the input element.
    For a custom input component, bind the slot prop "componentField":
    <vue-suggest v-model="model" ... >
      <template v-slot="{ componentField }">
        <my-custom-input v-bind="componentField" ... />
      </template>
    </vue-suggest>

or

    <vue-suggest v-model="model" v-slot="{ componentField }" ... >
      <my-custom-input v-bind="componentField" ... />
    </vue-suggest>

For a native html input, bind the slot prop "field":

    <vue-suggest v-model="model" ... >
      <template v-slot="{ field }">
        <input v-bind="field" type="text" ... />
      </template>
    </vue-suggest>

or

    <vue-suggest v-model="model" v-slot="{ field }" ... >
      <input v-bind="field" type="text" ... />
    </vue-suggest>

This behavior is inspired by the way the vee-validate library makes its Field component work with Vue 3 (see doc) and avoids to hack the internal properties of the Vue VNodes to bind some listeners to them (anyway the Vue 3 VNode API doesn't allow such things anymore).

  • the "input" event is now replaced by the "update:modelValue" event (see Vue doc)
  • The "emit" option works a bit differently now that Vue 3 supports multiple v-model bindings. When setting the "emit" property to "input", use v-model or @update:modelValue and when setting the "emit" property to "select", use v-model:modelSelect or @update:modelSelect
  • The @select event was kept for backward compatibility, but the @update:modelSelect event should be used now

For those who can't wait to try my Vue 3's implementation of the vue-simple-suggest library, you can simply take lib/vue-simple-suggest.vue and lib/misc.js and put them directly in your own projects ;)

Hope my patch will be useful ;)

Thierry.

PR updates:
This PR also includes fix #589 and #590, but not fix #588 (I'm not sure if it's still needed with Vue 3, that needs more testing).

@tbl0605 tbl0605 changed the title Initial vue 3 support #440 Initial vue 3 support, resolves #440 Aug 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant