Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 57 additions & 10 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,15 +1,62 @@
# Dependencies
node_modules
*.iml
.idea
*.log*
.pnpm-store

# Build outputs
dist
.output
.nuxt
.vscode
.DS_STORE
.nitro

# Lock files (library uses pnpm)
package-lock.json
yarn.lock
yarn-error.log

# Testing
coverage
dist
.nyc_output

# TypeScript
*.tsbuildinfo

# Documentation
_book
temp
tsdoc-metadata.json
yarn.lock
yarn-error.log
.output

# Logs
*.log*
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# OS files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

# Editor files
.vscode/*
!.vscode/extensions.json
.idea
*.iml
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# Temporary files
temp
tmp
*.tmp

# Environment
.env
.env.local
.env.*.local
31 changes: 30 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,36 @@
# Dependencies
node_modules
pnpm-lock.yaml
package-lock.json
yarn.lock

# Build outputs
dist
.nuxt
.output
.nitro

# Testing
coverage
playground

# Development
playground

# IDE
.idea
.vscode

# System
.DS_Store
*.log

# Git
.git
.github

# Documentation
CHANGELOG.md
LICENSE

# Config
.nuxtrc
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2024 Aslan Gama
Copyright (c) 2026 Aslan Gama

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
66 changes: 30 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div align="center">
<img src=".github/six-dropzone.svg" width="400">
<p align="center">6 Dropzone support for Nuxt 3</p>
<p align="center">6 Dropzone support for Nuxt </p>
</div>


<br>

[![npm version](https://img.shields.io/npm/v/six-dropzone/latest.svg?style=flat-square&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/six-dropzone)
Expand All @@ -14,7 +13,6 @@

[Demo online](https://codesandbox.io/p/devbox/jgrd5q)


---

#### Table of Content
Expand All @@ -24,9 +22,9 @@
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
* [Props](#props)
* [Events](#events)
* [Slots](#slots)
- [Props](#props)
- [Events](#events)
- [Slots](#slots)

## Features

Expand All @@ -46,9 +44,9 @@ npx nuxi@latest module add six-dropzone

### Config

***nuxt.config.js***
_**nuxt.config.js**_

``` js
```js
{
modules: [
'six-dropzone',
Expand All @@ -60,28 +58,27 @@ npx nuxi@latest module add six-dropzone
## Usage

```html

<script setup>
const photo = ref()
const drop = (e) => {
console.log(e.dataTransfer.files[0], 'drop')
}
const selectedFile = (e) => {
console.log(e, 'change')
};
const modelValue = (e) => {
console.log(e, 'model-value')
}
const photo = ref();
const drop = (e) => {
console.log(e.dataTransfer.files[0], 'drop');
};
const selectedFile = (e) => {
console.log(e, 'change');
};
const modelValue = (e) => {
console.log(e, 'model-value');
};
</script>
<template>
<SixDropzone
v-model="photo"
@drop.prevent="drop"
@change="selectedFile"
@update:model-value="modelValue"
:accept="['image/png', 'image/jpeg']"
:drop-mounted="url"
></SixDropzone>
<SixDropzone
v-model="photo"
@drop.prevent="drop"
@change="selectedFile"
@update:model-value="modelValue"
:accept="['image/png', 'image/jpeg']"
:drop-mounted="url"
></SixDropzone>
</template>
```

Expand All @@ -90,17 +87,17 @@ npx nuxi@latest module add six-dropzone
### Props

| Name | Type | Default Value | Description |
|------------------|-------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| ---------------- | ----------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `dropMounted` | `String` | `undefined` | The image URL. |
| `label` | `String` | `Select File` | Sets the button text |
| `error-messages` | `String/String[]` | `[]` | Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation. |
| `accept` | `String/String[]` | `" "` | Defines the types of files that are allowed. You can pass a single string (e.g., 'image/*') or an array of strings (e.g., ['image/png', 'image/jpeg']). |
| `multiple` | `Boolean` | `false` | Allows uploading multiple files if set to true. |
| `multiple` | `Boolean` | `false` | Allows uploading multiple files if set to true. |

### Events

| Name | Type | Description |
|---------------------|----------|-----------------------------------------------------------|
| Name | Type | Description |
| ------------------- | -------- | --------------------------------------------------------- |
| `drop` | `[File]` | drop value of the component. |
| `change` | `[File]` | value of the component. |
| `update:modelValue` | `[File]` | Event that is emitted when the component’s model changes. |
Expand All @@ -109,18 +106,15 @@ npx nuxi@latest module add six-dropzone

### Slots

| Name | Description |
|-----------|-----------------------|
| Name | Description |
| --------- | --------------------- |
| `Default` | The default Vue slot. |
| `Icon` | change or close icons |

## ⚖️ License

Released under [MIT](/LICENSE) by [@4slan](https://github.com/4sllan).


[license]: https://img.shields.io/github/license/4sllan/six-dropzone?style=flat-square&colorA=18181B&colorB=28CF8D

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js

[nuxt-href]: https://nuxt.com
82 changes: 41 additions & 41 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
import { createConfigForNuxt } from '@nuxt/eslint-config/flat';

export default createConfigForNuxt({
features: { tooling: true, typescript: true },
})
.override('nuxt/javascript', {
rules: {
curly: ['error', 'all'],
'no-console': ['warn', { allow: ['warn', 'error'] }],
'prefer-const': ['error'],
},
})
// --- BLOCO PARA VUE ---
.override('nuxt/vue/rules', {
rules: {
'vue/html-self-closing': ['error', {
.override('nuxt/javascript', {
rules: {
curly: ['error', 'all'],
'no-console': ['warn', { allow: ['warn', 'error'] }],
'prefer-const': ['error'],
},
})
// --- BLOCO PARA VUE ---
.override('nuxt/vue/rules', {
rules: {
'vue/html-self-closing': [
'error',
{
html: {
void: 'always', // Exige /> em tags como <input>, <br>, <img>
normal: 'always', // Exige /> em tags vazias como <div v-if="..." />
component: 'always' // Exige /> em componentes <MeuComponente />
void: 'always', // Exige /> em tags como <input>, <br>, <img>
normal: 'always', // Exige /> em tags vazias como <div v-if="..." />
component: 'always', // Exige /> em componentes <MeuComponente />
},
svg: 'always',
math: 'always'
}],
'vue/multi-word-component-names': 'off', // desativa erro de nome de componente
'vue/attributes-order': 'off', // ignora aviso de ordem de atributos
}
})
// ------------------------------------
.override('nuxt/typescript/rules', {
rules: {
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/consistent-type-imports': 'off', // ignora erro de imports só como type
},
})
.append({
files: [
'src/runtime/**/*.ts',
'src/module.ts',
math: 'always',
},
],
rules: {
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'unicorn/prefer-node-protocol': 'off',
'unicorn/prefer-number-properties': 'off',
'curly': 'off',
},
})
'vue/multi-word-component-names': 'off', // desativa erro de nome de componente
'vue/attributes-order': 'off', // ignora aviso de ordem de atributos
},
})
// ------------------------------------
.override('nuxt/typescript/rules', {
rules: {
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/consistent-type-imports': 'off', // ignora erro de imports só como type
},
})
.append({
files: ['src/runtime/**/*.ts', 'src/module.ts'],
rules: {
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'unicorn/prefer-node-protocol': 'off',
'unicorn/prefer-number-properties': 'off',
curly: 'off',
},
});
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
"eslint": "^10.5.0",
"happy-dom": "^20.10.4",
"playwright-core": "^1.61.0",
"prettier": "^3.9.6",
"typescript": "^6.0.3",
"vitest": "^4.1.9",
"vue": "^3.5.38",
Expand Down
10 changes: 10 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading