Refactor #5681, #5682, #5683 - For DataTable, InputNumber

This commit is contained in:
tugcekucukoglu 2024-05-07 11:20:05 +03:00
parent ee5843c315
commit 45bb31a7d3
8 changed files with 58 additions and 19 deletions

View file

@ -34,10 +34,18 @@ export default {
type: String,
default: undefined
},
incrementIcon: {
type: String,
default: undefined
},
decrementButtonIcon: {
type: String,
default: undefined
},
decrementIcon: {
type: String,
default: undefined
},
locale: {
type: String,
default: undefined

View file

@ -113,10 +113,18 @@ export interface InputNumberPassThroughOptions<T = any> {
* Used to pass attributes to the increment button's DOM element.
*/
incrementButton?: InputNumberPassThroughOptionType<T>;
/**
* Used to pass attributes to the increment icon's DOM element.
*/
incrementIcon?: InputNumberPassThroughOptionType<T>;
/**
* Used to pass attributes to the decrement button's DOM element.
*/
decrementButton?: InputNumberPassThroughOptionType<T>;
/**
* Used to pass attributes to the decrement icon's DOM element.
*/
decrementIcon?: InputNumberPassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -209,15 +217,23 @@ export interface InputNumberProps {
*/
decrementButtonClass?: string | undefined;
/**
* Style class of the increment button.
* @deprecated since v3.27.0. Use 'incrementbuttonicon' slot.
* Style class of the increment icon.
* @deprecated since v4.0. Use 'incrementIcon'.
*/
incrementButtonIcon?: string | undefined;
/**
* Style class of the decrement button.
* @deprecated since v3.27.0. Use 'decrementbuttonicon' slot.
* Style class of the increment icon.
*/
incrementIcon?: string | undefined;
/**
* Style class of the decrement icon.
* @deprecated since v4.0. Use 'decrementIcon'.
*/
decrementButtonIcon?: string | undefined;
/**
* Style class of the decrement icon.
*/
decrementIcon?: string | undefined;
/**
* Locale to be used in formatting.
*/
@ -382,13 +398,23 @@ export interface InputNumberSlots {
listeners: InputNumberButtonListeners;
}): VNode[];
/**
* Custom increment button icon template.
* @deprecated since v4.0. Use 'incrementicon' slot.
* Custom increment icon template.
*/
incrementbuttonicon(): VNode[];
/**
* Custom decrement button icon template.
* Custom increment icon template.
*/
incrementicon(): VNode[];
/**
* @deprecated since v4.0. Use 'decrementicon' slot.
* Custom decrement icon template.
*/
decrementbuttonicon(): VNode[];
/**
* Custom decrement icon template.
*/
decrementicon(): VNode[];
}
/**

View file

@ -31,33 +31,34 @@
<span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
<slot name="incrementbutton" :listeners="upButtonListeners">
<button :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('incrementButton')">
<slot name="incrementbuttonicon">
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="incrementbuttonicon" />
<slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
<component :is="incrementIcon || incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="[incrementIcon, incrementButtonIcon]" v-bind="ptm('incrementIcon')" data-pc-section="incrementicon" />
</slot>
</button>
</slot>
<slot name="decrementbutton" :listeners="downButtonListeners">
<button :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('decrementButton')">
<slot name="decrementbuttonicon">
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="decrementbuttonicon" />
<slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
<component :is="decrementIcon || decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="[decrementIcon, decrementButtonIcon]" v-bind="ptm('decrementIcon')" data-pc-section="decrementicon" />
</slot>
</button>
</slot>
</span>
<slot name="incrementbutton" :listeners="upButtonListeners">
<button v-if="showButtons && buttonLayout !== 'stacked'" :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('incrementButton')">
<slot name="incrementbuttonicon">
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="incrementbuttonicon" />
<slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
<component :is="incrementIcon || incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="[incrementIcon, incrementButtonIcon]" v-bind="ptm('incrementIcon')" data-pc-section="incrementicon" />
</slot>
</button>
</slot>
<slot name="decrementbutton" :listeners="downButtonListeners">
<button v-if="showButtons && buttonLayout !== 'stacked'" :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('decrementButton')">
<slot name="decrementbuttonicon">
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="decrementbuttonicon" />
<slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
<component :is="decrementIcon || decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="[decrementIcon, decrementButtonIcon]" v-bind="ptm('decrementIcon')" data-pc-section="decrementicon" />
</slot>
</button>
</slot>
<!-- TODO: decrementButton* and incrementButton* are deprecated since v4.0-->
</span>
</template>