vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored datepicker input

pull/5756/head
Cagatay Civici 2024-05-15 10:07:32 +03:00
parent 162fc38bde
commit 47711d5af9
4 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/styles/layout/_topbar.scss
View File

@ -108,7 +108,7 @@
position: absolute;
top: calc(100% + 2px);
right: 0;
width: 14rem;
width: 16rem;
padding: .75rem;
background-color: var(--overlay-background);
border-radius: 6px;
@ -135,11 +135,12 @@
display: flex;
gap: .5rem;
flex-wrap: wrap;
justify-content: space-between;
button {
border: none;
width: 1em;
height: 1rem;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
cursor: pointer;
outline-color: transparent;

2
components/lib/datepicker/DatePicker.vue
View File

@ -48,7 +48,7 @@
</button>
</slot>
<template v-else-if="showIcon && iconDisplay === 'input'">
<span :class="cx('inputIconContainer')">
<span v-if="$slots.inputicon || showIcon" :class="cx('inputIconContainer')">
<slot name="inputicon" :class="cx('inputIcon')" :clickCallback="onButtonClick">
<component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
</slot>

6
components/lib/datepicker/style/DatePickerStyle.js
View File

@ -54,15 +54,15 @@ const theme = ({ dt }) => `
outline-offset: ${dt('datepicker.dropdown.focus.ring.offset')};
}
.p-datepicker:has(.p-datepicker-input-icon) {
.p-datepicker:has(.p-datepicker-input-icon-container) {
position: relative;
}
.p-datepicker:has(.p-datepicker-input-icon) .p-datepicker-input {
.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
}
.p-datepicker-input-icon {
.p-datepicker-input-icon-container {
cursor: pointer;
position: absolute;
top: 50%;

8
doc/datepicker/IconDoc.vue
View File

@ -15,7 +15,7 @@
<label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
<template #inputicon="slotProps">
<InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" />
<i class="pi pi-clock" @click="slotProps.clickCallback" />
</template>
</DatePicker>
</div>
@ -36,7 +36,7 @@ export default {
<DatePicker v-model="icondisplay" showIcon iconDisplay="input" />
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly>
<template #inputicon="slotProps">
<InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" />
<i class="pi pi-clock" @click="slotProps.clickCallback" />
</template>
</DatePicker>
`,
@ -55,7 +55,7 @@ export default {
<label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
<template #inputicon="slotProps">
<InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" />
<i class="pi pi-clock" @click="slotProps.clickCallback" />
</template>
</DatePicker>
</div>
@ -89,7 +89,7 @@ export default {
<label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
<template #inputicon="slotProps">
<InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" />
<i class="pi pi-clock" @click="slotProps.clickCallback" />
</template>
</DatePicker>
</div>