cic-kit 0.0.26 → 0.0.28
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.
- package/dist/cic-kit.css +1 -1
- package/dist/cmp/input/File/File.d.ts +8 -0
- package/dist/index.cjs +48 -48
- package/dist/index.d.ts +2 -1
- package/dist/index.mjs +8240 -8218
- package/docs/FieldFile.md +75 -0
- package/package.json +1 -1
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
#### FieldFile
|
|
2
|
+
|
|
3
|
+
Campo file per `vee-validate` con supporto click, drag&drop, singolo o multiplo.
|
|
4
|
+
|
|
5
|
+
| prop | default | type | utilizzo |
|
|
6
|
+
| --- | --- | --- | --- |
|
|
7
|
+
| `name` | `-` | `string` | nome campo `vee-validate` |
|
|
8
|
+
| `modelValue` | `null` / `[]` | `FieldFileValue` | valore controllato (`File`, `File[]`, `null`) |
|
|
9
|
+
| `rules` | `-` | `RuleExpression<FieldFileValue>` | regole validazione |
|
|
10
|
+
| `label` | `"+"` | `string` | testo bottone dropzone default |
|
|
11
|
+
| `className` | `""` | `any` | classi extra bottone default |
|
|
12
|
+
| `showList` | `true` | `boolean` | mostra lista file selezionati |
|
|
13
|
+
| `showErrors` | `true` | `boolean` | mostra errore validazione |
|
|
14
|
+
| `showSize` | `true` | `boolean` | mostra dimensione file |
|
|
15
|
+
| `removable` | `true` | `boolean` | abilita rimozione file dalla lista |
|
|
16
|
+
| `multiple` | `false` | `boolean` | abilita selezione multipla |
|
|
17
|
+
| `accept` | `-` | `string` | filtro MIME/estensioni (`image/*`, `.pdf`, ...) |
|
|
18
|
+
| `disabled` | `false` | `boolean` | disabilita input e dropzone |
|
|
19
|
+
| `required` | `false` | `boolean` | imposta required HTML |
|
|
20
|
+
| `capture` | `-` | `"user" \| "environment" \| boolean` | forza fotocamera su mobile solo se impostata |
|
|
21
|
+
| `listClass` | `-` | `any` | classi extra lista file |
|
|
22
|
+
|
|
23
|
+
Nota mobile: se `capture` non viene passata, il browser puo proporre sia fotocamera sia libreria file/foto.
|
|
24
|
+
|
|
25
|
+
| evento | payload | quando |
|
|
26
|
+
| --- | --- | --- |
|
|
27
|
+
| `update:modelValue` | `FieldFileValue` | ad ogni cambio valore |
|
|
28
|
+
| `change` | `File[]` | quando cambia la selezione |
|
|
29
|
+
| `remove` | `(file: File, index: number)` | quando rimuovi un file dalla lista |
|
|
30
|
+
| `clear` | `void` | quando svuoti il campo |
|
|
31
|
+
| `open` | `void` | quando si apre il picker file |
|
|
32
|
+
|
|
33
|
+
`slot dropzone`
|
|
34
|
+
- Props: `{ open, clear, files, disabled, dragging, errorMessage, meta }`
|
|
35
|
+
|
|
36
|
+
`defineExpose`
|
|
37
|
+
- `open()`
|
|
38
|
+
- `clear()`
|
|
39
|
+
- `files` (`ComputedRef<File[]>`)
|
|
40
|
+
|
|
41
|
+
```vue
|
|
42
|
+
<script setup lang="ts">
|
|
43
|
+
import { FieldFile } from "cic-kit";
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<template>
|
|
47
|
+
<FieldFile name="avatar" accept="image/*" />
|
|
48
|
+
</template>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Esempio multiplo con output `string[]` URL:
|
|
52
|
+
|
|
53
|
+
```vue
|
|
54
|
+
<script setup lang="ts">
|
|
55
|
+
import { ref } from "vue";
|
|
56
|
+
import { FieldFile, toFileArray, uploadFilesToUrls } from "cic-kit";
|
|
57
|
+
import { _Auth } from "cic-kit";
|
|
58
|
+
|
|
59
|
+
const uploadedUrls = ref<string[]>([]);
|
|
60
|
+
|
|
61
|
+
async function onSubmit(value: File | File[] | null) {
|
|
62
|
+
if (!_Auth?.publicUserFolder) return;
|
|
63
|
+
|
|
64
|
+
const files = toFileArray(value);
|
|
65
|
+
uploadedUrls.value = await uploadFilesToUrls(files, async (file, index) => {
|
|
66
|
+
const upload = await _Auth.publicUserFolder!.update(`gallery-${index}-${file.name}`, file);
|
|
67
|
+
return upload.url;
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
</script>
|
|
71
|
+
|
|
72
|
+
<template>
|
|
73
|
+
<FieldFile name="gallery" accept="image/*" multiple />
|
|
74
|
+
</template>
|
|
75
|
+
```
|