Refactor #3832 Refactor #3833 - Update icons

pull/3976/head
mertsincan 2023-04-18 12:31:46 +03:00
parent 0c4d487dd9
commit 62f769382a
9 changed files with 24 additions and 14 deletions

View File

@ -47,14 +47,20 @@
>
<slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
</span>
<slot v-if="showClear && modelValue != null" name="clearicon">
<slot v-if="showClear && modelValue != null" name="clearicon" :onClick="onClearClick">
<component :is="clearIcon ? 'i' : 'TimesIcon'" :class="['p-dropdown-clear-icon', clearIcon]" @click="onClearClick" v-bind="clearIconProps" />
</slot>
<div class="p-dropdown-trigger">
<slot name="indicator">
<component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-dropdown-trigger-icon', loadingIcon]" aria-hidden="true" />
<component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-dropdown-trigger-icon', dropdownIcon]" aria-hidden="true" />
</slot>
<slot v-if="$slots.indicator" name="indicator"></slot>
<template v-else>
<slot v-if="loading" name="loadingicon" class="p-dropdown-trigger-icon">
<span v-if="loadingIcon" :class="['p-dropdown-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" />
<SpinnerIcon v-else class="p-dropdown-trigger-icon" spin aria-hidden="true" />
</slot>
<slot v-else name="dropdownicon" class="p-dropdown-trigger-icon">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-dropdown-trigger-icon', dropdownIcon]" aria-hidden="true" />
</slot>
</template>
</div>
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">

View File

@ -10,7 +10,7 @@
<FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove">
<template #icon="iconProps">
<component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
<component v-else :is="'TimesIcon'" :class="iconProps.class" aria-hidden="true" />
<TimesIcon v-else :class="iconProps.class" aria-hidden="true" />
</template>
</FileUploadButton>
</div>

View File

@ -236,14 +236,17 @@ export interface FileUploadProps {
showCancelButton?: boolean | undefined;
/**
* Icon of the choose button.
* @todo
*/
chooseIcon?: string | undefined;
/**
* Icon of the upload button.
* @todo
*/
uploadIcon?: string | undefined;
/**
* Icon of the cancel button.
* @todo
*/
cancelIcon?: string | undefined;
/**

View File

@ -212,7 +212,7 @@ export interface GalleriaSlots {
/**
* Custom navigator previous item icon template.
*/
previtemicon(): VNode[];
previousitemicon(): VNode[];
/**
* Custom navigator next item icon template.
*/
@ -220,7 +220,7 @@ export interface GalleriaSlots {
/**
* Custom thumbnail previous icon template.
*/
prevthumbnailicon(): VNode[];
previousthumbnailicon(): VNode[];
/**
* Custom thumbnail next item template.
*/

View File

@ -2,13 +2,13 @@
<div class="p-galleria-item-wrapper">
<div class="p-galleria-item-container">
<button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
<component :is="templates.itemprevicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" />
<component :is="templates.previousitemicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" />
</button>
<div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel">
<component v-if="templates.item" :is="templates.item" :item="activeItem" />
</div>
<button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
<component :is="templates.itemnexticon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" />
<component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" />
</button>
<div v-if="templates['caption']" class="p-galleria-caption">
<component v-if="templates.caption" :is="templates.caption" :item="activeItem" />

View File

@ -2,7 +2,7 @@
<div class="p-galleria-thumbnail-wrapper">
<div class="p-galleria-thumbnail-container">
<button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" :disabled="isNavBackwardDisabled()" type="button" :aria-label="ariaPrevButtonLabel" @click="navBackward($event)" v-bind="prevButtonProps">
<component :is="templates.prevthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" />
<component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" />
</button>
<div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }">
<div ref="itemsContainer" class="p-galleria-thumbnail-items" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">

View File

@ -2,7 +2,7 @@
<span :class="containerClass" :style="style">
<img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError" />
<button v-if="preview" ref="previewButton" class="p-image-preview-indicator" @click="onImageClick" v-bind="previewButtonProps">
<slot name="indicator">
<slot name="indicatoricon">
<component :is="indicatorIcon ? 'i' : 'EyeIcon'" class="p-image-preview-icon" />
</slot>
</button>

View File

@ -21,6 +21,7 @@ export interface InlineMessageProps {
severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined;
/**
* Display a custom icon for the message.
* @todo
*/
icon?: string | undefined;
}
@ -35,7 +36,7 @@ export interface InlineMessageSlots {
/**
* Custom message icon template.
*/
messageicon(): VNode[];
icon(): VNode[];
}
export interface InlineMessageEmits {}

View File

@ -1,6 +1,6 @@
<template>
<div aria-live="polite" :class="containerClass">
<slot name="messageicon">
<slot name="icon">
<component :is="icon ? 'span' : iconComponent" :class="['p-inline-message-icon', icon]"></component>
</slot>
<span class="p-inline-message-text"><slot>&nbsp;</slot></span>