Updated fileupload and docs

pull/358/head
cagataycivici 2020-07-01 20:52:25 +03:00
parent 81b376e4b9
commit 7cbd917e51
7 changed files with 12 additions and 12 deletions

View File

@ -1,10 +1,10 @@
<template> <template>
<div class="p-fileupload p-component" v-if="isAdvanced"> <div class="p-fileupload p-component" v-if="isAdvanced">
<div class="p-fileupload-buttonbar"> <div class="p-fileupload-buttonbar">
<span icon="pi pi-plus" :class="advancedChooseButtonClass" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0" > <span :class="advancedChooseButtonClass" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0" >
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="disabled" /> <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="disabled" />
<span class="p-button-icon p-button-icon-left pi pi-fw pi-plus"></span> <span class="p-button-icon p-button-icon-left pi pi-fw pi-plus"></span>
<span class="p-button-text">{{chooseLabel}}</span> <span class="p-button-label">{{chooseLabel}}</span>
</span> </span>
<FileUploadButton :label="uploadLabel" icon="pi pi-upload" @click="upload" :disabled="disabled || !hasFiles" /> <FileUploadButton :label="uploadLabel" icon="pi pi-upload" @click="upload" :disabled="disabled || !hasFiles" />
<FileUploadButton :label="cancelLabel" icon="pi pi-times" @click="clear" :disabled="disabled || !hasFiles" /> <FileUploadButton :label="cancelLabel" icon="pi pi-times" @click="clear" :disabled="disabled || !hasFiles" />
@ -31,7 +31,7 @@
</div> </div>
<span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0" > <span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0" >
<span :class="basicChooseButtonIconClass"></span> <span :class="basicChooseButtonIconClass"></span>
<span class="p-button-text">{{basicChooseButtonLabel}}</span> <span class="p-button-label">{{basicChooseButtonLabel}}</span>
<input ref="fileInput" type="file" :accept="accept" :disabled="disabled" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-if="!hasFiles" /> <input ref="fileInput" type="file" :accept="accept" :disabled="disabled" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-if="!hasFiles" />
</span> </span>
</template> </template>
@ -315,21 +315,21 @@ export default {
return this.mode === 'basic'; return this.mode === 'basic';
}, },
advancedChooseButtonClass() { advancedChooseButtonClass() {
return ['p-button p-fileupload-choose p-component p-button-text-icon-left', { return ['p-button p-component p-fileupload-choose ', {
'p-disabled': this.disabled, 'p-disabled': this.disabled,
'p-focus': this.focused 'p-focus': this.focused
} }
]; ];
}, },
basicChooseButtonClass() { basicChooseButtonClass() {
return ['p-button p-fileupload-choose p-component p-button-text-icon-left', { return ['p-button p-component p-fileupload-choose ', {
'p-fileupload-choose-selected': this.hasFiles, 'p-fileupload-choose-selected': this.hasFiles,
'p-disabled': this.disabled, 'p-disabled': this.disabled,
'p-focus': this.focused 'p-focus': this.focused
}]; }];
}, },
basicChooseButtonIconClass() { basicChooseButtonIconClass() {
return ['p-button-icon-left pi', { return ['p-button-icon p-button-icon-left pi', {
'pi-plus': !this.hasFiles || this.auto, 'pi-plus': !this.hasFiles || this.auto,
'pi-upload': this.hasFiles && !this.auto 'pi-upload': this.hasFiles && !this.auto
}]; }];

View File

@ -152,7 +152,7 @@ data() {
<td>dataKey</td> <td>dataKey</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>A property to uniquely match the value in options for better performance.</td> <td>A property to uniquely identify an option.</td>
</tr> </tr>
<tr> <tr>
<td>showClear</td> <td>showClear</td>

View File

@ -116,7 +116,7 @@ data() {
<td>dataKey</td> <td>dataKey</td>
<td>string</td> <td>string</td>
<td>false</td> <td>false</td>
<td>A property to uniquely match the value in options for better performance.</td> <td>A property to uniquely identify an option.</td>
</tr> </tr>
<tr> <tr>
<td>multiple</td> <td>multiple</td>

View File

@ -146,7 +146,7 @@ data() {
<td>dataKey</td> <td>dataKey</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>A property to uniquely match the value in options for better performance.</td> <td>A property to uniquely identify an option.</td>
</tr> </tr>
<tr> <tr>
<td>filterPlaceholder</td> <td>filterPlaceholder</td>

View File

@ -60,7 +60,7 @@ export default {
}, },
onProductSelect(event) { onProductSelect(event) {
this.$refs.op.hide(); this.$refs.op.hide();
this.$toast.add({severity:'info', summary: 'Product Select', detail: event.data.name, life: 3000}); this.$toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
} }
}, },
components: { components: {

View File

@ -198,7 +198,7 @@ export default {
}, },
onProductSelect(event) { onProductSelect(event) {
this.$refs.op.hide(); this.$refs.op.hide();
this.$toast.add({severity:'info', summary: 'Product Select', detail: event.data.name, life: 3000}); this.$toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
} }
} }
} }

View File

@ -108,7 +108,7 @@ export default {
<td>dataKey</td> <td>dataKey</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>A property to uniquely match the value in options for better performance.</td> <td>A property to uniquely identify an option.</td>
</tr> </tr>
<tr> <tr>
<td>ariaLabelledBy</td> <td>ariaLabelledBy</td>