ads-fe 0.0.1

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

@@ -0,0 +1,58 @@
+---
+category: '@Electron'
+---
+
+# useIpcRendererInvoke
+
+Reactive [ipcRenderer.invoke API](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args) result. Make asynchronous operations look synchronous.
+
+## Usage
+
+```ts
+import { useIpcRendererInvoke } from '@vueuse/electron'
+import { computed } from 'vue'
+
+// enable nodeIntegration if you don't provide ipcRenderer explicitly
+// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
+// Ref result will return
+const result = useIpcRendererInvoke<string>('custom-channel', 'some data')
+const msg = computed(() => result.value?.msg)
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Returns Promise<any> - Resolves with the response from the main process.
+ *
+ * Send a message to the main process via channel and expect a result ~~asynchronously~~. As composition-api, it makes asynchronous operations look like synchronous.
+ *
+ * You need to provide `ipcRenderer` to this function.
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args
+ * @see https://vueuse.org/useIpcRendererInvoke
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useIpcRendererInvoke<T>(
+  ipcRenderer: IpcRenderer,
+  channel: string,
+  ...args: any[]
+): ShallowRef<T | null>
+/**
+ * Returns Promise<any> - Resolves with the response from the main process.
+ *
+ * Send a message to the main process via channel and expect a result ~~asynchronously~~. As composition-api, it makes asynchronous operations look like synchronous.
+ *
+ * `ipcRenderer` will be automatically gotten.
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args
+ * @see https://vueuse.org/useIpcRendererInvoke
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useIpcRendererInvoke<T>(
+  channel: string,
+  ...args: any[]
+): ShallowRef<T | null>
+```

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

@@ -0,0 +1,52 @@
+---
+category: '@Electron'
+---
+
+# useIpcRendererOn
+
+Use [ipcRenderer.on](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener) with ease and [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener) automatically on unmounted.
+
+## Usage
+
+```ts
+import { useIpcRendererOn } from '@vueuse/electron'
+
+// enable nodeIntegration if you don't provide ipcRenderer explicitly
+// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
+// remove listener automatically on unmounted
+useIpcRendererOn('custom-event', (event, ...args) => {
+  console.log(args)
+})
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Listens to channel, when a new message arrives listener would be called with listener(event, args...).
+ * [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener) automatically on unmounted.
+ *
+ * You need to provide `ipcRenderer` to this function.
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener
+ * @see https://vueuse.org/useIpcRendererOn
+ */
+export declare function useIpcRendererOn(
+  ipcRenderer: IpcRenderer,
+  channel: string,
+  listener: IpcRendererListener,
+): IpcRenderer
+/**
+ * Listens to channel, when a new message arrives listener would be called with listener(event, args...).
+ * [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener) automatically on unmounted.
+ *
+ * `ipcRenderer` will be automatically gotten.
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener
+ * @see https://vueuse.org/useIpcRendererOn
+ */
+export declare function useIpcRendererOn(
+  channel: string,
+  listener: IpcRendererListener,
+): IpcRenderer
+```

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

@@ -0,0 +1,57 @@
+---
+category: '@Integrations'
+---
+
+# useJwt
+
+Wrapper for [`jwt-decode`](https://github.com/auth0/jwt-decode).
+
+## Install
+
+```bash
+npm install jwt-decode@^4
+```
+
+## Usage
+
+```ts
+import { useJwt } from '@vueuse/integrations/useJwt'
+import { defineComponent } from 'vue'
+
+const encodedJwt = ref('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc')
+const { header, payload } = useJwt(encodedJwt)
+```
+
+## Type Declarations
+
+```ts
+export interface UseJwtOptions<Fallback> {
+  /**
+   * Value returned when encounter error on decoding
+   *
+   * @default null
+   */
+  fallbackValue?: Fallback
+  /**
+   * Error callback for decoding
+   */
+  onError?: (error: unknown) => void
+}
+export interface UseJwtReturn<Payload, Header, Fallback> {
+  header: ComputedRef<Header | Fallback>
+  payload: ComputedRef<Payload | Fallback>
+}
+/**
+ * Reactive decoded jwt token.
+ *
+ * @see https://vueuse.org/useJwt
+ */
+export declare function useJwt<
+  Payload extends object = JwtPayload,
+  Header extends object = JwtHeader,
+  Fallback = null,
+>(
+  encodedJwt: MaybeRefOrGetter<string>,
+  options?: UseJwtOptions<Fallback>,
+): UseJwtReturn<Payload, Header, Fallback>
+```

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

@@ -0,0 +1,87 @@
+---
+category: Sensors
+---
+
+# useKeyModifier
+
+Reactive [Modifier State](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState). Tracks state of any of the [supported modifiers](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState#browser_compatibility) - see Browser Compatibility notes.
+
+<CourseLink href="https://vueschool.io/lessons/alt-drag-to-clone-tasks?friend=vueuse">Learn useKeyModifier with this FREE video lesson from Vue School!</CourseLink>
+
+## Usage
+
+```ts
+import { useKeyModifier } from '@vueuse/core'
+
+const capsLockState = useKeyModifier('CapsLock')
+
+console.log(capsLockState.value)
+```
+
+## Events
+
+You can customize which events will prompt the state to update. By default, these are `mouseup`, `mousedown`, `keyup`, `keydown`. To customize these events:
+
+```ts
+import { useKeyModifier } from '@vueuse/core'
+
+const capsLockState = useKeyModifier('CapsLock', { events: ['mouseup', 'mousedown'] })
+
+console.log(capsLockState) // null
+
+// Caps Lock turned on with key press
+console.log(capsLockState) // null
+
+// Mouse button clicked
+console.log(capsLockState) // true
+```
+
+## Initial State
+
+By default, the returned ref will be `Ref<null>` until the first event is received. You can explicitly pass the initial state to it via:
+
+```ts
+import { useKeyModifier } from '@vueuse/core'
+// ---cut---
+const capsLockState1 = useKeyModifier('CapsLock') // Ref<boolean | null>
+const capsLockState2 = useKeyModifier('CapsLock', { initial: false }) // Ref<boolean>
+```
+
+## Type Declarations
+
+```ts
+export type KeyModifier =
+  | "Alt"
+  | "AltGraph"
+  | "CapsLock"
+  | "Control"
+  | "Fn"
+  | "FnLock"
+  | "Meta"
+  | "NumLock"
+  | "ScrollLock"
+  | "Shift"
+  | "Symbol"
+  | "SymbolLock"
+export interface UseModifierOptions<Initial> extends ConfigurableDocument {
+  /**
+   * Event names that will prompt update to modifier states
+   *
+   * @default ['mousedown', 'mouseup', 'keydown', 'keyup']
+   */
+  events?: WindowEventName[]
+  /**
+   * Initial value of the returned ref
+   *
+   * @default null
+   */
+  initial?: Initial
+}
+export type UseKeyModifierReturn<Initial> = ShallowRef<
+  Initial extends boolean ? boolean : boolean | null
+>
+export declare function useKeyModifier<Initial extends boolean | null>(
+  modifier: KeyModifier,
+  options?: UseModifierOptions<Initial>,
+): UseKeyModifierReturn<Initial>
+```

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

@@ -0,0 +1,63 @@
+---
+category: State
+---
+
+# useLastChanged
+
+Records the timestamp of the last change
+
+## Usage
+
+```ts
+import { useLastChanged } from '@vueuse/core'
+import { nextTick } from 'vue'
+
+const a = ref(0)
+const lastChanged = useLastChanged(a)
+
+a.value = 1
+
+await nextTick()
+
+console.log(lastChanged.value) // 1704709379457
+```
+
+By default the change is recorded on the next tick (`watch()` with `flush: 'post'`). If you want to record the change immediately, pass `flush: 'sync'` as the second argument.
+
+```ts
+import { useLastChanged } from '@vueuse/core'
+
+const a = ref(0)
+const lastChanged = useLastChanged(a, { flush: 'sync' })
+
+a.value = 1
+
+console.log(lastChanged.value) // 1704709379457
+```
+
+## Type Declarations
+
+```ts
+export interface UseLastChangedOptions<
+  Immediate extends boolean,
+  InitialValue extends number | null | undefined = undefined,
+> extends WatchOptions<Immediate> {
+  initialValue?: InitialValue
+}
+export type UseLastChangedReturn =
+  | Readonly<ShallowRef<number | null>>
+  | Readonly<ShallowRef<number>>
+/**
+ * Records the timestamp of the last change
+ *
+ * @see https://vueuse.org/useLastChanged
+ */
+export declare function useLastChanged(
+  source: WatchSource,
+  options?: UseLastChangedOptions<false>,
+): Readonly<ShallowRef<number | null>>
+export declare function useLastChanged(
+  source: WatchSource,
+  options: UseLastChangedOptions<true> | UseLastChangedOptions<boolean, number>,
+): Readonly<ShallowRef<number>>
+```

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

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

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

@@ -0,0 +1,245 @@
+---
+category: Sensors
+---
+
+# useMagicKeys
+
+Reactive keys pressed state, with magical keys combination support.
+
+## Usage
+
+```ts
+import { useMagicKeys } from '@vueuse/core'
+
+const { shift, space, a /* keys you want to monitor */ } = useMagicKeys()
+
+watch(space, (v) => {
+  if (v)
+    console.log('space has been pressed')
+})
+
+watchEffect(() => {
+  if (shift.value && a.value)
+    console.log('Shift + A have been pressed')
+})
+```
+
+::: tip NOTE
+If you're using TypeScript with `noUncheckedIndexedAccess` enabled in your `tsconfig.json` (or using Nuxt which enables it by default), the destructured keys will have the type `ComputedRef<boolean> | undefined`.
+
+The `noUncheckedIndexedAccess` TypeScript option adds `undefined` to any un-declared field accessed via index signatures. Since `useMagicKeys()` uses an index signature to allow accessing any key dynamically, TypeScript will treat destructured properties as potentially undefined for type safety.
+
+You'll need to use optional chaining or wrap with a getter function:
+
+```ts
+const { shift, space, a } = useMagicKeys()
+
+watch(
+  () => space?.value,
+  (v) => {
+    if (v)
+      console.log('space has been pressed')
+  },
+)
+
+watchEffect(() => {
+  if (shift?.value && a?.value)
+    console.log('Shift + A have been pressed')
+})
+```
+
+Check the [TypeScript documentation](https://www.typescriptlang.org/tsconfig/#noUncheckedIndexedAccess) for more details about `noUncheckedIndexedAccess`.
+
+:::
+
+Check out [all the possible keycodes](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values).
+
+### Combinations
+
+You can magically use combinations (shortcuts/hotkeys) by connecting keys with `+` or `_`.
+
+```ts
+import { useMagicKeys } from '@vueuse/core'
+
+const keys = useMagicKeys()
+const shiftCtrlA = keys['Shift+Ctrl+A']
+
+watch(shiftCtrlA, (v) => {
+  if (v)
+    console.log('Shift + Ctrl + A have been pressed')
+})
+```
+
+```ts
+import { useMagicKeys } from '@vueuse/core'
+
+const { Ctrl_A_B, space, alt_s /* ... */ } = useMagicKeys()
+
+watch(Ctrl_A_B, (v) => {
+  if (v)
+    console.log('Control+A+B have been pressed')
+})
+```
+
+You can also use `whenever` function to make it shorter
+
+```ts
+import { useMagicKeys, whenever } from '@vueuse/core'
+
+const keys = useMagicKeys()
+
+whenever(keys.shift_space, () => {
+  console.log('Shift+Space have been pressed')
+})
+```
+
+### Current Pressed keys
+
+A special property `current` is provided to representing all the keys been pressed currently.
+
+```ts
+import { useMagicKeys, whenever } from '@vueuse/core'
+
+const { current } = useMagicKeys()
+
+console.log(current) // Set { 'control', 'a' }
+
+whenever(
+  () => current.has('a') && !current.has('b'),
+  () => console.log('A is pressed but not B'),
+)
+```
+
+### Key Aliasing
+
+```ts
+import { useMagicKeys, whenever } from '@vueuse/core'
+
+const { shift_cool } = useMagicKeys({
+  aliasMap: {
+    cool: 'space',
+  },
+})
+
+whenever(shift_cool, () => console.log('Shift + Space have been pressed'))
+```
+
+By default, we have some [preconfigured alias for common practices](https://github.com/vueuse/vueuse/blob/main/packages/core/useMagicKeys/aliasMap.ts).
+
+### Conditionally Disable
+
+You might have some `<input />` elements in your apps, and you don't want to trigger the magic keys handling when users focused on those inputs. There is an example of using `useActiveElement` and `logicAnd` to do that.
+
+```ts
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
+import { logicAnd } from '@vueuse/math'
+
+const activeElement = useActiveElement()
+const notUsingInput = computed(() =>
+  activeElement.value?.tagName !== 'INPUT'
+  && activeElement.value?.tagName !== 'TEXTAREA',)
+
+const { tab } = useMagicKeys()
+
+whenever(logicAnd(tab, notUsingInput), () => {
+  console.log('Tab has been pressed outside of inputs!')
+})
+```
+
+### Custom Event Handler
+
+```ts
+import { useMagicKeys, whenever } from '@vueuse/core'
+
+const { ctrl_s } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.ctrlKey && e.key === 's' && e.type === 'keydown')
+      e.preventDefault()
+  },
+})
+
+whenever(ctrl_s, () => console.log('Ctrl+S have been pressed'))
+```
+
+> ⚠️ This usage is NOT recommended, please use with caution.
+
+### Reactive Mode
+
+By default, the values of `useMagicKeys()` are `Ref<boolean>`. If you want to use the object in the template, you can set it to reactive mode.
+
+```ts
+import { useMagicKeys } from '@vueuse/core'
+// ---cut---
+const keys = useMagicKeys({ reactive: true })
+```
+
+```vue
+<template>
+  <div v-if="keys.shift">
+    You are holding the Shift key!
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseMagicKeysOptions<Reactive extends boolean> {
+  /**
+   * Returns a reactive object instead of an object of refs
+   *
+   * @default false
+   */
+  reactive?: Reactive
+  /**
+   * Target for listening events
+   *
+   * @default window
+   */
+  target?: MaybeRefOrGetter<EventTarget>
+  /**
+   * Alias map for keys, all the keys should be lowercase
+   * { target: keycode }
+   *
+   * @example { ctrl: "control" }
+   * @default <predefined-map>
+   */
+  aliasMap?: Record<string, string>
+  /**
+   * Register passive listener
+   *
+   * @default true
+   */
+  passive?: boolean
+  /**
+   * Custom event handler for keydown/keyup event.
+   * Useful when you want to apply custom logic.
+   *
+   * When using `e.preventDefault()`, you will need to pass `passive: false` to useMagicKeys().
+   */
+  onEventFired?: (e: KeyboardEvent) => void | boolean
+}
+export interface MagicKeysInternal {
+  /**
+   * A Set of currently pressed keys,
+   * Stores raw keyCodes.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
+   */
+  current: Set<string>
+}
+export type UseMagicKeysReturn<Reactive extends boolean> = Readonly<
+  Record<string, Reactive extends true ? boolean : ComputedRef<boolean>> &
+    MagicKeysInternal
+>
+/**
+ * Reactive keys pressed state, with magical keys combination support.
+ *
+ * @see https://vueuse.org/useMagicKeys
+ */
+export declare function useMagicKeys<T extends boolean = false>(
+  options?: UseMagicKeysOptions<T>,
+): UseMagicKeysReturn<T>
+export { DefaultMagicKeysAliasMap } from "./aliasMap"
+```