Changes for Vue Upgrade

[HeriLFIU]

Closes #107 Closes #106

Partially deals with #85 but the toolbar still uses Vue instead of app instance to register components with the httpvueloader.

Summary

I updated the input v-model to use the new syntax. I replaced $listerners with $attrs in the auto complete component. I replaced the Vue and new Vue with the app instance in main.js.

Local Tests

The warnings were removed from the console. The UI still functioned as should.

[HeriLFIU]

@rmotitsuki do you think it would be a good idea to globally enable MODE3 on the vue js compat?

[italovalcy]

@HeriLFIU I tested here your pull request (without enabling MODE3 globally, i.e., strictly using the changes proposed here) and I ended up observing a weird behavior: If I try to create and EVC, filled out the Circuit Name, then press TAB to choose endpoint A, then the circuit name disappear.

See this demo after applying your changes:

The procedure I'm using to build and apply the changes is:

git clone https://github.com/kytos-ng/ui
cd ui
curl -LO https://github.com/kytos-ng/ui/pull/108.diff
patch -p1 < 108.diff
docker run -d --name vue3 -v $(PWD):/kytos-ui -w /kytos-ui node:lts-alpine tail -f /dev/null
docker exec -it vue3 sh
apk add zip
rm -rf latest.zip dist package-lock.json node_modules/
npm install && npm run preprod && zip -r latest.zip index.html dist
exit
mv /usr/local/lib/python3.11/dist-packages/kytos/web-ui /usr/local/lib/python3.11/dist-packages/kytos/web-ui-$(date +%Y%m%d%H%M)
python3 -m zipfile -e latest.zip /usr/local/lib/python3.11/dist-packages/kytos/web-ui

[HeriLFIU]

That's strange, that's most likely due to replacing $listeners with $attrs in the k-input-auto. I thought it should have acted similarly to the $listeners code, but ill look into it.

[HeriLFIU]

@italovalcy thank you for the help, I tested it out and it should be working now. The reason for the issue was that a fix for the v-model was already implemented, after reading the documentation you could have had a default value/variable for v-model. In vue js 2 this default value would be defined with just value, but now its defined with modelValue. Or you could specify a value to track by name using v-model:name="". Instead of using the default value for v-model the code already set that it was going to track value by stating v-model:value="". So there was no need for the v-model change.