Support for `v-model` directive

[msaelices]

• add model: {prop: string, event: string} to the NSVViewMeta interface
• runtime vModel infrastructure, which consumes the previous model
• support TextField
• support Label (Label can't be "edited" so i doesn't need vModel, just simple one way bindings)
• support Tabs
• support TabView
• support BottomNavigation
• support DatePicker
• support ListPicker
• support Progress
• support SearchBar
• support SegmentedBar
• support Slider
• support Switch
• support TextView
• support TimePicker
• unit tests

[rigor789]

I haven't looked at the implemetation in runtime-dom - but I would like to be able to specify the model information in registerElement so we don't need to write wrappers for the elements.

The syntax would be similar to 2.x with

model: {
  prop: 'value',
  event: 'valueChange'
}

And perhaps the ability to add "transforms" that can transform the values from the events - as they are not always using event.value.

Edit: (I just saw that's the first task in this list - oops)

[msaelices]

@rigor789 I've just read your comment, but I guessed well I think. Please check out the last commits in the master branch.

[rigor789]

@msaelices looks good!

The idea of adding a transformer for the models is not actually needed, as the event that listens for the change already uses el.getAttribute(prop)! I haven't even thought of that ha!

[rigor789]

@msaelices added support for v-model in templates! I'll work on something else for now - perhaps on built-in components like Tabs, Bottomnav etc.

[msaelices]

@rigor789 Awesome!

[andrew-ignatiev]

Hi @rigor789 ,
First of all want to say thank you for your great work with nativescript-vue. We really appreciate what you are doing to support Vue.js version 3. I have played with your demo app and found that v-model directive doesn't work when markup is used in template tag instead of template property of SFC.

I've read on one of the another issue/feature thread that you has not been motivated to spend more time on this project to move things forward, really sorry to hear it. But want to say that with release of Nativescript 7 and Vue.js 3 a lot of web developers trying to check it together and your effort is appreciated.

[andrew-ignatiev]

I've found how to make v-model work in template tag if anyone interested. You can create functional component like below for example:

const withVModel = (node: VNode, arg: any, mods?: any) => withDirectives(node, [[vModel, arg, '', mods]]);

const BaseInput: FunctionalComponent<BaseInputInterface> = (props, context) => {
  let value: string | number = '';
  let { modelModifiers } = props;

  return h(
    withVModel(
      h('TextField', {
        'onUpdate:modelValue': (v: string | number) => {
          value = v;
        },
      }),
      value,
      modelModifiers
    ),
    context.attrs,
    context.slots
  );
};

export default BaseInput;

Then in SFC import it and use with v-model directive, for example

<template>
  <Page>
    <BaseInput
      v-model.trim="yourReactivePropery"
      hint="Please set text"
      :editable="isEditable"
    />
  </Page>
</template>