Updated fileupload and docs
parent
81b376e4b9
commit
7cbd917e51
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="p-fileupload p-component" v-if="isAdvanced">
|
||||
<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" />
|
||||
<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>
|
||||
<FileUploadButton :label="uploadLabel" icon="pi pi-upload" @click="upload" :disabled="disabled || !hasFiles" />
|
||||
<FileUploadButton :label="cancelLabel" icon="pi pi-times" @click="clear" :disabled="disabled || !hasFiles" />
|
||||
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
<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="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" />
|
||||
</span>
|
||||
</template>
|
||||
|
@ -315,21 +315,21 @@ export default {
|
|||
return this.mode === 'basic';
|
||||
},
|
||||
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-focus': this.focused
|
||||
}
|
||||
];
|
||||
},
|
||||
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-disabled': this.disabled,
|
||||
'p-focus': this.focused
|
||||
}];
|
||||
},
|
||||
basicChooseButtonIconClass() {
|
||||
return ['p-button-icon-left pi', {
|
||||
return ['p-button-icon p-button-icon-left pi', {
|
||||
'pi-plus': !this.hasFiles || this.auto,
|
||||
'pi-upload': this.hasFiles && !this.auto
|
||||
}];
|
||||
|
|
|
@ -152,7 +152,7 @@ data() {
|
|||
<td>dataKey</td>
|
||||
<td>string</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>
|
||||
<td>showClear</td>
|
||||
|
|
|
@ -116,7 +116,7 @@ data() {
|
|||
<td>dataKey</td>
|
||||
<td>string</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>
|
||||
<td>multiple</td>
|
||||
|
|
|
@ -146,7 +146,7 @@ data() {
|
|||
<td>dataKey</td>
|
||||
<td>string</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>
|
||||
<td>filterPlaceholder</td>
|
||||
|
|
|
@ -60,7 +60,7 @@ export default {
|
|||
},
|
||||
onProductSelect(event) {
|
||||
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: {
|
||||
|
|
|
@ -198,7 +198,7 @@ export default {
|
|||
},
|
||||
onProductSelect(event) {
|
||||
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});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -108,7 +108,7 @@ export default {
|
|||
<td>dataKey</td>
|
||||
<td>string</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>
|
||||
<td>ariaLabelledBy</td>
|
||||
|
|
Loading…
Reference in New Issue