ads-fe 0.0.1

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

@@ -0,0 +1,121 @@
+---
+category: Browser
+---
+
+# useUrlSearchParams
+
+Reactive [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
+
+## Usage
+
+```ts
+import { useUrlSearchParams } from '@vueuse/core'
+
+const params = useUrlSearchParams('history')
+
+console.log(params.foo) // 'bar'
+
+params.foo = 'bar'
+params.vueuse = 'awesome'
+// url updated to `?foo=bar&vueuse=awesome`
+```
+
+### Hash Mode
+
+When using with hash mode route, specify the `mode` to `hash`
+
+```ts
+import { useUrlSearchParams } from '@vueuse/core'
+
+const params = useUrlSearchParams('hash')
+
+params.foo = 'bar'
+params.vueuse = 'awesome'
+// url updated to `#/your/route?foo=bar&vueuse=awesome`
+```
+
+### Hash Params
+
+When using with history mode route, but want to use hash as params, specify the `mode` to `hash-params`
+
+```ts
+import { useUrlSearchParams } from '@vueuse/core'
+
+const params = useUrlSearchParams('hash-params')
+
+params.foo = 'bar'
+params.vueuse = 'awesome'
+// url updated to `/your/route#foo=bar&vueuse=awesome`
+```
+
+### Custom Stringify Function
+
+You can provide a custom function to serialize URL parameters using the `stringify` option. This is useful when you need special formatting for your query string.
+
+```js
+import { useUrlSearchParams } from '@vueuse/core'
+
+// Custom stringify function that removes equal signs for empty values
+const params = useUrlSearchParams('history', {
+  stringify: (params) => {
+    return params.toString().replace(/=(&|$)/g, '$1')
+  }
+})
+
+params.foo = ''
+params.bar = 'value'
+// url updated to `?foo&bar=value` instead of `?foo=&bar=value`
+```
+
+## Type Declarations
+
+```ts
+export type UrlParams = Record<string, string[] | string>
+export interface UseUrlSearchParamsOptions<T> extends ConfigurableWindow {
+  /**
+   * @default true
+   */
+  removeNullishValues?: boolean
+  /**
+   * @default false
+   */
+  removeFalsyValues?: boolean
+  /**
+   * @default {}
+   */
+  initialValue?: T
+  /**
+   * Write back to `window.history` automatically
+   *
+   * @default true
+   */
+  write?: boolean
+  /**
+   * Write mode for `window.history` when `write` is enabled
+   * - `replace`: replace the current history entry
+   * - `push`: push a new history entry
+   * @default 'replace'
+   */
+  writeMode?: "replace" | "push"
+  /**
+   * Custom function to serialize URL parameters
+   * When provided, this function will be used instead of the default URLSearchParams.toString()
+   * @param params The URLSearchParams object to serialize
+   * @returns The serialized query string (should not include the leading '?' or '#')
+   */
+  stringify?: (params: URLSearchParams) => string
+}
+/**
+ * Reactive URLSearchParams
+ *
+ * @see https://vueuse.org/useUrlSearchParams
+ * @param mode
+ * @param options
+ */
+export declare function useUrlSearchParams<
+  T extends Record<string, any> = UrlParams,
+>(
+  mode?: "history" | "hash" | "hash-params",
+  options?: UseUrlSearchParamsOptions<T>,
+): T
+```

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

@@ -0,0 +1,96 @@
+---
+category: Sensors
+related: useDevicesList, usePermission
+---
+
+# useUserMedia
+
+Reactive [`mediaDevices.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) streaming.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useUserMedia } from '@vueuse/core'
+import { useTemplateRef, watchEffect } from 'vue'
+
+const { stream, start } = useUserMedia()
+start()
+
+const videoRef = useTemplateRef('video')
+watchEffect(() => {
+  // preview on a video element
+  videoRef.value.srcObject = stream.value
+})
+</script>
+
+<template>
+  <video ref="video" />
+</template>
+```
+
+### Devices
+
+```ts
+import { useDevicesList, useUserMedia } from '@vueuse/core'
+import { computed, reactive } from 'vue'
+
+const {
+  videoInputs: cameras,
+  audioInputs: microphones,
+} = useDevicesList({
+  requestPermissions: true,
+})
+const currentCamera = computed(() => cameras.value[0]?.deviceId)
+const currentMicrophone = computed(() => microphones.value[0]?.deviceId)
+
+const { stream } = useUserMedia({
+  constraints: reactive({
+    video: { deviceId: currentCamera },
+    audio: { deviceId: currentMicrophone, }
+  })
+})
+```
+
+## Type Declarations
+
+```ts
+export interface UseUserMediaOptions extends ConfigurableNavigator {
+  /**
+   * If the stream is enabled
+   * @default false
+   */
+  enabled?: MaybeRef<boolean>
+  /**
+   * Recreate stream when deviceIds or constraints changed
+   *
+   * @default true
+   */
+  autoSwitch?: MaybeRef<boolean>
+  /**
+   * MediaStreamConstraints to be applied to the requested MediaStream
+   * If provided, the constraints will override videoDeviceId and audioDeviceId
+   *
+   * @default {}
+   */
+  constraints?: MaybeRef<MediaStreamConstraints>
+}
+export interface UseUserMediaReturn extends Supportable {
+  stream: Ref<MediaStream | undefined>
+  start: () => Promise<MediaStream | undefined>
+  stop: () => void
+  restart: () => Promise<MediaStream | undefined>
+  constraints: Ref<MediaStreamConstraints | undefined>
+  enabled: ShallowRef<boolean>
+  autoSwitch: ShallowRef<boolean>
+}
+/**
+ * Reactive `mediaDevices.getUserMedia` streaming
+ *
+ * @see https://vueuse.org/useUserMedia
+ * @param options
+ */
+export declare function useUserMedia(
+  options?: UseUserMediaOptions,
+): UseUserMediaReturn
+```

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

@@ -0,0 +1,182 @@
+---
+category: Component
+---
+
+# useVModel
+
+Shorthand for v-model binding, props + emit -> ref
+
+> We encourage you to use Vue's [`defineModel`](https://vuejs.org/api/sfc-script-setup.html#definemodel) over this composable, however there are some edge-cases like using `TSX` or the `deep: true` option that `defineModel` doesn't support.
+
+## Usage
+
+```ts
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  modelValue: string
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const data = useVModel(props, 'modelValue', emit)
+```
+
+### Options API
+
+```ts
+import { useVModel } from '@vueuse/core'
+
+export default {
+  setup(props, { emit }) {
+    const data = useVModel(props, 'data', emit)
+
+    console.log(data.value) // props.data
+    data.value = 'foo' // emit('update:data', 'foo')
+  },
+}
+```
+
+## Options
+
+### Passive Mode
+
+By default, `useVModel` returns a computed ref. In passive mode, it creates a local ref that syncs with the prop via `watch`, allowing deep reactivity tracking.
+
+```ts
+const data = useVModel(props, 'modelValue', emit, { passive: true })
+```
+
+### Deep Watching
+
+When using `passive: true`, you can enable deep watching for nested object changes:
+
+```ts
+const data = useVModel(props, 'modelValue', emit, {
+  passive: true,
+  deep: true,
+})
+```
+
+### Clone Values
+
+Clone the prop value to avoid mutating the original object. Set to `true` to use `JSON.parse(JSON.stringify())` or provide a custom clone function.
+
+```ts
+const data = useVModel(props, 'modelValue', emit, {
+  clone: true,
+  // or provide custom clone function
+  // clone: (val) => structuredClone(val),
+})
+```
+
+### Default Value
+
+Provide a default value when the prop is undefined:
+
+```ts
+const data = useVModel(props, 'modelValue', emit, {
+  defaultValue: 'default',
+})
+```
+
+### Custom Event Name
+
+Override the default `update:propName` event name:
+
+```ts
+const data = useVModel(props, 'value', emit, {
+  eventName: 'change',
+})
+```
+
+### Emit Validation
+
+Use `shouldEmit` to validate before emitting. Return `false` to prevent the emit:
+
+```ts
+const data = useVModel(props, 'modelValue', emit, {
+  shouldEmit: (value) => {
+    // Only emit if value is valid
+    return value.length > 0
+  },
+})
+```
+
+## Type Declarations
+
+```ts
+export interface UseVModelOptions<T, Passive extends boolean = false> {
+  /**
+   * When passive is set to `true`, it will use `watch` to sync with props and ref.
+   * Instead of relying on the `v-model` or `.sync` to work.
+   *
+   * @default false
+   */
+  passive?: Passive
+  /**
+   * When eventName is set, it's value will be used to overwrite the emit event name.
+   *
+   * @default undefined
+   */
+  eventName?: string
+  /**
+   * Attempting to check for changes of properties in a deeply nested object or array.
+   * Apply only when `passive` option is set to `true`
+   *
+   * @default false
+   */
+  deep?: boolean
+  /**
+   * Defining default value for return ref when no value is passed.
+   *
+   * @default undefined
+   */
+  defaultValue?: T
+  /**
+   * Clone the props.
+   * Accepts a custom clone function.
+   * When setting to `true`, it will use `JSON.parse(JSON.stringify(value))` to clone.
+   *
+   * @default false
+   */
+  clone?: boolean | CloneFn<T>
+  /**
+   * The hook before triggering the emit event can be used for form validation.
+   * if false is returned, the emit event will not be triggered.
+   *
+   * @default undefined
+   */
+  shouldEmit?: (v: T) => boolean
+}
+/**
+ * Shorthand for v-model binding, props + emit -> ref
+ *
+ * @see https://vueuse.org/useVModel
+ * @param props
+ * @param key (default 'modelValue')
+ * @param emit
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useVModel<
+  P extends object,
+  K extends keyof P,
+  Name extends string,
+>(
+  props: P,
+  key?: K,
+  emit?: (name: Name, ...args: any[]) => void,
+  options?: UseVModelOptions<P[K], false>,
+): WritableComputedRef<P[K]>
+export declare function useVModel<
+  P extends object,
+  K extends keyof P,
+  Name extends string,
+>(
+  props: P,
+  key?: K,
+  emit?: (name: Name, ...args: any[]) => void,
+  options?: UseVModelOptions<P[K], true>,
+): Ref<UnwrapRef<P[K]>>
+```

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

@@ -0,0 +1,67 @@
+---
+category: Component
+related: useVModel
+---
+
+# useVModels
+
+Shorthand for props v-model binding. Think it like `toRefs(props)` but changes will also trigger emit.
+
+## Usage
+
+```ts
+import { useVModels } from '@vueuse/core'
+
+const props = defineProps({
+  foo: string,
+  bar: number,
+})
+
+const emit = defineEmits(['update:foo', 'update:bar'])
+
+const { foo, bar } = useVModels(props, emit)
+```
+
+### Options API
+
+```ts
+import { useVModels } from '@vueuse/core'
+
+export default {
+  props: {
+    foo: String,
+    bar: Number,
+  },
+  setup(props, { emit }) {
+    const { foo, bar } = useVModels(props, emit)
+
+    console.log(foo.value) // props.foo
+    foo.value = 'foo' // emit('update:foo', 'foo')
+  },
+}
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Shorthand for props v-model binding. Think like `toRefs(props)` but changes will also emit out.
+ *
+ * @see https://vueuse.org/useVModels
+ * @param props
+ * @param emit
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useVModels<P extends object, Name extends string>(
+  props: P,
+  emit?: (name: Name, ...args: any[]) => void,
+  options?: UseVModelOptions<any, true>,
+): ToRefs<P>
+export declare function useVModels<P extends object, Name extends string>(
+  props: P,
+  emit?: (name: Name, ...args: any[]) => void,
+  options?: UseVModelOptions<any, false>,
+): ToRefs<P>
+```

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

@@ -0,0 +1,86 @@
+---
+category: Browser
+---
+
+# useVibrate
+
+Reactive [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API)
+
+Most modern mobile devices include vibration hardware, which lets software
+code provides physical feedback to the user by causing the device to shake.
+
+The Vibration API offers Web apps the ability to access this hardware,
+if it exists, and does nothing if the device doesn't support it.
+
+## Usage
+
+Vibration is described as a pattern of on-off pulses, which may be of varying
+lengths.
+
+The pattern may consist of either a single integer describing the
+number of milliseconds to vibrate, or an array of integers describing
+a pattern of vibrations and pauses.
+
+```ts
+import { useVibrate } from '@vueuse/core'
+
+// This vibrates the device for 300 ms
+// then pauses for 100 ms before vibrating the device again for another 300 ms:
+const { vibrate, stop, isSupported } = useVibrate({ pattern: [300, 100, 300] })
+
+// Start the vibration, it will automatically stop when the pattern is complete:
+vibrate()
+
+// But if you want to stop it, you can:
+stop()
+```
+
+## Type Declarations
+
+```ts
+export interface UseVibrateOptions
+  extends ConfigurableNavigator, ConfigurableScheduler {
+  /**
+   *
+   * Vibration Pattern
+   *
+   * An array of values describes alternating periods in which the
+   * device is vibrating and not vibrating. Each value in the array
+   * is converted to an integer, then interpreted alternately as
+   * the number of milliseconds the device should vibrate and the
+   * number of milliseconds it should not be vibrating
+   *
+   * @default []
+   *
+   */
+  pattern?: MaybeRefOrGetter<Arrayable<number>>
+  /**
+   * Interval to run a persistent vibration, in ms
+   *
+   * Pass `0` to disable
+   *
+   * @deprecated Please use `scheduler` option instead
+   * @default 0
+   *
+   */
+  interval: number
+}
+export interface UseVibrateReturn extends Supportable {
+  pattern: MaybeRefOrGetter<Arrayable<number>>
+  intervalControls?: Pausable
+  vibrate: (pattern?: Arrayable<number>) => void
+  stop: () => void
+}
+/**
+ * Reactive vibrate
+ *
+ * @see https://vueuse.org/useVibrate
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useVibrate(
+  options?: UseVibrateOptions,
+): UseVibrateReturn
+```