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

DatePicker class renaming

pull/5838/head
tugcekucukoglu 2024-06-04 09:44:09 +03:00
parent e3046efb9e
commit cfc654160e
9 changed files with 97 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/datepicker/DatePicker.d.ts vendored
View File

@ -183,11 +183,11 @@ export interface DatePickerPassThroughOptions {
/** /**
* Used to pass attributes to the view month's DOM element. * Used to pass attributes to the view month's DOM element.
*/ */
viewMonth?: DatePickerPassThroughOptionType; selectMonth?: DatePickerPassThroughOptionType;
/** /**
* Used to pass attributes to the view year's DOM element. * Used to pass attributes to the view year's DOM element.
*/ */
viewYear?: DatePickerPassThroughOptionType; selectYear?: DatePickerPassThroughOptionType;
/** /**
* Used to pass attributes to the decade's DOM element. * Used to pass attributes to the decade's DOM element.
*/ */

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

@ -101,10 +101,10 @@
type="button" type="button"
@click="switchToYearView" @click="switchToYearView"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:class="cx('viewYear')" :class="cx('selectYear')"
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseYear" :aria-label="$primevue.config.locale.chooseYear"
v-bind="ptm('viewYear')" v-bind="ptm('selectYear')"
data-pc-group-section="view" data-pc-group-section="view"
> >
{{ getYear(month) }} {{ getYear(month) }}
@ -114,10 +114,10 @@
type="button" type="button"
@click="switchToMonthView" @click="switchToMonthView"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:class="cx('viewMonth')" :class="cx('selectMonth')"
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseMonth" :aria-label="$primevue.config.locale.chooseMonth"
v-bind="ptm('viewMonth')" v-bind="ptm('selectMonth')"
data-pc-group-section="view" data-pc-group-section="view"
> >
{{ getMonthName(month.month) }} {{ getMonthName(month.month) }}
@ -129,10 +129,10 @@
type="button" type="button"
@click="switchToMonthView" @click="switchToMonthView"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:class="cx('viewMonth')" :class="cx('selectMonth')"
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseMonth" :aria-label="$primevue.config.locale.chooseMonth"
v-bind="ptm('viewMonth')" v-bind="ptm('selectMonth')"
data-pc-group-section="view" data-pc-group-section="view"
> >
{{ getMonthName(month.month) }} {{ getMonthName(month.month) }}
@ -142,10 +142,10 @@
type="button" type="button"
@click="switchToYearView" @click="switchToYearView"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:class="cx('viewYear')" :class="cx('selectYear')"
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseYear" :aria-label="$primevue.config.locale.chooseYear"
v-bind="ptm('viewYear')" v-bind="ptm('selectYear')"
data-pc-group-section="view" data-pc-group-section="view"
> >
{{ getYear(month) }} {{ getYear(month) }}

8
components/lib/datepicker/style/DatePickerStyle.d.ts vendored
View File

@ -55,13 +55,13 @@ export enum DatePickerClasses {
*/ */
title = 'p-datepicker-title', title = 'p-datepicker-title',
/** /**
* Class name of the view month element * Class name of the select month element
*/ */
viewMonth = 'p-datepicker-view-month', selectMonth = 'p-datepicker-select-month',
/** /**
* Class name of the view year element * Class name of the select year element
*/ */
viewYear = 'p-datepicker-view-year', selectYear = 'p-datepicker-select-year',
/** /**
* Class name of the decade element * Class name of the decade element
*/ */

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

@ -118,8 +118,8 @@ const theme = ({ dt }) => `
font-weight: ${dt('datepicker.title.font.weight')}; font-weight: ${dt('datepicker.title.font.weight')};
} }
.p-datepicker-view-year, .p-datepicker-select-year,
.p-datepicker-view-month { .p-datepicker-select-month {
border: none; border: none;
background: transparent; background: transparent;
margin: 0; margin: 0;
@ -130,24 +130,24 @@ const theme = ({ dt }) => `
)}; )};
} }
.p-datepicker-view-month { .p-datepicker-select-month {
padding: ${dt('datepicker.view.month.padding')}; padding: ${dt('datepicker.view.month.padding')};
color: ${dt('datepicker.view.month.color')}; color: ${dt('datepicker.view.month.color')};
border-radius: ${dt('datepicker.view.month.border.radius')}; border-radius: ${dt('datepicker.view.month.border.radius')};
} }
.p-datepicker-view-year { .p-datepicker-select-year {
padding: ${dt('datepicker.view.year.padding')}; padding: ${dt('datepicker.view.year.padding')};
color: ${dt('datepicker.view.year.color')}; color: ${dt('datepicker.view.year.color')};
border-radius: ${dt('datepicker.view.year.border.radius')}; border-radius: ${dt('datepicker.view.year.border.radius')};
} }
.p-datepicker-view-month:enabled:hover { .p-datepicker-select-month:enabled:hover {
background: ${dt('datepicker.view.month.hover.background')}; background: ${dt('datepicker.view.month.hover.background')};
color: ${dt('datepicker.view.month.hover.color')}; color: ${dt('datepicker.view.month.hover.color')};
} }
.p-datepicker-view-year:enabled:hover { .p-datepicker-select-year:enabled:hover {
background: ${dt('datepicker.view.year.hover.background')}; background: ${dt('datepicker.view.year.hover.background')};
color: ${dt('datepicker.view.year.hover.color')}; color: ${dt('datepicker.view.year.hover.color')};
} }
@ -203,7 +203,7 @@ const theme = ({ dt }) => `
width: ${dt('datepicker.date.width')}; width: ${dt('datepicker.date.width')};
height: ${dt('datepicker.date.height')}; height: ${dt('datepicker.date.height')};
border-radius: ${dt('datepicker.date.border.radius')}; border-radius: ${dt('datepicker.date.border.radius')};
transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')},
box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')}; box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};
border: 1px solid transparent; border: 1px solid transparent;
outline-color: transparent; outline-color: transparent;
@ -386,8 +386,8 @@ const classes = {
header: 'p-datepicker-header', header: 'p-datepicker-header',
pcPrevButton: 'p-datepicker-prev-button', pcPrevButton: 'p-datepicker-prev-button',
title: 'p-datepicker-title', title: 'p-datepicker-title',
viewMonth: 'p-datepicker-view-month', selectMonth: 'p-datepicker-select-month',
viewYear: 'p-datepicker-view-year', selectYear: 'p-datepicker-select-year',
decade: 'p-datepicker-decade', decade: 'p-datepicker-decade',
pcNextButton: 'p-datepicker-next-button', pcNextButton: 'p-datepicker-next-button',
dayView: 'p-datepicker-day-view', dayView: 'p-datepicker-day-view',

4
components/lib/themes/aura/datepicker/index.js
View File

@ -39,14 +39,14 @@ export default {
inputIcon: { inputIcon: {
color: '{form.field.icon.color}' color: '{form.field.icon.color}'
}, },
viewMonth: { selectMonth: {
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}', hoverColor: '{content.hover.color}',
padding: '0.25rem 0.5rem', padding: '0.25rem 0.5rem',
borderRadius: '{content.border.radius}' borderRadius: '{content.border.radius}'
}, },
viewYear: { selectYear: {
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}', hoverColor: '{content.hover.color}',

4
components/lib/themes/lara/datepicker/index.js
View File

@ -37,14 +37,14 @@ export default {
inputIcon: { inputIcon: {
color: '{form.field.icon.color}' color: '{form.field.icon.color}'
}, },
viewMonth: { selectMonth: {
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}', hoverColor: '{content.hover.color}',
padding: '0.375rem 0.625rem', padding: '0.375rem 0.625rem',
borderRadius: '{content.border.radius}' borderRadius: '{content.border.radius}'
}, },
viewYear: { selectYear: {
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}', hoverColor: '{content.hover.color}',

4
components/lib/themes/nora/datepicker/index.js
View File

@ -43,13 +43,13 @@ export default {
inputIcon: { inputIcon: {
color: '{form.field.icon.color}' color: '{form.field.icon.color}'
}, },
viewMonth: { selectMonth: {
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}', hoverColor: '{content.hover.color}',
padding: '0.25rem 0.5rem' padding: '0.25rem 0.5rem'
}, },
viewYear: { selectYear: {
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}', hoverColor: '{content.hover.color}',

48
components/lib/themes/types/datepicker/index.d.ts vendored
View File

@ -239,72 +239,72 @@ export interface DatePickerDesignTokens extends ColorSchemeDesignToken<DatePicke
color?: string; color?: string;
}; };
/** /**
* Used to pass tokens of the view month section * Used to pass tokens of the select month section
*/ */
viewMonth?: { selectMonth?: {
/** /**
* Hover background of view month * Hover background of select month
* *
* @designToken datepicker.view.month.hover.background * @designToken datepicker.select.month.hover.background
*/ */
hoverBackground?: string; hoverBackground?: string;
/** /**
* Color of view month * Color of select month
* *
* @designToken datepicker.view.month.color * @designToken datepicker.select.month.color
*/ */
color?: string; color?: string;
/** /**
* Hover color of view month * Hover color of select month
* *
* @designToken datepicker.view.month.hover.color * @designToken datepicker.select.month.hover.color
*/ */
hoverColor?: string; hoverColor?: string;
/** /**
* Padding of view month * Padding of select month
* *
* @designToken datepicker.view.month.padding * @designToken datepicker.select.month.padding
*/ */
padding?: string; padding?: string;
/** /**
* Border radius of view month * Border radius of select month
* *
* @designToken datepicker.view.month.border.radius * @designToken datepicker.select.month.border.radius
*/ */
borderRadius?: string; borderRadius?: string;
}; };
/** /**
* Used to pass tokens of the view year section * Used to pass tokens of the select year section
*/ */
viewYear?: { selectYear?: {
/** /**
* Hover background of view year * Hover background of select year
* *
* @designToken datepicker.view.year.hover.background * @designToken datepicker.select.year.hover.background
*/ */
hoverBackground?: string; hoverBackground?: string;
/** /**
* Color of view year * Color of select year
* *
* @designToken datepicker.view.year.color * @designToken datepicker.select.year.color
*/ */
color?: string; color?: string;
/** /**
* Hover color of view year * Hover color of select year
* *
* @designToken datepicker.view.year.hover.color * @designToken datepicker.select.year.hover.color
*/ */
hoverColor?: string; hoverColor?: string;
/** /**
* Padding of view year * Padding of select year
* *
* @designToken datepicker.view.year.padding * @designToken datepicker.select.year.padding
*/ */
padding?: string; padding?: string;
/** /**
* Border radius of view year * Border radius of select year
* *
* @designToken datepicker.view.year.border.radius * @designToken datepicker.select.year.border.radius
*/ */
borderRadius?: string; borderRadius?: string;
}; };

88
doc/common/apidoc/index.json
View File

@ -9687,7 +9687,7 @@
"description": "Used to pass attributes to the title's DOM element." "description": "Used to pass attributes to the title's DOM element."
}, },
{ {
"name": "viewMonth", "name": "selectMonth",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "DatePickerPassThroughOptionType", "type": "DatePickerPassThroughOptionType",
@ -9695,7 +9695,7 @@
"description": "Used to pass attributes to the view month's DOM element." "description": "Used to pass attributes to the view month's DOM element."
}, },
{ {
"name": "viewYear", "name": "selectYear",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "DatePickerPassThroughOptionType", "type": "DatePickerPassThroughOptionType",
@ -26823,7 +26823,7 @@
"description": "Used to pass attributes to the title's DOM element." "description": "Used to pass attributes to the title's DOM element."
}, },
{ {
"name": "viewMonth", "name": "selectMonth",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "DatePickerPassThroughOptionType", "type": "DatePickerPassThroughOptionType",
@ -26831,7 +26831,7 @@
"description": "Used to pass attributes to the view month's DOM element." "description": "Used to pass attributes to the view month's DOM element."
}, },
{ {
"name": "viewYear", "name": "selectYear",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "DatePickerPassThroughOptionType", "type": "DatePickerPassThroughOptionType",
@ -28573,18 +28573,18 @@
"description": "Class name of the title element" "description": "Class name of the title element"
}, },
{ {
"name": "viewMonth", "name": "selectMonth",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"value": "\"p-datepicker-view-month\"", "value": "\"p-datepicker-select-month\"",
"description": "Class name of the view month element" "description": "Class name of the select month element"
}, },
{ {
"name": "viewYear", "name": "selectYear",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"value": "\"p-datepicker-view-year\"", "value": "\"p-datepicker-select-year\"",
"description": "Class name of the view year element" "description": "Class name of the select year element"
}, },
{ {
"name": "decade", "name": "decade",
@ -81950,20 +81950,20 @@
"description": "Used to pass tokens of the input icon section" "description": "Used to pass tokens of the input icon section"
}, },
{ {
"name": "viewMonth", "name": "selectMonth",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "Object", "type": "Object",
"default": "", "default": "",
"description": "Used to pass tokens of the view month section" "description": "Used to pass tokens of the select month section"
}, },
{ {
"name": "viewYear", "name": "selectYear",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "Object", "type": "Object",
"default": "", "default": "",
"description": "Used to pass tokens of the view year section" "description": "Used to pass tokens of the select year section"
}, },
{ {
"name": "group", "name": "group",
@ -82360,94 +82360,94 @@
"description": "Color of input icon" "description": "Color of input icon"
}, },
{ {
"name": "viewMonth.hoverBackground", "name": "selectMonth.hoverBackground",
"token": "datepicker.view.month.hover.background", "token": "datepicker.select.month.hover.background",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Hover background of view month" "description": "Hover background of select month"
}, },
{ {
"name": "viewMonth.color", "name": "selectMonth.color",
"token": "datepicker.view.month.color", "token": "datepicker.select.month.color",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Color of view month" "description": "Color of select month"
}, },
{ {
"name": "viewMonth.hoverColor", "name": "selectMonth.hoverColor",
"token": "datepicker.view.month.hover.color", "token": "datepicker.select.month.hover.color",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Hover color of view month" "description": "Hover color of select month"
}, },
{ {
"name": "viewMonth.padding", "name": "selectMonth.padding",
"token": "datepicker.view.month.padding", "token": "datepicker.select.month.padding",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Padding of view month" "description": "Padding of select month"
}, },
{ {
"name": "viewMonth.borderRadius", "name": "selectMonth.borderRadius",
"token": "datepicker.view.month.border.radius", "token": "datepicker.select.month.border.radius",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Border radius of view month" "description": "Border radius of select month"
}, },
{ {
"name": "viewYear.hoverBackground", "name": "selectYear.hoverBackground",
"token": "datepicker.view.year.hover.background", "token": "datepicker.select.year.hover.background",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Hover background of view year" "description": "Hover background of select year"
}, },
{ {
"name": "viewYear.color", "name": "selectYear.color",
"token": "datepicker.view.year.color", "token": "datepicker.select.year.color",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Color of view year" "description": "Color of select year"
}, },
{ {
"name": "viewYear.hoverColor", "name": "selectYear.hoverColor",
"token": "datepicker.view.year.hover.color", "token": "datepicker.select.year.hover.color",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Hover color of view year" "description": "Hover color of select year"
}, },
{ {
"name": "viewYear.padding", "name": "selectYear.padding",
"token": "datepicker.view.year.padding", "token": "datepicker.select.year.padding",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Padding of view year" "description": "Padding of select year"
}, },
{ {
"name": "viewYear.borderRadius", "name": "selectYear.borderRadius",
"token": "datepicker.view.year.border.radius", "token": "datepicker.select.year.border.radius",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Border radius of view year" "description": "Border radius of select year"
}, },
{ {
"name": "group.borderColor", "name": "group.borderColor",