feat: introduce components & directives

[wheatjs]

Creating a draft PR for the components and directives so there can be open discussion about it as it is developed.

There are currently a few components and one directive. We still need to setup the infrastructure for actually exporting the components like we do the other utils. Also wondering how we should handle the documentation for them. We could include them in the index.md file for each component?

[cawa-93]

Haven't you thought about putting all the components in a separate package, let's say @vueuse/components?

[wheatjs]

That was the original intention, but then we thought it would be easier to test and keep up to date if they were closer together.

[antfu]

Yeah, they will be put under the same folder with each function for organization, but published as @vueuse/components

[antfu]

Moved the target to next branch

[wheatjs]

Was wondering how we might like to handle options for components. Right now each component accepts an options attribute, but maybe we want to have an attribute for each option instead? For some I think it makes sense, although some with some options maybe it will create too many attributes, like with useFetch?

For example, right now if we have the component UseNow

<UseNow v-slot="{ now }" :options="{ interval: 10 }">
  {{ now }}
</UseNow>

If we were to expand these options out to attributes instead we could have

<UseNow v-slot="{ now }" :interval="10">
  {{ now }}
</UseNow>

I think the second option in general is nicer to use, but it would require more work to implement so I'd like to get some feedback on it before I did anything like that.

[antfu]

Could spread out, like

<UseNow v-slot="{ now }" :interval="10">
  {{ now }}
</UseNow>

And when you want to do options way:

<UseNow v-slot="{ now }" v-bind="{ interval: 10 }">
  {{ now }}
</UseNow>

[wheatjs]

Sounds good to me

[wheatjs]

Wondering how we should handle the docs for this. Should they be part of the same docs or maybe they should be separated, by something like tabs maybe? I guess the main thing we need right now is an easy way to test/demo them. It would be easier to see if everything is working like expected if we had a way to demo the main functions.

[wheatjs]

Ok so in total for our first release it looks like we will have 30 components including the following

• onClickOutside
• useActiveElement
• useBattery
• useBrowserLocation
• useDark
• useDeviceLight
• useDeviceMotion
• useDeviceOrientation
• useDevicePixelRatio
• useDevicesList
• useDocumentVisibility
• useElementBounding
• useElementSIize
• useElementVisibility
• useFullscreen
• useGeolocation
• useIdle
• useMouse
• useMouseInElement
• useMousePressed
• useNetwork
• useNow
• useOnline
• usePageLeave
• usePreferredColorScheme
• usePreferredDark
• usePreferredLanguages
• useTimeAgo
• useTimestamp
• useWindowSize

Each component includes minimal documentation showing basic usage.