ads-fe 0.0.1

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

@@ -0,0 +1,238 @@
+---
+category: Sensors
+---
+
+# useScroll
+
+Reactive scroll position and state.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useScroll } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
+</script>
+
+<template>
+  <div ref="el" />
+</template>
+```
+
+### With offsets
+
+```ts
+import { useScroll } from '@vueuse/core'
+// ---cut---
+const { x, y, isScrolling, arrivedState, directions } = useScroll(el, {
+  offset: { top: 30, bottom: 30, right: 30, left: 30 },
+})
+```
+
+### Setting scroll position
+
+Set the `x` and `y` values to make the element scroll to that position.
+
+```vue
+<script setup lang="ts">
+import { useScroll } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const { x, y } = useScroll(el)
+</script>
+
+<template>
+  <div ref="el" />
+  <button @click="x += 10">
+    Scroll right 10px
+  </button>
+  <button @click="y += 10">
+    Scroll down 10px
+  </button>
+</template>
+```
+
+### Smooth scrolling
+
+Set `behavior: smooth` to enable smooth scrolling. The `behavior` option defaults to `auto`, which means no smooth scrolling. See the `behavior` option on [`window.scrollTo()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) for more information.
+
+```ts
+import { useScroll } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const { x, y } = useScroll(el, { behavior: 'smooth' })
+
+// Or as a `ref`:
+const smooth = ref(false)
+const behavior = computed(() => smooth.value ? 'smooth' : 'auto')
+const { x, y } = useScroll(el, { behavior })
+```
+
+### Recalculate scroll state
+
+You can call the `measure()` method to manually update the scroll position and `arrivedState` at any time.
+
+This is useful, for example, after dynamic content changes or when you want to recalculate the scroll state outside of scroll events.
+
+```ts
+import { useScroll } from '@vueuse/core'
+import { nextTick, onMounted, useTemplateRef, watch } from 'vue'
+
+const el = useTemplateRef('el')
+const reactiveValue = shallowRef(false)
+
+const { measure } = useScroll(el)
+
+// In a watcher
+watch(reactiveValue, () => {
+  measure()
+})
+
+// Or inside any function
+function updateScrollState() {
+  // ...some logic
+  nextTick(() => {
+    measure()
+  })
+}
+```
+
+> [!NOTE]
+> it's recommended to call `measure()` inside `nextTick()`, to ensure the DOM is updated first.
+> The scroll state is initialized automatically `onMount`.
+> You only need to call `measure()` manually if you want to recalculate the state after some dynamic changes.
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import type { UseScrollReturn } from '@vueuse/core'
+import { vScroll } from '@vueuse/components'
+
+const data = ref([1, 2, 3, 4, 5, 6])
+
+function onScroll(state: UseScrollReturn) {
+  console.log(state) // {x, y, isScrolling, arrivedState, directions}
+}
+</script>
+
+<template>
+  <div v-scroll="onScroll">
+    <div v-for="item in data" :key="item">
+      {{ item }}
+    </div>
+  </div>
+
+  <!-- with options -->
+  <div v-scroll="[onScroll, { throttle: 10 }]">
+    <div v-for="item in data" :key="item">
+      {{ item }}
+    </div>
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseScrollOptions extends ConfigurableWindow {
+  /**
+   * Throttle time for scroll event, it’s disabled by default.
+   *
+   * @default 0
+   */
+  throttle?: number
+  /**
+   * The check time when scrolling ends.
+   * This configuration will be setting to (throttle + idle) when the `throttle` is configured.
+   *
+   * @default 200
+   */
+  idle?: number
+  /**
+   * Offset arrived states by x pixels
+   *
+   */
+  offset?: {
+    left?: number
+    right?: number
+    top?: number
+    bottom?: number
+  }
+  /**
+   * Use MutationObserver to monitor specific DOM changes,
+   * such as attribute modifications, child node additions or removals, or subtree changes.
+   * @default { mutation: boolean }
+   */
+  observe?:
+    | boolean
+    | {
+        mutation?: boolean
+      }
+  /**
+   * Trigger it when scrolling.
+   *
+   */
+  onScroll?: (e: Event) => void
+  /**
+   * Trigger it when scrolling ends.
+   *
+   */
+  onStop?: (e: Event) => void
+  /**
+   * Listener options for scroll event.
+   *
+   * @default {capture: false, passive: true}
+   */
+  eventListenerOptions?: boolean | AddEventListenerOptions
+  /**
+   * Optionally specify a scroll behavior of `auto` (default, not smooth scrolling) or
+   * `smooth` (for smooth scrolling) which takes effect when changing the `x` or `y` refs.
+   *
+   * @default 'auto'
+   */
+  behavior?: MaybeRefOrGetter<ScrollBehavior>
+  /**
+   * On error callback
+   *
+   * Default log error to `console.error`
+   */
+  onError?: (error: unknown) => void
+}
+export interface UseScrollReturn {
+  x: WritableComputedRef<number>
+  y: WritableComputedRef<number>
+  isScrolling: ShallowRef<boolean>
+  arrivedState: {
+    left: boolean
+    right: boolean
+    top: boolean
+    bottom: boolean
+  }
+  directions: {
+    left: boolean
+    right: boolean
+    top: boolean
+    bottom: boolean
+  }
+  measure: () => void
+}
+/**
+ * Reactive scroll.
+ *
+ * @see https://vueuse.org/useScroll
+ * @param element
+ * @param options
+ */
+export declare function useScroll(
+  element: MaybeRefOrGetter<
+    HTMLElement | SVGElement | Window | Document | null | undefined
+  >,
+  options?: UseScrollOptions,
+): UseScrollReturn
+```

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

@@ -0,0 +1,66 @@
+---
+category: Sensors
+---
+
+# useScrollLock
+
+Lock scrolling of the element.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useScrollLock } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const isLocked = useScrollLock(el)
+
+isLocked.value = true // lock
+isLocked.value = false // unlock
+</script>
+
+<template>
+  <div ref="el" />
+</template>
+```
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vScrollLock } from '@vueuse/components'
+
+const data = ref([1, 2, 3, 4, 5, 6])
+const isLocked = ref(false)
+const toggleLock = useToggle(isLocked)
+</script>
+
+<template>
+  <div v-scroll-lock="isLocked">
+    <div v-for="item in data" :key="item">
+      {{ item }}
+    </div>
+  </div>
+  <button @click="toggleLock()">
+    Toggle lock state
+  </button>
+</template>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Lock scrolling of the element.
+ *
+ * @see https://vueuse.org/useScrollLock
+ * @param element
+ */
+export declare function useScrollLock(
+  element: MaybeRefOrGetter<
+    HTMLElement | SVGElement | Window | Document | null | undefined
+  >,
+  initialState?: boolean,
+): WritableComputedRef<boolean, boolean>
+```

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

@@ -0,0 +1,41 @@
+---
+category: State
+---
+
+# useSessionStorage
+
+Reactive [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage).
+
+## Usage
+
+Please refer to `useStorage`.
+
+## Type Declarations
+
+```ts
+export declare function useSessionStorage(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<string>,
+  options?: UseStorageOptions<string>,
+): RemovableRef<string>
+export declare function useSessionStorage(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<boolean>,
+  options?: UseStorageOptions<boolean>,
+): RemovableRef<boolean>
+export declare function useSessionStorage(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<number>,
+  options?: UseStorageOptions<number>,
+): RemovableRef<number>
+export declare function useSessionStorage<T>(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<T>,
+  options?: UseStorageOptions<T>,
+): RemovableRef<T>
+export declare function useSessionStorage<T = unknown>(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<null>,
+  options?: UseStorageOptions<T>,
+): RemovableRef<T>
+```

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

@@ -0,0 +1,67 @@
+---
+category: Browser
+---
+
+# useShare
+
+Reactive [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share). The Browser provides features that can share content in text or file.
+
+> The `share` method has to be called following a user gesture like a button click. It can’t simply be called on page load for example. That’s in place to help prevent abuse.
+
+## Usage
+
+```ts
+import { useShare } from '@vueuse/core'
+
+const { share, isSupported } = useShare()
+
+function startShare() {
+  share({
+    title: 'Hello',
+    text: 'Hello my friend!',
+    url: location.href,
+  })
+}
+```
+
+### Passing a source ref
+
+You can pass a `ref` to it, changes from the source ref will be reflected to your sharing options.
+
+```ts {6}
+import { ref } from 'vue'
+
+const shareOptions = ref<ShareOptions>({ text: 'foo' })
+const { share, isSupported } = useShare(shareOptions)
+
+shareOptions.value.text = 'bar'
+
+share()
+```
+
+## Type Declarations
+
+```ts
+export interface UseShareOptions {
+  title?: string
+  files?: File[]
+  text?: string
+  url?: string
+}
+export interface UseShareReturn extends Supportable {
+  share: (overrideOptions?: MaybeRefOrGetter<UseShareOptions>) => Promise<void>
+}
+/**
+ * Reactive Web Share API.
+ *
+ * @see https://vueuse.org/useShare
+ * @param shareOptions
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useShare(
+  shareOptions?: MaybeRefOrGetter<UseShareOptions>,
+  options?: ConfigurableNavigator,
+): UseShareReturn
+```

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

@@ -0,0 +1,276 @@
+---
+category: '@Integrations'
+---
+
+# useSortable
+
+Wrapper for [`sortable`](https://github.com/SortableJS/Sortable).
+
+For more information on what options can be passed, see [`Sortable.options`](https://github.com/SortableJS/Sortable#options) in the `Sortable` documentation.
+
+::: warning
+Currently, `useSortable` only implements drag-and-drop sorting for a single list.
+:::
+
+## Install
+
+```bash
+npm i sortablejs@^1
+```
+
+## Usage
+
+### Use template ref
+
+```vue
+<script setup lang="ts">
+import { useSortable } from '@vueuse/integrations/useSortable'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const list = shallowRef([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
+
+useSortable(el, list)
+</script>
+
+<template>
+  <div ref="el">
+    <div v-for="item in list" :key="item.id">
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+```
+
+### Use specifies the selector to operate on
+
+```vue
+<script setup lang="ts">
+import { useSortable } from '@vueuse/integrations/useSortable'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const list = shallowRef([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
+
+const animation = 200
+
+const { option } = useSortable(el, list, {
+  handle: '.handle',
+  // or option set
+  // animation
+})
+
+// You can use the option method to set and get the option of Sortable
+option('animation', animation)
+// option('animation') // 200
+</script>
+
+<template>
+  <div ref="el">
+    <div v-for="item in list" :key="item.id">
+      <span>{{ item.name }}</span>
+      <span class="handle">*</span>
+    </div>
+  </div>
+</template>
+```
+
+### Use a selector to get the root element
+
+```vue
+<script setup lang="ts">
+import { useSortable } from '@vueuse/integrations/useSortable'
+import { shallowRef } from 'vue'
+
+const list = shallowRef([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
+
+useSortable('#dv', list)
+</script>
+
+<template>
+  <div id="dv">
+    <div v-for="item in list" :key="item.id">
+      <span>{{ item.name }}</span>
+    </div>
+  </div>
+</template>
+```
+
+### Using Component
+
+```vue
+<script setup lang="ts">
+import { UseSortable } from '@vueuse/integrations/useSortable/component'
+import { shallowRef } from 'vue'
+
+const list = shallowRef([
+  { id: 1, name: 'a' },
+  { id: 2, name: 'b' },
+  { id: 3, name: 'c' },
+])
+</script>
+
+<template>
+  <UseSortable v-model="list" as="ol" :options="{ animation: 150 }">
+    <li v-for="item in list" :key="item.id">
+      {{ item.name }}
+    </li>
+  </UseSortable>
+</template>
+```
+
+You can also access the helper functions like `start`, `stop`, and `option` from the slot scope:
+
+```vue
+<template>
+  <UseSortable v-slot="{ stop, start }" v-model="list">
+    <button @click="stop()">
+      Stop Sorting
+    </button>
+    <button @click="start()">
+      Start Sorting
+    </button>
+    <div v-for="item in list" :key="item.id">
+      {{ item.name }}
+    </div>
+  </UseSortable>
+</template>
+```
+
+### Return Values
+
+| Property | Description                                                      |
+| -------- | ---------------------------------------------------------------- |
+| `start`  | Initialize the Sortable instance (called automatically on mount) |
+| `stop`   | Destroy the Sortable instance                                    |
+| `option` | Get or set Sortable options at runtime                           |
+
+```ts
+const { start, stop, option } = useSortable(el, list)
+
+// Stop sorting
+stop()
+
+// Start sorting again
+start()
+
+// Get/set options
+option('animation', 200) // set
+const animation = option('animation') // get
+```
+
+### Watch Element Changes
+
+Use the `watchElement` option to automatically reinitialize Sortable when the element changes (useful with `v-if`).
+
+```ts
+import { useSortable } from '@vueuse/integrations/useSortable'
+
+useSortable(el, list, {
+  watchElement: true, // auto-reinitialize when element changes
+})
+```
+
+### Custom Update Handler
+
+If you want to handle the `onUpdate` yourself, you can pass in `onUpdate` parameters, and we also exposed a function to move the item position.
+
+```ts
+import { moveArrayElement, useSortable } from '@vueuse/integrations/useSortable'
+
+useSortable(el, list, {
+  onUpdate: (e) => {
+    // do something
+    moveArrayElement(list, e.oldIndex, e.newIndex, e)
+    // nextTick required here as moveArrayElement is executed in a microtask
+    // so we need to wait until the next tick until that is finished.
+    nextTick(() => {
+      /* do something */
+    })
+  }
+})
+```
+
+### Helper Functions
+
+The following helper functions are also exported:
+
+| Function                                   | Description                                           |
+| ------------------------------------------ | ----------------------------------------------------- |
+| `moveArrayElement(list, from, to, event?)` | Move an element in an array from one index to another |
+| `insertNodeAt(parent, element, index)`     | Insert a DOM node at a specific index                 |
+| `removeNode(node)`                         | Remove a DOM node from its parent                     |
+
+## Type Declarations
+
+```ts
+export interface UseSortableReturn {
+  /**
+   * start sortable instance
+   */
+  start: () => void
+  /**
+   * destroy sortable instance
+   */
+  stop: () => void
+  /**
+   * Options getter/setter
+   * @param name a Sortable.Options property.
+   * @param value a value.
+   */
+  option: (<K extends keyof Sortable.Options>(
+    name: K,
+    value: Sortable.Options[K],
+  ) => void) &
+    (<K extends keyof Sortable.Options>(name: K) => Sortable.Options[K])
+}
+export interface UseSortableOptions extends Options, ConfigurableDocument {
+  /**
+   * Watch the element reference for changes and automatically reinitialize Sortable
+   * when the element changes.
+   *
+   * When `false` (default), Sortable is only initialized once on mount.
+   * You must manually call `start()` if the element reference changes.
+   *
+   * When `true`, automatically watches the element reference and reinitializes
+   * Sortable whenever it changes (e.g., conditional rendering with v-if).
+   *
+   * @default false
+   */
+  watchElement?: boolean
+}
+export declare function useSortable<T>(
+  selector: string,
+  list: MaybeRef<T[]>,
+  options?: UseSortableOptions,
+): UseSortableReturn
+export declare function useSortable<T>(
+  el: MaybeRefOrGetter<MaybeElement>,
+  list: MaybeRef<T[]>,
+  options?: UseSortableOptions,
+): UseSortableReturn
+/**
+ * Inserts a element into the DOM at a given index.
+ * @param parentElement
+ * @param element
+ * @param {number} index
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+ */
+export declare function insertNodeAt(
+  parentElement: Element,
+  element: Element,
+  index: number,
+): void
+/**
+ * Removes a node from the DOM.
+ * @param {Node} node
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+ */
+export declare function removeNode(node: Node): void
+export declare function moveArrayElement<T>(
+  list: MaybeRef<T[]>,
+  from: number,
+  to: number,
+  e?: Sortable.SortableEvent | null,
+): void
+```