feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
83
skills/vueuse-functions/references/useDropZone.md
Normal file
83
skills/vueuse-functions/references/useDropZone.md
Normal file
@@ -0,0 +1,83 @@
|
||||
---
|
||||
category: Elements
|
||||
---
|
||||
|
||||
# useDropZone
|
||||
|
||||
Create a zone where files can be dropped.
|
||||
|
||||
::: warning
|
||||
|
||||
Due to Safari browser limitations, file type validation is only possible during the drop event, not during drag events. As a result, the `isOverDropZone` value will always be `true` during drag operations in Safari, regardless of file type.
|
||||
|
||||
:::
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useDropZone } from '@vueuse/core'
|
||||
import { useTemplateRef } from 'vue'
|
||||
|
||||
const dropZoneRef = useTemplateRef('dropZoneRef')
|
||||
|
||||
function onDrop(files: File[] | null) {
|
||||
// called when files are dropped on zone
|
||||
}
|
||||
|
||||
const { isOverDropZone } = useDropZone(dropZoneRef, {
|
||||
onDrop,
|
||||
// specify the types of data to be received.
|
||||
dataTypes: ['image/jpeg'],
|
||||
// control multi-file drop
|
||||
multiple: true,
|
||||
// whether to prevent default behavior for unhandled events
|
||||
preventDefaultForUnhandled: false,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="dropZoneRef">
|
||||
Drop files here
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Type Declarations
|
||||
|
||||
```ts
|
||||
export interface UseDropZoneReturn {
|
||||
files: ShallowRef<File[] | null>
|
||||
isOverDropZone: ShallowRef<boolean>
|
||||
}
|
||||
export interface UseDropZoneOptions {
|
||||
/**
|
||||
* Allowed data types, if not set, all data types are allowed.
|
||||
* Also can be a function to check the data types.
|
||||
*/
|
||||
dataTypes?:
|
||||
| MaybeRef<readonly string[]>
|
||||
| ((types: readonly string[]) => boolean)
|
||||
/**
|
||||
* Similar to dataTypes, but exposes the DataTransferItemList for custom validation.
|
||||
* If provided, this function takes precedence over dataTypes.
|
||||
*/
|
||||
checkValidity?: (items: DataTransferItemList) => boolean
|
||||
onDrop?: (files: File[] | null, event: DragEvent) => void
|
||||
onEnter?: (files: File[] | null, event: DragEvent) => void
|
||||
onLeave?: (files: File[] | null, event: DragEvent) => void
|
||||
onOver?: (files: File[] | null, event: DragEvent) => void
|
||||
/**
|
||||
* Allow multiple files to be dropped. Defaults to true.
|
||||
*/
|
||||
multiple?: boolean
|
||||
/**
|
||||
* Prevent default behavior for unhandled events. Defaults to false.
|
||||
*/
|
||||
preventDefaultForUnhandled?: boolean
|
||||
}
|
||||
export declare function useDropZone(
|
||||
target: MaybeRefOrGetter<HTMLElement | Document | null | undefined>,
|
||||
options?: UseDropZoneOptions | UseDropZoneOptions["onDrop"],
|
||||
): UseDropZoneReturn
|
||||
```
|
||||
Reference in New Issue
Block a user