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

Refactor #5426 - For Calendar

pull/5507/head
tugcekucukoglu 2024-03-18 13:01:35 +03:00
parent 52813c0848
commit bcdc8cb702
3 changed files with 60 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/lib/calendar/Calendar.d.ts vendored
View File

@ -9,9 +9,9 @@
*/
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { InputTextPassThroughOptions } from '../inputtext';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough, HintedString } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
export declare type CalendarPassThroughOptionType = CalendarPassThroughAttributes | ((options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes | string) | string | null | undefined;
@ -134,14 +134,14 @@ export interface CalendarPassThroughOptions {
*/
root?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the input's DOM element.
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
input?: CalendarPassThroughOptionType;
input?: InputTextPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
* Used to pass attributes to the dropdown button's DOM element.
*/
dropdownButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
dropdownButton?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the panel's DOM element.
*/
@ -159,10 +159,9 @@ export interface CalendarPassThroughOptions {
*/
header?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
* Used to pass attributes to the previous button's DOM element.
*/
previousButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
previousButton?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the title's DOM element.
*/
@ -180,10 +179,9 @@ export interface CalendarPassThroughOptions {
*/
decadeTitle?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
* Used to pass attributes to the previous button's DOM element.
*/
nextButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
nextButton?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the container's DOM element.
*/
@ -309,15 +307,13 @@ export interface CalendarPassThroughOptions {
*/
buttonbar?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
* Used to pass attributes to the today button's DOM element.
*/
todayButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
todayButton?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
* Used to pass attributes to the clear button's DOM element.
*/
clearButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
clearButton?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the aria selected day's DOM element.
*/
@ -930,6 +926,16 @@ export interface CalendarSlots {
*/
class: any;
}): VNode[];
/**
* Custom dropdown button template.
*/
dropdownbutton(scope: {
/**
* Toggle function.
* @param {Event} event - Browser event
*/
toggleCallback: (event: Event) => void;
}): VNode[];
}
/**

61
components/lib/calendar/Calendar.vue
View File

@ -1,14 +1,17 @@
<template>
<span ref="container" :id="d_id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
<input
<CInputText
v-if="!inline"
:ref="inputRef"
:id="inputId"
type="text"
role="combobox"
:class="[cx('input'), inputClass]"
:class="[inputClass, cx('input')]"
:style="inputStyle"
:value="inputFieldValue"
:placeholder="placeholder"
:invalid="invalid"
:variant="variant"
:unstyled="unstyled"
autocomplete="off"
aria-autocomplete="none"
aria-haspopup="dialog"
@ -16,7 +19,6 @@
:aria-controls="panelId"
:aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel"
:aria-invalid="invalid || undefined"
inputmode="none"
:disabled="disabled"
:readonly="!manualInput || readonly"
@ -26,10 +28,11 @@
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
v-bind="{ ...inputProps, ...ptm('input') }"
v-bind="inputProps"
:pt="ptm('input')"
/>
<CalendarButton
v-if="showIcon && iconDisplay === 'button'"
<slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
<button
:class="cx('dropdownButton')"
:disabled="disabled"
@click="onButtonClick"
@ -38,15 +41,13 @@
aria-haspopup="dialog"
:aria-expanded="overlayVisible"
:aria-controls="panelId"
:unstyled="unstyled"
:pt="ptm('dropdownButton')"
v-bind="ptm('dropdownButton')"
>
<template #icon>
<slot name="dropdownicon" :class="icon">
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButton')['icon']" data-pc-section="dropdownicon" />
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButtonIcon')" />
</slot>
</button>
</slot>
</template>
</CalendarButton>
<template v-else-if="showIcon && iconDisplay === 'input'">
<slot name="inputicon" :class="cx('inputIcon')" :clickCallback="onButtonClick">
<component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
@ -482,26 +483,8 @@
</div>
</div>
<div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
<CalendarButton
type="button"
:label="todayLabel"
@click="onTodayButtonClick($event)"
:class="cx('todayButton')"
@keydown="onContainerButtonKeydown"
:unstyled="unstyled"
:pt="ptm('todayButton')"
data-pc-group-section="button"
/>
<CalendarButton
type="button"
:label="clearLabel"
@click="onClearButtonClick($event)"
:class="cx('clearButton')"
@keydown="onContainerButtonKeydown"
:unstyled="unstyled"
:pt="ptm('clearButton')"
data-pc-group-section="button"
/>
<button type="button" :label="todayLabel" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('todayButton')" data-pc-group-section="button" />
<button type="button" :label="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('clearButton')" data-pc-group-section="button" />
</div>
<slot name="footer"></slot>
</div>
@ -511,12 +494,12 @@
</template>
<script>
import Button from 'primevue/button';
import CalendarIcon from 'primevue/icons/calendar';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronLeftIcon from 'primevue/icons/chevronleft';
import ChevronRightIcon from 'primevue/icons/chevronright';
import ChevronUpIcon from 'primevue/icons/chevronup';
import InputText from 'primevue/inputtext';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
@ -567,7 +550,8 @@ export default {
this.updateCurrentMetaData();
if (!this.typeUpdate && !this.inline && this.input) {
this.input.value = this.formatValue(newValue);
// this.input.value = this.formatValue(newValue);
this.input.value = this.inputFieldValue;
}
this.typeUpdate = false;
@ -627,7 +611,8 @@ export default {
}
}
} else {
this.input.value = this.formatValue(this.modelValue);
// this.input.value = this.formatValue(this.modelValue);
this.input.value = this.inputFieldValue;
}
},
updated() {
@ -2694,7 +2679,7 @@ export default {
this.overlay = el;
},
inputRef(el) {
this.input = el;
this.input = el ? el.$el : undefined;
},
previousButtonRef(el) {
this.previousButton = el;
@ -3016,7 +3001,7 @@ export default {
}
},
components: {
CalendarButton: Button,
CInputText: InputText,
Portal: Portal,
CalendarIcon: CalendarIcon,
ChevronLeftIcon: ChevronLeftIcon,

9
components/lib/calendar/style/CalendarStyle.js
View File

@ -9,7 +9,7 @@ const classes = {
'p-calendar p-component p-inputwrapper',
{
'p-calendar-w-btn': props.showIcon && props.iconDisplay === 'button',
'p-icon-field p-icon-field-right': props.showIcon && props.iconDisplay === 'input',
'p-calendar-input-icon-field': props.showIcon && props.iconDisplay === 'input',
'p-calendar-timeonly': props.timeOnly,
'p-calendar-disabled': props.disabled,
'p-invalid': props.invalid,
@ -18,12 +18,7 @@ const classes = {
'p-focus': state.focused || state.overlayVisible
}
],
input: ({ props, instance }) => [
'p-inputtext p-component',
{
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
}
],
input: 'p-calendar-input',
dropdownButton: 'p-datepicker-trigger',
inputIcon: 'p-datepicker-trigger-icon p-input-icon',
panel: ({ instance, props, state }) => [