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

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

@ -48,7 +48,7 @@
</button> </button>
</slot> </slot>
<template v-else-if="showIcon && iconDisplay === 'input'"> <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"> <slot name="inputicon" :class="cx('inputIcon')" :clickCallback="onButtonClick">
<component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" /> <component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
</slot> </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')}; 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; 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')}); padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
} }
.p-datepicker-input-icon { .p-datepicker-input-icon-container {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 50%; 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> <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay"> <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
<template #inputicon="slotProps"> <template #inputicon="slotProps">
<InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" /> <i class="pi pi-clock" @click="slotProps.clickCallback" />
</template> </template>
</DatePicker> </DatePicker>
</div> </div>
@ -36,7 +36,7 @@ export default {
<DatePicker v-model="icondisplay" showIcon iconDisplay="input" /> <DatePicker v-model="icondisplay" showIcon iconDisplay="input" />
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly> <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly>
<template #inputicon="slotProps"> <template #inputicon="slotProps">
<InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" /> <i class="pi pi-clock" @click="slotProps.clickCallback" />
</template> </template>
</DatePicker> </DatePicker>
`, `,
@ -55,7 +55,7 @@ export default {
<label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label> <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay"> <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
<template #inputicon="slotProps"> <template #inputicon="slotProps">
<InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" /> <i class="pi pi-clock" @click="slotProps.clickCallback" />
</template> </template>
</DatePicker> </DatePicker>
</div> </div>
@ -89,7 +89,7 @@ export default {
<label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label> <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay"> <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
<template #inputicon="slotProps"> <template #inputicon="slotProps">
<InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" /> <i class="pi pi-clock" @click="slotProps.clickCallback" />
</template> </template>
</DatePicker> </DatePicker>
</div> </div>