New buttonprops added

pull/5756/head
tugcekucukoglu 2024-05-13 15:45:55 +03:00
parent 856b4351f6
commit 7ab5687196
3 changed files with 50 additions and 4 deletions

View File

@ -99,7 +99,23 @@ export default {
default: undefined
},
style: null,
class: null
class: null,
chooseButtonProps: {
type: null,
default: null
},
uploadButtonProps: {
type: Object,
default() {
return { severity: 'secondary' };
}
},
cancelButtonProps: {
type: Object,
default() {
return { severity: 'secondary' };
}
}
},
style: FileUploadStyle,
provide() {

View File

@ -444,6 +444,24 @@ export interface FileUploadProps {
* Style class of the component.
*/
class?: any;
/**
* Used to pass all properties of the ButtonProps to the choose button inside the component.
* @type {ButtonProps}
* @defaultValue null
*/
chooseButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the upload button inside the component.
* @type {ButtonProps}
* @defaultValue { severity: 'secondary' }
*/
uploadButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the cancel button inside the component.
* @type {ButtonProps}
* @defaultValue { severity: 'secondary' }
*/
cancelButtonProps?: object | undefined;
/**
* It generates scoped CSS variables using design tokens for the component.
*/

View File

@ -3,21 +3,33 @@
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" />
<div :class="cx('header')" v-bind="ptm('header')">
<slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="uploader" :clearCallback="clear">
<Button :label="chooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" :pt="ptm('pcChooseButton')">
<Button
:label="chooseButtonLabel"
:class="chooseButtonClass"
:style="style"
:disabled="disabled"
:unstyled="unstyled"
@click="choose"
@keydown.enter="choose"
@focus="onFocus"
@blur="onBlur"
v-bind="chooseButtonProps"
:pt="ptm('pcChooseButton')"
>
<template #icon="iconProps">
<slot name="chooseicon">
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('pcChooseButton')['icon']" />
</slot>
</template>
</Button>
<Button v-if="showUploadButton" :class="cx('pcUploadButton')" :label="uploadButtonLabel" @click="uploader" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('pcUploadButton')">
<Button v-if="showUploadButton" :class="cx('pcUploadButton')" :label="uploadButtonLabel" @click="uploader" :disabled="uploadDisabled" :unstyled="unstyled" v-bind="uploadButtonProps" :pt="ptm('pcUploadButton')">
<template #icon="iconProps">
<slot name="uploadicon">
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('pcUploadButton')['icon']" data-pc-section="uploadbuttonicon" />
</slot>
</template>
</Button>
<Button v-if="showCancelButton" :class="cx('pcCancelButton')" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('pcCancelButton')">
<Button v-if="showCancelButton" :class="cx('pcCancelButton')" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" v-bind="cancelButtonProps" :pt="ptm('pcCancelButton')">
<template #icon="iconProps">
<slot name="cancelicon">
<component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('pcCancelButton')['icon']" data-pc-section="cancelbuttonicon" />