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

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

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

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

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