vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

FileUpload basic doc updates

pull/5756/head
tugcekucukoglu 2024-05-09 17:46:36 +03:00
parent 63d04f0788
commit e30ecebcea
3 changed files with 192 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
doc/common/apidoc/index.json
View File

@ -18612,6 +18612,20 @@
"type": "string", "type": "string",
"default": "" "default": ""
}, },
{
"name": "fileChosenMessage",
"optional": true,
"readonly": false,
"type": "string",
"default": ""
},
{
"name": "emptyFileChosenMessage",
"optional": true,
"readonly": false,
"type": "string",
"default": ""
},
{ {
"name": "aria", "name": "aria",
"optional": true, "optional": true,
@ -29109,6 +29123,12 @@
], ],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom container slot." "description": "Custom container slot."
},
{
"name": "footer",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom footer template."
} }
], ],
"extendedBy": "SidebarSlots" "extendedBy": "SidebarSlots"
@ -31896,7 +31916,14 @@
"description": "FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.", "description": "FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.",
"methods": { "methods": {
"description": "Defines methods that can be accessed by the component's reference.", "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>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom remove icon template for each file." "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": "", "default": "",
"description": "Used to pass attributes to the option's DOM element." "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", "name": "emptyMessage",
"optional": true, "optional": true,
@ -41212,6 +41268,22 @@
"default": "true", "default": "true",
"description": "When enabled, the focus is placed on the hovered option." "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", "name": "filterMessage",
"optional": true, "optional": true,
@ -41639,6 +41711,18 @@
"readonly": false, "readonly": false,
"value": "\"p-listbox-option\"" "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", "name": "emptyMessage",
"optional": false, "optional": false,
@ -58166,6 +58250,12 @@
], ],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom container slot." "description": "Custom container slot."
},
{
"name": "footer",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom footer template."
} }
], ],
"extendedTypes": "DrawerSlots" "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/accordion": {},
"themes/aura/autocomplete": {}, "themes/aura/autocomplete": {},
"themes/aura/avatar": {}, "themes/aura/avatar": {},
@ -65733,6 +65890,8 @@
"themes/aura/tree": {}, "themes/aura/tree": {},
"themes/aura/treeselect": {}, "themes/aura/treeselect": {},
"themes/aura/treetable": {}, "themes/aura/treetable": {},
"themes/config": {},
"themes/helpers": {},
"themes": {}, "themes": {},
"themes/lara/accordion": {}, "themes/lara/accordion": {},
"themes/lara/autocomplete": {}, "themes/lara/autocomplete": {},
@ -65820,6 +65979,8 @@
"themes/lara/tree": {}, "themes/lara/tree": {},
"themes/lara/treeselect": {}, "themes/lara/treeselect": {},
"themes/lara/treetable": {}, "themes/lara/treetable": {},
"themes/service": {},
"themes/utils": {},
"tieredmenu": { "tieredmenu": {
"description": "TieredMenu displays submenus in nested overlays.\n\n[Live Demo](https://www.primevue.org/menu/)", "description": "TieredMenu displays submenus in nested overlays.\n\n[Live Demo](https://www.primevue.org/menu/)",
"components": { "components": {

8
doc/configuration/locale/LocaleApiDoc.vue
View File

@ -272,6 +272,14 @@
<td>emptySearchMessage</td> <td>emptySearchMessage</td>
<td>No results found</td> <td>No results found</td>
</tr> </tr>
<tr>
<td>fileChosenMessage</td>
<td>{0} files</td>
</tr>
<tr>
<td>emptyFileChosenMessage</td>
<td>No file chosen</td>
</tr>
<tr> <tr>
<td>emptyMessage</td> <td>emptyMessage</td>
<td>No available options</td> <td>No available options</td>

29
doc/fileupload/BasicDoc.vue
View File

@ -2,8 +2,9 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>FileUpload basic <i>mode</i> provides a simpler UI as an alternative to default advanced mode.</p> <p>FileUpload basic <i>mode</i> provides a simpler UI as an alternative to default advanced mode.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex flex-column gap-4 align-items-center justify-content-center">
<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> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,19 +15,24 @@ export default {
return { return {
code: { code: {
basic: ` 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: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex flex-column gap-4 align-items-center justify-content-center">
<Toast /> <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> </div>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
upload() {
this.$refs.fileupload.basicUpload();
},
onUpload() { onUpload() {
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
} }
@ -36,15 +42,21 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex flex-column gap-4 align-items-center justify-content-center">
<Toast /> <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> </div>
</template> </template>
<script setup> <script setup>
import { useToast } from "primevue/usetoast"; import { useToast } from "primevue/usetoast";
const toast = useToast(); const toast = useToast();
const fileupload = ref();
const upload = () => {
fileupload.value.basicUpload();
};
const onUpload = () => { const onUpload = () => {
toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 }); toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
@ -55,6 +67,9 @@ const onUpload = () => {
}; };
}, },
methods: { methods: {
upload() {
this.$refs.fileupload.basicUpload();
},
onUpload() { onUpload() {
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
} }