ads-fe 0.0.1

package/skills/vueuse-functions/references/useElementSize.md

@@ -0,0 +1,79 @@
+---
+category: Elements
+---
+
+# useElementSize
+
+Reactive size of an HTML element. [ResizeObserver MDN](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const { width, height } = useElementSize(el)
+</script>
+
+<template>
+  <div ref="el">
+    Height: {{ height }}
+    Width: {{ width }}
+  </div>
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseElementSize v-slot="{ width, height }">
+    Width: {{ width }} Height: {{ height }}
+  </UseElementSize>
+</template>
+```
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vElementSize } from '@vueuse/components'
+
+function onResize({ width, height }: { width: number, height: number }) {
+  console.log(width, height)
+}
+</script>
+
+<template>
+  <textarea v-element-size="onResize" />
+  <!-- with options -->
+  <textarea v-element-size="[onResize, { width: 100, height: 100 }, { box: 'content-box' }]" />
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface ElementSize {
+  width: number
+  height: number
+}
+export interface UseElementSizeOptions extends UseResizeObserverOptions {}
+export interface UseElementSizeReturn {
+  width: ShallowRef<number>
+  height: ShallowRef<number>
+  stop: () => void
+}
+/**
+ * Reactive size of an HTML element.
+ *
+ * @see https://vueuse.org/useElementSize
+ */
+export declare function useElementSize(
+  target: MaybeComputedElementRef,
+  initialSize?: ElementSize,
+  options?: UseElementSizeOptions,
+): UseElementSizeReturn
+```

package/skills/vueuse-functions/references/useElementVisibility.md

@@ -0,0 +1,163 @@
+---
+category: Elements
+---
+
+# useElementVisibility
+
+Tracks the visibility of an element within the viewport.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useElementVisibility } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const target = useTemplateRef('target')
+const targetIsVisible = useElementVisibility(target)
+
+const target2 = useTemplateRef('target2')
+const targetVisibilityController = useElementVisibility(target2, { controls: true })
+</script>
+
+<template>
+  <div ref="target">
+    <h1>Hello world</h1>
+  </div>
+
+  <div ref="target2">
+    <h1>Hi there</h1>
+  </div>
+</template>
+```
+
+### rootMargin
+
+If you wish to trigger your callback sooner before the element is fully visible, you can use
+the `rootMargin` option (See [MDN IntersectionObserver/rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)).
+
+```ts
+import { useElementVisibility } from '@vueuse/core'
+// ---cut---
+const targetIsVisible = useElementVisibility(target, {
+  rootMargin: '0px 0px 100px 0px',
+})
+```
+
+### threshold
+
+If you want to control the percentage of the visibility required to update the value, you can use the `threshold` option (See [MDN IntersectionObserver/threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#threshold)).
+
+```ts
+const targetIsVisible = useElementVisibility(target, {
+  threshold: 1.0, // 100% visible
+})
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseElementVisibility v-slot="{ isVisible }">
+    Is Visible: {{ isVisible }}
+  </UseElementVisibility>
+</template>
+```
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vElementVisibility } from '@vueuse/components'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const target = useTemplateRef('target')
+const isVisible = shallowRef(false)
+
+function onElementVisibility(state) {
+  isVisible.value = state
+}
+
+const target2 = useTemplateRef('target2')
+const isVisible2 = shallowRef(false)
+
+function onElementVisibilityWithControls(state) {
+  isVisible2.value = state.isVisible.value
+  if (state.isVisible.value) {
+    state.stop()
+  }
+}
+</script>
+
+<template>
+  <div v-element-visibility="onElementVisibility">
+    {{ isVisible ? 'inside' : 'outside' }}
+  </div>
+
+  <!-- with options -->
+  <div ref="target">
+    <div v-element-visibility="[onElementVisibility, { scrollTarget: target }]">
+      {{ isVisible ? 'inside' : 'outside' }}
+    </div>
+  </div>
+
+  <!-- with controls -->
+  <div ref="target2">
+    <div v-element-visibility="[onElementVisibilityWithControls, { controls: true }]">
+      {{ isVisible2 ? 'inside' : 'outside' }}
+    </div>
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseElementVisibilityOptions<Controls extends boolean = false>
+  extends
+    ConfigurableWindow,
+    Pick<UseIntersectionObserverOptions, "rootMargin" | "threshold"> {
+  /**
+   * Initial value.
+   *
+   * @default false
+   */
+  initialValue?: boolean
+  /**
+   * The element that is used as the viewport for checking visibility of the target.
+   */
+  scrollTarget?: UseIntersectionObserverOptions["root"]
+  /**
+   * Stop tracking when element visibility changes for the first time
+   *
+   * @default false
+   */
+  once?: boolean
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+}
+export type UseElementVisibilityReturn<Controls extends boolean = false> =
+  Controls extends true
+    ? UseElementVisibilityReturnWithControls
+    : ShallowRef<boolean>
+export interface UseElementVisibilityReturnWithControls extends UseIntersectionObserverReturn {
+  isVisible: ShallowRef<boolean>
+}
+/**
+ * Tracks the visibility of an element within the viewport.
+ *
+ * @see https://vueuse.org/useElementVisibility
+ */
+export declare function useElementVisibility(
+  element: MaybeComputedElementRef,
+  options?: UseElementVisibilityOptions<false>,
+): UseElementVisibilityReturn<false>
+export declare function useElementVisibility(
+  element: MaybeComputedElementRef,
+  options?: UseElementVisibilityOptions<true>,
+): UseElementVisibilityReturn<true>
+```

package/skills/vueuse-functions/references/useEventBus.md

@@ -0,0 +1,101 @@
+---
+category: Utilities
+---
+
+# useEventBus
+
+A basic event bus.
+
+## Usage
+
+```ts
+import { useEventBus } from '@vueuse/core'
+
+const bus = useEventBus<string>('news')
+
+function listener(event: string) {
+  console.log(`news: ${event}`)
+}
+
+// listen to an event
+const unsubscribe = bus.on(listener)
+
+// fire an event
+bus.emit('The Tokyo Olympics has begun')
+
+// unregister the listener
+unsubscribe()
+// or
+bus.off(listener)
+
+// clearing all listeners
+bus.reset()
+```
+
+Listeners registered inside of components `setup` will be unregistered automatically when the component gets unmounted.
+
+## TypeScript
+
+Using `EventBusKey` is the key to bind the event type to the key, similar to Vue's [`InjectionKey`](https://antfu.me/posts/typed-provide-and-inject-in-vue) util.
+
+```ts
+// fooKey.ts
+import type { EventBusKey } from '@vueuse/core'
+
+export const fooKey: EventBusKey<{ name: foo }> = Symbol('symbol-key')
+```
+
+```ts
+import { useEventBus } from '@vueuse/core'
+
+import { fooKey } from './fooKey'
+
+const bus = useEventBus(fooKey)
+
+bus.on((e) => {
+  // `e` will be `{ name: foo }`
+})
+```
+
+## Type Declarations
+
+```ts
+export type EventBusListener<T = unknown, P = any> = (
+  event: T,
+  payload?: P,
+) => void
+export type EventBusEvents<T, P = any> = Set<EventBusListener<T, P>>
+export interface EventBusKey<T> extends Symbol {}
+export type EventBusIdentifier<T = unknown> = EventBusKey<T> | string | number
+export interface UseEventBusReturn<T, P> {
+  /**
+   * Subscribe to an event. When calling emit, the listeners will execute.
+   * @param listener watch listener.
+   * @returns a stop function to remove the current callback.
+   */
+  on: (listener: EventBusListener<T, P>) => Fn
+  /**
+   * Similar to `on`, but only fires once
+   * @param listener watch listener.
+   * @returns a stop function to remove the current callback.
+   */
+  once: (listener: EventBusListener<T, P>) => Fn
+  /**
+   * Emit an event, the corresponding event listeners will execute.
+   * @param event data sent.
+   */
+  emit: (event?: T, payload?: P) => void
+  /**
+   * Remove the corresponding listener.
+   * @param listener watch listener.
+   */
+  off: (listener: EventBusListener<T>) => void
+  /**
+   * Clear all events
+   */
+  reset: () => void
+}
+export declare function useEventBus<T = unknown, P = any>(
+  key: EventBusIdentifier<T>,
+): UseEventBusReturn<T, P>
+```

package/skills/vueuse-functions/references/useEventListener.md

@@ -0,0 +1,226 @@
+---
+category: Browser
+---
+
+# useEventListener
+
+Use EventListener with ease. Register using [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) on mounted, and [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) automatically on unmounted.
+
+## Usage
+
+```ts
+import { useEventListener } from '@vueuse/core'
+
+useEventListener(document, 'visibilitychange', (evt) => {
+  console.log(evt)
+})
+```
+
+### Default Target
+
+When the target is omitted, it defaults to `window`:
+
+```ts
+import { useEventListener } from '@vueuse/core'
+
+// Listens on window
+useEventListener('resize', (evt) => {
+  console.log(evt)
+})
+```
+
+### Reactive Target
+
+You can pass a ref as the event target, `useEventListener` will unregister the previous event and register the new one when the target changes.
+
+```vue
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const element = useTemplateRef('element')
+useEventListener(element, 'keydown', (e) => {
+  console.log(e.key)
+})
+</script>
+
+<template>
+  <div v-if="cond" ref="element">
+    Div1
+  </div>
+  <div v-else ref="element">
+    Div2
+  </div>
+</template>
+```
+
+### Multiple Events
+
+You can pass an array of events to listen to multiple events at once:
+
+```ts
+import { useEventListener } from '@vueuse/core'
+
+useEventListener(document, ['mouseenter', 'mouseleave'], (evt) => {
+  console.log(evt.type)
+})
+```
+
+### Multiple Targets
+
+You can also pass an array of targets:
+
+```ts
+import { useEventListener } from '@vueuse/core'
+
+const buttons = document.querySelectorAll('button')
+useEventListener(buttons, 'click', (evt) => {
+  console.log('Button clicked')
+})
+```
+
+### Cleanup
+
+Returns a cleanup function to manually unregister the listener:
+
+```ts
+import { useEventListener } from '@vueuse/core'
+
+const cleanup = useEventListener(document, 'keydown', (e) => {
+  console.log(e.key)
+})
+
+cleanup() // This will unregister the listener.
+```
+
+Note if your components also run in SSR (Server Side Rendering), you might get errors (like `document is not defined`) because DOM APIs like `document` and `window` are not available in Node.js. To avoid that you can put the logic inside `onMounted` hook.
+
+```ts
+import { useEventListener } from '@vueuse/core'
+// ---cut---
+// onMounted will only be called in the client side
+// so it guarantees the DOM APIs are available.
+onMounted(() => {
+  useEventListener(document, 'keydown', (e) => {
+    console.log(e.key)
+  })
+})
+```
+
+## Type Declarations
+
+```ts
+interface InferEventTarget<Events> {
+  addEventListener: (event: Events, fn?: any, options?: any) => any
+  removeEventListener: (event: Events, fn?: any, options?: any) => any
+}
+export type WindowEventName = keyof WindowEventMap
+export type DocumentEventName = keyof DocumentEventMap
+export type ShadowRootEventName = keyof ShadowRootEventMap
+export interface GeneralEventListener<E = Event> {
+  (evt: E): void
+}
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * Overload 1: Omitted Window target
+ *
+ * @see https://vueuse.org/useEventListener
+ */
+export declare function useEventListener<E extends keyof WindowEventMap>(
+  event: MaybeRefOrGetter<Arrayable<E>>,
+  listener: MaybeRef<Arrayable<(this: Window, ev: WindowEventMap[E]) => any>>,
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
+): Fn
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * Overload 2: Explicitly Window target
+ *
+ * @see https://vueuse.org/useEventListener
+ * @param target
+ * @param event
+ * @param listener
+ * @param options
+ */
+export declare function useEventListener<E extends keyof WindowEventMap>(
+  target: Window,
+  event: MaybeRefOrGetter<Arrayable<E>>,
+  listener: MaybeRef<Arrayable<(this: Window, ev: WindowEventMap[E]) => any>>,
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
+): Fn
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * Overload 3: Explicitly Document target
+ *
+ * @see https://vueuse.org/useEventListener
+ */
+export declare function useEventListener<E extends keyof DocumentEventMap>(
+  target: Document,
+  event: MaybeRefOrGetter<Arrayable<E>>,
+  listener: MaybeRef<
+    Arrayable<(this: Document, ev: DocumentEventMap[E]) => any>
+  >,
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
+): Fn
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * Overload 4: Explicitly ShadowRoot target
+ *
+ * @see https://vueuse.org/useEventListener
+ */
+export declare function useEventListener<E extends keyof ShadowRootEventMap>(
+  target: MaybeRefOrGetter<Arrayable<ShadowRoot> | null | undefined>,
+  event: MaybeRefOrGetter<Arrayable<E>>,
+  listener: MaybeRef<
+    Arrayable<(this: ShadowRoot, ev: ShadowRootEventMap[E]) => any>
+  >,
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
+): Fn
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * Overload 5: Explicitly HTMLElement target
+ *
+ * @see https://vueuse.org/useEventListener
+ */
+export declare function useEventListener<E extends keyof HTMLElementEventMap>(
+  target: MaybeRefOrGetter<Arrayable<HTMLElement> | null | undefined>,
+  event: MaybeRefOrGetter<Arrayable<E>>,
+  listener: MaybeRef<(this: HTMLElement, ev: HTMLElementEventMap[E]) => any>,
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
+): Fn
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * Overload 6: Custom event target with event type infer
+ *
+ * @see https://vueuse.org/useEventListener
+ */
+export declare function useEventListener<
+  Names extends string,
+  EventType = Event,
+>(
+  target: MaybeRefOrGetter<
+    Arrayable<InferEventTarget<Names>> | null | undefined
+  >,
+  event: MaybeRefOrGetter<Arrayable<Names>>,
+  listener: MaybeRef<Arrayable<GeneralEventListener<EventType>>>,
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
+): Fn
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * Overload 7: Custom event target fallback
+ *
+ * @see https://vueuse.org/useEventListener
+ */
+export declare function useEventListener<EventType = Event>(
+  target: MaybeRefOrGetter<Arrayable<EventTarget> | null | undefined>,
+  event: MaybeRefOrGetter<Arrayable<string>>,
+  listener: MaybeRef<Arrayable<GeneralEventListener<EventType>>>,
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
+): Fn
+```