FileUpload basic doc updates
tugcekucukoglu
parent
63d04f0788
commit
e30ecebcea
|
|
@ -18612,6 +18612,20 @@
|
|||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "fileChosenMessage",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "emptyFileChosenMessage",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "aria",
|
||||
"optional": true,
|
||||
|
|
@ -29109,6 +29123,12 @@
|
|||
],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom container slot."
|
||||
},
|
||||
{
|
||||
"name": "footer",
|
||||
"parameters": [],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom footer template."
|
||||
}
|
||||
],
|
||||
"extendedBy": "SidebarSlots"
|
||||
|
|
@ -31896,7 +31916,14 @@
|
|||
"description": "FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.",
|
||||
"methods": {
|
||||
"description": "Defines methods that can be accessed by the component's reference.",
|
||||
"values": []
|
||||
"values": [
|
||||
{
|
||||
"name": "basicUpload",
|
||||
"parameters": [],
|
||||
"returnType": "void",
|
||||
"description": "Upload file."
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -32704,6 +32731,19 @@
|
|||
],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom remove icon template for each file."
|
||||
},
|
||||
{
|
||||
"name": "filelabel",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "scope",
|
||||
"optional": false,
|
||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">files</span>: <span class=\"doc-option-parameter-type\">File</span>, <span class=\"doc-option-parameter-type\">// File to upload.</span>\n }",
|
||||
"description": "filelabel slot's params."
|
||||
}
|
||||
],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom file label template."
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -40890,6 +40930,22 @@
|
|||
"default": "",
|
||||
"description": "Used to pass attributes to the option's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "optionCheckIcon",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "ListboxPassThroughOptionType<T>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the option check icon's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "optionBlankIcon",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "ListboxPassThroughOptionType<T>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the option blank icon's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "emptyMessage",
|
||||
"optional": true,
|
||||
|
|
@ -41212,6 +41268,22 @@
|
|||
"default": "true",
|
||||
"description": "When enabled, the focus is placed on the hovered option."
|
||||
},
|
||||
{
|
||||
"name": "highlightOnSelect",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "true",
|
||||
"description": "Whether the selected option will be add highlight class."
|
||||
},
|
||||
{
|
||||
"name": "checkmark",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "Whether the selected option will be shown with a check mark."
|
||||
},
|
||||
{
|
||||
"name": "filterMessage",
|
||||
"optional": true,
|
||||
|
|
@ -41639,6 +41711,18 @@
|
|||
"readonly": false,
|
||||
"value": "\"p-listbox-option\""
|
||||
},
|
||||
{
|
||||
"name": "optionCheckIcon",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"value": "\"p-listbox-option-check-icon\""
|
||||
},
|
||||
{
|
||||
"name": "optionBlankIcon",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"value": "\"p-listbox-option-blank-icon\""
|
||||
},
|
||||
{
|
||||
"name": "emptyMessage",
|
||||
"optional": false,
|
||||
|
|
@ -58166,6 +58250,12 @@
|
|||
],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom container slot."
|
||||
},
|
||||
{
|
||||
"name": "footer",
|
||||
"parameters": [],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom footer template."
|
||||
}
|
||||
],
|
||||
"extendedTypes": "DrawerSlots"
|
||||
|
|
@ -65647,6 +65737,73 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"themes/actions": {
|
||||
"functions": {
|
||||
"description": "Defines the custom functions used by the module.",
|
||||
"values": {
|
||||
"definePreset": {
|
||||
"name": "definePreset",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "arg",
|
||||
"type": "any[]"
|
||||
}
|
||||
],
|
||||
"returnType": "any"
|
||||
},
|
||||
"updatePreset": {
|
||||
"name": "updatePreset",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "arg",
|
||||
"type": "any[]"
|
||||
}
|
||||
],
|
||||
"returnType": "any"
|
||||
},
|
||||
"updatePrimaryPalette": {
|
||||
"name": "updatePrimaryPalette",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "palette",
|
||||
"type": "any"
|
||||
}
|
||||
],
|
||||
"returnType": "any"
|
||||
},
|
||||
"updateSurfacePalette": {
|
||||
"name": "updateSurfacePalette",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "palette",
|
||||
"type": "any"
|
||||
}
|
||||
],
|
||||
"returnType": "string"
|
||||
},
|
||||
"usePreset": {
|
||||
"name": "usePreset",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "arg",
|
||||
"type": "any[]"
|
||||
}
|
||||
],
|
||||
"returnType": "any"
|
||||
},
|
||||
"useTheme": {
|
||||
"name": "useTheme",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "theme",
|
||||
"type": "any"
|
||||
}
|
||||
],
|
||||
"returnType": "any"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"themes/aura/accordion": {},
|
||||
"themes/aura/autocomplete": {},
|
||||
"themes/aura/avatar": {},
|
||||
|
|
@ -65733,6 +65890,8 @@
|
|||
"themes/aura/tree": {},
|
||||
"themes/aura/treeselect": {},
|
||||
"themes/aura/treetable": {},
|
||||
"themes/config": {},
|
||||
"themes/helpers": {},
|
||||
"themes": {},
|
||||
"themes/lara/accordion": {},
|
||||
"themes/lara/autocomplete": {},
|
||||
|
|
@ -65820,6 +65979,8 @@
|
|||
"themes/lara/tree": {},
|
||||
"themes/lara/treeselect": {},
|
||||
"themes/lara/treetable": {},
|
||||
"themes/service": {},
|
||||
"themes/utils": {},
|
||||
"tieredmenu": {
|
||||
"description": "TieredMenu displays submenus in nested overlays.\n\n[Live Demo](https://www.primevue.org/menu/)",
|
||||
"components": {
|
||||
|
|
|
|||
|
|
@ -272,6 +272,14 @@
|
|||
<td>emptySearchMessage</td>
|
||||
<td>No results found</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fileChosenMessage</td>
|
||||
<td>{0} files</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>emptyFileChosenMessage</td>
|
||||
<td>No file chosen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>emptyMessage</td>
|
||||
<td>No available options</td>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>FileUpload basic <i>mode</i> provides a simpler UI as an alternative to default advanced mode.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||
<div class="card flex flex-column gap-4 align-items-center justify-content-center">
|
||||
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||
<Button label="Upload" @click="upload" severity="secondary" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -14,19 +15,24 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||
<Button label="Upload" @click="upload" severity="secondary" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<div class="card flex flex-column gap-4 align-items-center justify-content-center">
|
||||
<Toast />
|
||||
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||
<Button label="Upload" @click="upload" severity="secondary" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
upload() {
|
||||
this.$refs.fileupload.basicUpload();
|
||||
},
|
||||
onUpload() {
|
||||
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
||||
}
|
||||
|
|
@ -36,15 +42,21 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<div class="card flex flex-column gap-4 align-items-center justify-content-center">
|
||||
<Toast />
|
||||
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||
<Button label="Upload" @click="upload" severity="secondary" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
const fileupload = ref();
|
||||
|
||||
const upload = () => {
|
||||
fileupload.value.basicUpload();
|
||||
};
|
||||
|
||||
const onUpload = () => {
|
||||
toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
||||
|
|
@ -55,6 +67,9 @@ const onUpload = () => {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.$refs.fileupload.basicUpload();
|
||||
},
|
||||
onUpload() {
|
||||
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue