devskill 2.0.2

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

@@ -0,0 +1,96 @@
+---
+category: Browser
+---
+
+# useScreenOrientation
+
+Reactive [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API). It provides web developers with information about the user's current screen orientation.
+
+## Usage
+
+```ts
+import { useScreenOrientation } from '@vueuse/core'
+
+const {
+  isSupported,
+  orientation,
+  angle,
+  lockOrientation,
+  unlockOrientation,
+} = useScreenOrientation()
+```
+
+To lock the orientation, you can pass an [OrientationLockType](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/type) to the lockOrientation function:
+
+```ts
+import { useScreenOrientation } from '@vueuse/core'
+
+const {
+  isSupported,
+  orientation,
+  angle,
+  lockOrientation,
+  unlockOrientation,
+} = useScreenOrientation()
+
+lockOrientation('portrait-primary')
+```
+
+and then unlock again, with the following:
+
+```ts
+import { useScreenOrientation } from '@vueuse/core'
+
+const { unlockOrientation } = useScreenOrientation()
+// ---cut---
+unlockOrientation()
+```
+
+Accepted orientation types are one of `"landscape-primary"`, `"landscape-secondary"`, `"portrait-primary"`, `"portrait-secondary"`, `"any"`, `"landscape"`, `"natural"` and `"portrait"`.
+
+[Screen Orientation API MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API)
+
+## Type Declarations
+
+```ts
+export type OrientationType =
+  | "portrait-primary"
+  | "portrait-secondary"
+  | "landscape-primary"
+  | "landscape-secondary"
+export type OrientationLockType =
+  | "any"
+  | "natural"
+  | "landscape"
+  | "portrait"
+  | "portrait-primary"
+  | "portrait-secondary"
+  | "landscape-primary"
+  | "landscape-secondary"
+export interface ScreenOrientation extends EventTarget {
+  lock: (orientation: OrientationLockType) => Promise<void>
+  unlock: () => void
+  readonly type: OrientationType
+  readonly angle: number
+  addEventListener: (
+    type: "change",
+    listener: (this: this, ev: Event) => any,
+    useCapture?: boolean,
+  ) => void
+}
+/**
+ * Reactive screen orientation
+ *
+ * @see https://vueuse.org/useScreenOrientation
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useScreenOrientation(options?: ConfigurableWindow): {
+  isSupported: ComputedRef<boolean>
+  orientation: Ref<OrientationType | undefined, OrientationType | undefined>
+  angle: ShallowRef<number, number>
+  lockOrientation: (type: OrientationLockType) => Promise<void>
+  unlockOrientation: () => void
+}
+export type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>
+```

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

@@ -0,0 +1,60 @@
+---
+category: Browser
+---
+
+# useScreenSafeArea
+
+Reactive `env(safe-area-inset-*)`
+
+![image](https://webkit.org/wp-content/uploads/safe-areas-1.png)
+
+## Usage
+
+In order to make the page to be fully rendered in the screen, the additional attribute `viewport-fit=cover` within `viewport` meta tag must be set firstly, the viewport meta tag may look like this:
+
+```html
+<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
+```
+
+Then we could use `useScreenSafeArea` in the component as shown below:
+
+```ts
+import { useScreenSafeArea } from '@vueuse/core'
+
+const {
+  top,
+  right,
+  bottom,
+  left,
+} = useScreenSafeArea()
+```
+
+For further details, you may refer to this documentation: [Designing Websites for iPhone X](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)
+
+## Component Usage
+
+```vue
+<template>
+  <UseScreenSafeArea top right bottom left>
+    content
+  </UseScreenSafeArea>
+</template>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactive `env(safe-area-inset-*)`
+ *
+ * @see https://vueuse.org/useScreenSafeArea
+ */
+export declare function useScreenSafeArea(): {
+  top: ShallowRef<string, string>
+  right: ShallowRef<string, string>
+  bottom: ShallowRef<string, string>
+  left: ShallowRef<string, string>
+  update: () => void
+}
+export type UseScreenSafeAreaReturn = ReturnType<typeof useScreenSafeArea>
+```

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

@@ -0,0 +1,116 @@
+---
+category: Browser
+---
+
+# useScriptTag
+
+Creates a script tag, with support for automatically unloading (deleting) the script tag on unmount.
+
+If a script tag already exists for the given URL, `useScriptTag()` will not create another script tag, but keep in mind that depending on how you use it, `useScriptTag()` might have already loaded then unloaded that particular JS file from a previous call of `useScriptTag()`.
+
+## Usage
+
+```ts
+import { useScriptTag } from '@vueuse/core'
+
+useScriptTag(
+  'https://player.twitch.tv/js/embed/v1.js',
+  // on script tag loaded.
+  (el: HTMLScriptElement) => {
+    // do something
+  },
+)
+```
+
+The script will be automatically loaded when the component is mounted and removed when the component is unmounted.
+
+## Configuration
+
+Set `manual: true` to have manual control over the timing to load the script.
+
+```ts
+import { useScriptTag } from '@vueuse/core'
+
+const { scriptTag, load, unload } = useScriptTag(
+  'https://player.twitch.tv/js/embed/v1.js',
+  () => {
+    // do something
+  },
+  { manual: true },
+)
+
+// manual controls
+await load()
+await unload()
+```
+
+## Type Declarations
+
+```ts
+export interface UseScriptTagOptions extends ConfigurableDocument {
+  /**
+   * Load the script immediately
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Add `async` attribute to the script tag
+   *
+   * @default true
+   */
+  async?: boolean
+  /**
+   * Script type
+   *
+   * @default 'text/javascript'
+   */
+  type?: string
+  /**
+   * Manual controls the timing of loading and unloading
+   *
+   * @default false
+   */
+  manual?: boolean
+  crossOrigin?: "anonymous" | "use-credentials"
+  referrerPolicy?:
+    | "no-referrer"
+    | "no-referrer-when-downgrade"
+    | "origin"
+    | "origin-when-cross-origin"
+    | "same-origin"
+    | "strict-origin"
+    | "strict-origin-when-cross-origin"
+    | "unsafe-url"
+  noModule?: boolean
+  defer?: boolean
+  /**
+   * Add custom attribute to the script tag
+   *
+   */
+  attrs?: Record<string, string>
+  /**
+   * Nonce value for CSP (Content Security Policy)
+   * @default undefined
+   */
+  nonce?: string
+}
+/**
+ * Async script tag loading.
+ *
+ * @see https://vueuse.org/useScriptTag
+ * @param src
+ * @param onLoaded
+ * @param options
+ */
+export declare function useScriptTag(
+  src: MaybeRefOrGetter<string>,
+  onLoaded?: (el: HTMLScriptElement) => void,
+  options?: UseScriptTagOptions,
+): {
+  scriptTag: ShallowRef<HTMLScriptElement | null, HTMLScriptElement | null>
+  load: (waitForScriptLoad?: boolean) => Promise<HTMLScriptElement | boolean>
+  unload: () => void
+}
+export type UseScriptTagReturn = ReturnType<typeof useScriptTag>
+```

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
+}
+/**
+ * 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,
+): {
+  x: WritableComputedRef<number, number>
+  y: WritableComputedRef<number, number>
+  isScrolling: ShallowRef<boolean, boolean>
+  arrivedState: {
+    left: boolean
+    right: boolean
+    top: boolean
+    bottom: boolean
+  }
+  directions: {
+    left: boolean
+    right: boolean
+    top: boolean
+    bottom: boolean
+  }
+  measure(): void
+}
+export type UseScrollReturn = ReturnType<typeof useScroll>
+```

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,68 @@
+---
+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
+}
+/**
+ * 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,
+): {
+  isSupported: ComputedRef<boolean>
+  share: (overrideOptions?: MaybeRefOrGetter<UseShareOptions>) => Promise<void>
+}
+export type UseShareReturn = ReturnType<typeof useShare>
+```