Add more convenient way for `vue`

[CatsJuice]

• [x] Vue composables
• [x] v-cursor directive
• [ ] Component
  • Maybe IpadCursorProvider, IpadCursor

[weykon]

what means v-cursor? can you explain more information for it ?

the 2 I think I can help, to create a create provider contains default config component

[CatsJuice]

@weykon

For now in vue, there are only 2 ways to enable this:

• use updateCursor, initCursor, disposeCursor directly and manage update when component unMounted
• use useCursor hook, it will auto update when mounted and unMounted

But it's still not convenient enough, you still have to import and call useCursor. And the hook will only manage update when component is disposed. That means if you have a element with v-if it may not working correctly.

With vue directives, we can do update to the element precisely, this can also reduce DOM scanning, as well as better type hints.

So, maybe finally we can register v-cursor and give it default configuration in main.ts

import { vCursorPlugin, IpadCursorConfig } from "ipad-mouse/vue"

const config: IpadCursorConfig = {}
app.use(vCursorPlugin, config)

Then use it directly in SFC:

<script setup>
</script>

<template>
    <!-- detect css display type to decide text | block -->
    <div v-cursor></div>

   <!-- block -->
   <div v-cursor="'block'" />

   <!-- text -->
   <div v-cursor="'text'" />

   <!-- override style -->
   <div v-cursor="{ ? }" />
</template>

It will be more important to design the API than implementing this v-cursor directive.

[weykon]

thanks your explanation! I do not have Vue experience, I only in react. but you leave this can be helpful for next people catch on. I will read source code for react version component code.

[CatsJuice]

thanks your explanation! I do not have Vue experience, I only in react. but you leave this can be helpful for next people catch on. I will read source code for react version component code.

Yay, feel free to contribute a react implementation!