npm - devskill - Versions diffs - 2.0.2 - Mend

devskill 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (654) hide show

package/skills/vueuse-functions/references/useSupported.md ADDED Viewed

@@ -0,0 +1,29 @@
+---
+category: Utilities
+---
+# useSupported
+SSR compatibility `isSupported`
+## Usage
+```ts
+import { useSupported } from '@vueuse/core'
+const isSupported = useSupported(() => navigator && 'getBattery' in navigator)
+if (isSupported.value) {
+  // do something
+  navigator.getBattery
+}
+```
+## Type Declarations
+```ts
+export declare function useSupported(
+  callback: () => unknown,
+): ComputedRef<boolean>
+export type UseSupportedReturn = ReturnType<typeof useSupported>
+```

package/skills/vueuse-functions/references/useSwipe.md ADDED Viewed

@@ -0,0 +1,75 @@
+---
+category: Sensors
+---
+# useSwipe
+Reactive swipe detection based on [`TouchEvents`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent).
+## Usage
+```vue
+<script setup lang="ts">
+import { useSwipe } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+const el = useTemplateRef('el')
+const { isSwiping, direction } = useSwipe(el)
+</script>
+<template>
+  <div ref="el">
+    Swipe here
+  </div>
+</template>
+```
+## Type Declarations
+```ts
+export type UseSwipeDirection = "up" | "down" | "left" | "right" | "none"
+export interface UseSwipeOptions extends ConfigurableWindow {
+  /**
+   * Register events as passive
+   *
+   * @default true
+   */
+  passive?: boolean
+  /**
+   * @default 50
+   */
+  threshold?: number
+  /**
+   * Callback on swipe start
+   */
+  onSwipeStart?: (e: TouchEvent) => void
+  /**
+   * Callback on swipe moves
+   */
+  onSwipe?: (e: TouchEvent) => void
+  /**
+   * Callback on swipe ends
+   */
+  onSwipeEnd?: (e: TouchEvent, direction: UseSwipeDirection) => void
+}
+export interface UseSwipeReturn {
+  isSwiping: ShallowRef<boolean>
+  direction: ComputedRef<UseSwipeDirection>
+  coordsStart: Readonly<Position>
+  coordsEnd: Readonly<Position>
+  lengthX: ComputedRef<number>
+  lengthY: ComputedRef<number>
+  stop: () => void
+}
+/**
+ * Reactive swipe detection.
+ *
+ * @see https://vueuse.org/useSwipe
+ * @param target
+ * @param options
+ */
+export declare function useSwipe(
+  target: MaybeRefOrGetter<EventTarget | null | undefined>,
+  options?: UseSwipeOptions,
+): UseSwipeReturn
+```

package/skills/vueuse-functions/references/useTemplateRefsList.md ADDED Viewed

@@ -0,0 +1,37 @@
+---
+category: Component
+---
+# useTemplateRefsList
+Shorthand for binding refs to template elements and components inside `v-for`.
+## Usage
+```vue
+<script setup lang="ts">
+import { useTemplateRefsList } from '@vueuse/core'
+import { onUpdated } from 'vue'
+const refs = useTemplateRefsList<HTMLDivElement>()
+onUpdated(() => {
+  console.log(refs)
+})
+</script>
+<template>
+  <div v-for="i of 5" :key="i" :ref="refs.set" />
+</template>
+```
+## Type Declarations
+```ts
+export type TemplateRefsList<T> = T[] & {
+  set: (el: object | null) => void
+}
+export declare function useTemplateRefsList<T = Element>(): Readonly<
+  Ref<Readonly<TemplateRefsList<T>>>
+>
+```

package/skills/vueuse-functions/references/useTextDirection.md ADDED Viewed

@@ -0,0 +1,75 @@
+---
+category: Browser
+---
+# useTextDirection
+Reactive [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) of the element's text.
+## Usage
+```ts
+import { useTextDirection } from '@vueuse/core'
+const dir = useTextDirection() // Ref<'ltr' | 'rtl' | 'auto'>
+```
+By default, it returns `rtl` direction when dir `rtl` is applied to the `html` tag, for example:
+```html
+<!--ltr-->
+<html>
+  ...
+</html>
+<!--rtl-->
+<html dir="rtl">
+  ...
+</html>
+```
+## Options
+```ts
+import { useTextDirection } from '@vueuse/core'
+const mode = useTextDirection({
+  selector: 'body'
+}) // Ref<'ltr' | 'rtl' | 'auto'>
+```
+## Type Declarations
+```ts
+export type UseTextDirectionValue = "ltr" | "rtl" | "auto"
+export interface UseTextDirectionOptions extends ConfigurableDocument {
+  /**
+   * CSS Selector for the target element applying to
+   *
+   * @default 'html'
+   */
+  selector?: string
+  /**
+   * Observe `document.querySelector(selector)` changes using MutationObserve
+   *
+   * @default false
+   */
+  observe?: boolean
+  /**
+   * Initial value
+   *
+   * @default 'ltr'
+   */
+  initialValue?: UseTextDirectionValue
+}
+/**
+ * Reactive dir of the element's text.
+ *
+ * @see https://vueuse.org/useTextDirection
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useTextDirection(
+  options?: UseTextDirectionOptions,
+): WritableComputedRef<UseTextDirectionValue, UseTextDirectionValue>
+```

package/skills/vueuse-functions/references/useTextSelection.md ADDED Viewed

@@ -0,0 +1,40 @@
+---
+category: Sensors
+---
+# useTextSelection
+Reactively track user text selection based on [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection).
+## Usage
+```vue
+<script setup lang="ts">
+import { useTextSelection } from '@vueuse/core'
+const state = useTextSelection()
+</script>
+<template>
+  <p>{{ state.text }}</p>
+</template>
+```
+## Type Declarations
+```ts
+/**
+ * Reactively track user text selection based on [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection).
+ *
+ * @see https://vueuse.org/useTextSelection
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useTextSelection(options?: ConfigurableWindow): {
+  text: ComputedRef<string>
+  rects: ComputedRef<DOMRect[]>
+  ranges: ComputedRef<Range[]>
+  selection: ShallowRef<Selection | null, Selection | null>
+}
+export type UseTextSelectionReturn = ReturnType<typeof useTextSelection>
+```

package/skills/vueuse-functions/references/useTextareaAutosize.md ADDED Viewed

@@ -0,0 +1,97 @@
+---
+category: Browser
+---
+# useTextareaAutosize
+Automatically update the height of a textarea depending on the content.
+## Usage
+### Simple example
+```vue
+<script setup lang="ts">
+import { useTextareaAutosize } from '@vueuse/core'
+const { textarea, input } = useTextareaAutosize()
+</script>
+<template>
+  <textarea
+    ref="textarea"
+    v-model="input"
+    class="resize-none"
+    placeholder="What's on your mind?"
+  />
+</template>
+```
+::: info
+It's recommended to reset the scrollbar styles for the textarea element to avoid incorrect height values for large amounts of text.
+```css
+textarea {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+textarea::-webkit-scrollbar {
+  display: none;
+}
+```
+:::
+### With `rows` attribute
+If you need support for the rows attribute on a textarea element, then you should set the `styleProp` option to `minHeight`.
+```vue
+<script setup lang="ts">
+import { useTextareaAutosize } from '@vueuse/core'
+const { textarea, input } = useTextareaAutosize({ styleProp: 'minHeight' })
+</script>
+<template>
+  <textarea
+    ref="textarea"
+    v-model="input"
+    class="resize-none"
+    placeholder="What's on your mind?"
+    rows="3"
+  />
+</template>
+```
+## Type Declarations
+```ts
+export interface UseTextareaAutosizeOptions extends ConfigurableWindow {
+  /** Textarea element to autosize. */
+  element?: MaybeRef<HTMLTextAreaElement | undefined | null>
+  /** Textarea content. */
+  input?: MaybeRef<string>
+  /** Watch sources that should trigger a textarea resize. */
+  watch?: WatchSource | MultiWatchSources
+  /** Function called when the textarea size changes. */
+  onResize?: () => void
+  /** Specify style target to apply the height based on textarea content. If not provided it will use textarea it self.  */
+  styleTarget?: MaybeRef<HTMLElement | undefined>
+  /** Specify the style property that will be used to manipulate height. Can be `height | minHeight`. Default value is `height`. */
+  styleProp?: "height" | "minHeight"
+}
+export declare function useTextareaAutosize(
+  options?: UseTextareaAutosizeOptions,
+): {
+  textarea: Ref<
+    HTMLTextAreaElement | null | undefined,
+    HTMLTextAreaElement | null | undefined
+  >
+  input: Ref<string, string>
+  triggerResize: () => void
+}
+export type UseTextareaAutosizeReturn = ReturnType<typeof useTextareaAutosize>
+```

package/skills/vueuse-functions/references/useThrottleFn.md ADDED Viewed

@@ -0,0 +1,57 @@
+---
+category: Utilities
+related: refThrottled, refDebounced, useDebounceFn
+---
+# useThrottleFn
+Throttle execution of a function. Especially useful for rate limiting execution of handlers on events like resize and scroll.
+> Throttle is a spring that throws balls: after a ball flies out it needs some time to shrink back, so it cannot throw any more balls unless it's ready.
+## Usage
+```ts
+import { useThrottleFn } from '@vueuse/core'
+const throttledFn = useThrottleFn(() => {
+  // do something, it will be called at most 1 time per second
+}, 1000)
+useEventListener(window, 'resize', throttledFn)
+```
+## Recommended Reading
+- [**Debounce vs Throttle**: Definitive Visual Guide](https://kettanaito.com/blog/debounce-vs-throttle)
+## Type Declarations
+```ts
+/**
+ * Throttle execution of a function. Especially useful for rate limiting
+ * execution of handlers on events like resize and scroll.
+ *
+ * @param   fn             A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
+ *                                    to `callback` when the throttled-function is executed.
+ * @param   ms             A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
+ *                                    (default value: 200)
+ *
+ * @param [trailing] if true, call fn again after the time is up (default value: false)
+ *
+ * @param [leading] if true, call fn on the leading edge of the ms timeout (default value: true)
+ *
+ * @param [rejectOnCancel] if true, reject the last call if it's been cancel (default value: false)
+ *
+ * @return  A new, throttled, function.
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useThrottleFn<T extends FunctionArgs>(
+  fn: T,
+  ms?: MaybeRefOrGetter<number>,
+  trailing?: boolean,
+  leading?: boolean,
+  rejectOnCancel?: boolean,
+): PromisifyFn<T>
+```

package/skills/vueuse-functions/references/useThrottledRefHistory.md ADDED Viewed

@@ -0,0 +1,47 @@
+---
+category: State
+related: useDebouncedRefHistory, useRefHistory
+---
+# useThrottledRefHistory
+Shorthand for `useRefHistory` with throttled filter.
+## Usage
+This function takes the first snapshot right after the counter's value was changed and the second with a delay of 1000ms.
+```ts
+import { useThrottledRefHistory } from '@vueuse/core'
+import { shallowRef } from 'vue'
+const counter = shallowRef(0)
+const { history, undo, redo } = useThrottledRefHistory(counter, { deep: true, throttle: 1000 })
+```
+## Type Declarations
+```ts
+export type UseThrottledRefHistoryOptions<Raw, Serialized = Raw> = Omit<
+  UseRefHistoryOptions<Raw, Serialized>,
+  "eventFilter"
+> & {
+  throttle?: MaybeRef<number>
+  trailing?: boolean
+}
+export type UseThrottledRefHistoryReturn<
+  Raw,
+  Serialized = Raw,
+> = UseRefHistoryReturn<Raw, Serialized>
+/**
+ * Shorthand for [useRefHistory](https://vueuse.org/useRefHistory) with throttled filter.
+ *
+ * @see https://vueuse.org/useThrottledRefHistory
+ * @param source
+ * @param options
+ */
+export declare function useThrottledRefHistory<Raw, Serialized = Raw>(
+  source: Ref<Raw>,
+  options?: UseThrottledRefHistoryOptions<Raw, Serialized>,
+): UseThrottledRefHistoryReturn<Raw, Serialized>
+```

package/skills/vueuse-functions/references/useTimeAgo.md ADDED Viewed

@@ -0,0 +1,154 @@
+---
+category: Time
+---
+# useTimeAgo
+Reactive time ago. Automatically update the time ago string when the time changes.
+## Usage
+```ts
+import { useTimeAgo } from '@vueuse/core'
+const timeAgo = useTimeAgo(new Date(2021, 0, 1))
+```
+## Component Usage
+```vue
+<template>
+  <UseTimeAgo v-slot="{ timeAgo }" :time="new Date(2021, 0, 1)">
+    Time Ago: {{ timeAgo }}
+  </UseTimeAgo>
+</template>
+```
+## Non-Reactivity Usage
+In case you don't need the reactivity, you can use the `formatTimeAgo` function to get the formatted string instead of a Ref.
+```ts
+import { formatTimeAgo } from '@vueuse/core'
+const timeAgo = formatTimeAgo(new Date(2021, 0, 1)) // string
+```
+## Type Declarations
+```ts
+export type UseTimeAgoFormatter<T = number> = (
+  value: T,
+  isPast: boolean,
+) => string
+export type UseTimeAgoUnitNamesDefault =
+  | "second"
+  | "minute"
+  | "hour"
+  | "day"
+  | "week"
+  | "month"
+  | "year"
+export interface UseTimeAgoMessagesBuiltIn {
+  justNow: string
+  past: string | UseTimeAgoFormatter<string>
+  future: string | UseTimeAgoFormatter<string>
+  invalid: string
+}
+export type UseTimeAgoMessages<
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+> = UseTimeAgoMessagesBuiltIn &
+  Record<UnitNames, string | UseTimeAgoFormatter<number>>
+export interface FormatTimeAgoOptions<
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+> {
+  /**
+   * Maximum unit (of diff in milliseconds) to display the full date instead of relative
+   *
+   * @default undefined
+   */
+  max?: UnitNames | number
+  /**
+   * Formatter for full date
+   */
+  fullDateFormatter?: (date: Date) => string
+  /**
+   * Messages for formatting the string
+   */
+  messages?: UseTimeAgoMessages<UnitNames>
+  /**
+   * Minimum display time unit (default is minute)
+   *
+   * @default false
+   */
+  showSecond?: boolean
+  /**
+   * Rounding method to apply.
+   *
+   * @default 'round'
+   */
+  rounding?: "round" | "ceil" | "floor" | number
+  /**
+   * Custom units
+   */
+  units?: UseTimeAgoUnit<UnitNames>[]
+}
+export interface UseTimeAgoOptions<
+  Controls extends boolean,
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+>
+  extends FormatTimeAgoOptions<UnitNames>, ConfigurableScheduler {
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Intervals to update, set 0 to disable auto update
+   *
+   * @deprecated Please use `scheduler` option instead
+   * @default 30_000
+   */
+  updateInterval?: number
+}
+export interface UseTimeAgoUnit<
+  Unit extends string = UseTimeAgoUnitNamesDefault,
+> {
+  max: number
+  value: number
+  name: Unit
+}
+export type UseTimeAgoReturn<Controls extends boolean = false> =
+  Controls extends true
+    ? {
+        timeAgo: ComputedRef<string>
+      } & Pausable
+    : ComputedRef<string>
+/**
+ * Reactive time ago formatter.
+ *
+ * @see https://vueuse.org/useTimeAgo
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useTimeAgo<
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+>(
+  time: MaybeRefOrGetter<Date | number | string>,
+  options?: UseTimeAgoOptions<false, UnitNames>,
+): UseTimeAgoReturn<false>
+export declare function useTimeAgo<
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+>(
+  time: MaybeRefOrGetter<Date | number | string>,
+  options: UseTimeAgoOptions<true, UnitNames>,
+): UseTimeAgoReturn<true>
+export declare function formatTimeAgo<
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+>(
+  from: Date,
+  options?: FormatTimeAgoOptions<UnitNames>,
+  now?: Date | number,
+): string
+```