javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into chore-update-next-from-main

Browse Source
This commit is contained in:
Brandy Carney
2024-05-02 16:43:54 -04:00
parent 1116cdd44a 0124f3b0b3
commit 8b834387d4
876 changed files with 4034 additions and 2766 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/datetime/datetime.ios.vars.scss
View File

@@ -2,16 +2,16 @@
// --------------------------------------------------
/// @prop - Border color for dividers between header and footer
$datetime-ios-border-color: 0.55px solid $background-color-step-200 !default;
$datetime-ios-border-color: 0.55px solid $background-color-step-200;
/// @prop - Padding for content
$datetime-ios-padding: 16px !default;
$datetime-ios-padding: 16px;
/// @prop - The font size at which layouts may change to accommodate Dynamic Type
$datetime-dynamic-font-breakpoint: 24px !default;
$datetime-dynamic-font-breakpoint: 24px;
/// @prop - Width of the calendar day
$datetime-ios-day-width: 40px !default;
$datetime-ios-day-width: 40px;
/// @prop - Height of the calendar day
$datetime-ios-day-height: $datetime-ios-day-width !default;
$datetime-ios-day-height: $datetime-ios-day-width;

14
core/src/components/datetime/datetime.md.vars.scss
View File

@@ -2,22 +2,22 @@
// --------------------------------------------------
/// @prop - Font size for title in header
$datetime-md-title-font-size: dynamic-font(12px) !default;
$datetime-md-title-font-size: dynamic-font(12px);
/// @prop - Font size for selected date in header
$datetime-md-selected-date-font-size: dynamic-font(34px) !default;
$datetime-md-selected-date-font-size: dynamic-font(34px);
/// @prop - Font size for calendar day button
$datetime-md-calendar-item-font-size: dynamic-font(14px) !default;
$datetime-md-calendar-item-font-size: dynamic-font(14px);
/// @prop - Padding for content in header
$datetime-md-header-padding: 20px !default;
$datetime-md-header-padding: 20px;
/// @prop - Padding for content
$datetime-md-padding: 16px !default;
$datetime-md-padding: 16px;
/// @prop - Width of the calendar day
$datetime-md-day-width: 42px !default;
$datetime-md-day-width: 42px;
/// @prop - Height of the calendar day
$datetime-md-day-height: $datetime-md-day-width !default;
$datetime-md-day-height: $datetime-md-day-width;

12
core/src/components/datetime/datetime.tsx
View File

@@ -479,6 +479,8 @@ export class Datetime implements ComponentInterface {
/**
* Emitted when the value (selected date) has changed.
*
* This event will not emit when programmatically setting the `value` property.
*/
@Event() ionChange!: EventEmitter<DatetimeChangeEventDetail>;
@@ -900,7 +902,8 @@ export class Datetime implements ComponentInterface {
* Check below the next line ensures that we did not
* swipe and abort (i.e. we swiped but we are still on the current month).
*/
const month = calendarBodyRef.scrollLeft <= 2 ? startMonth : endMonth;
const condition = isRTL(this.el) ? calendarBodyRef.scrollLeft >= -2 : calendarBodyRef.scrollLeft <= 2;
const month = condition ? startMonth : endMonth;
/**
* The edge of the month must be lined up with
@@ -1689,6 +1692,7 @@ export class Datetime implements ComponentInterface {
return (
<ion-picker-column
aria-label="Select a date"
class="date-column"
color={this.color}
disabled={disabled}
@@ -1808,6 +1812,7 @@ export class Datetime implements ComponentInterface {
return (
<ion-picker-column
aria-label="Select a day"
class="day-column"
color={this.color}
disabled={disabled}
@@ -1851,6 +1856,7 @@ export class Datetime implements ComponentInterface {
return (
<ion-picker-column
aria-label="Select a month"
class="month-column"
color={this.color}
disabled={disabled}
@@ -1893,6 +1899,7 @@ export class Datetime implements ComponentInterface {
return (
<ion-picker-column
aria-label="Select a year"
class="year-column"
color={this.color}
disabled={disabled}
@@ -1966,6 +1973,7 @@ export class Datetime implements ComponentInterface {
return (
<ion-picker-column
aria-label="Select an hour"
color={this.color}
disabled={disabled}
value={activePart.hour}
@@ -2005,6 +2013,7 @@ export class Datetime implements ComponentInterface {
return (
<ion-picker-column
aria-label="Select a minute"
color={this.color}
disabled={disabled}
value={activePart.minute}
@@ -2047,6 +2056,7 @@ export class Datetime implements ComponentInterface {
return (
<ion-picker-column
aria-label="Select a day period"
style={isDayPeriodRTL ? { order: '-1' } : {}}
color={this.color}
disabled={disabled}

8
core/src/components/datetime/test/basic/index.html
View File

@@ -112,7 +112,7 @@
<div class="grid-item">
<h2>Popover</h2>
<ion-button onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
<button onclick="presentPopover(defaultPopover, event)">Present Popover</button>
<ion-popover class="datetime-popover" id="default-popover">
<ion-datetime></ion-datetime>
</ion-popover>
@@ -120,7 +120,7 @@
<div class="grid-item">
<h2>Modal</h2>
<ion-button onclick="presentModal()">Present Modal</ion-button>
<button onclick="presentModal()">Present Modal</button>
</div>
<div class="grid-item">
@@ -132,7 +132,7 @@
<div class="grid-item">
<h2>Popover - Custom</h2>
<ion-button id="open-popover">Present Popover</ion-button>
<button id="open-popover">Present Popover</button>
<ion-popover class="datetime-popover" trigger="open-popover" id="custom-popover">
<ion-datetime>
<span slot="title">My Custom Title</span>
@@ -146,7 +146,7 @@
<div class="grid-item">
<h2>Modal - Custom</h2>
<ion-button id="open-modal">Present Modal</ion-button>
<button id="open-modal">Present Modal</button>
<ion-modal trigger="open-modal" id="modal">
<ion-datetime>
<span slot="title">My Custom Title</span>

2
core/src/components/datetime/test/first-day-of-week/index.html
View File

@@ -49,7 +49,7 @@
<div class="grid-item">
<h2>Default</h2>
<ion-datetime first-day-of-week="1" value="2022-05-03"></ion-datetime>
<ion-button onclick="increase()">Increase firstDayOfWeek</ion-button>
<button onclick="increase()">Increase firstDayOfWeek</button>
<div>
<span>FirstDayOfWeek: <span id="start-of-week">1</span></span>
</div>

2
core/src/components/datetime/test/position/index.html
View File

@@ -23,7 +23,7 @@
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-button id="open-datetime" onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
<button id="open-datetime" onclick="presentPopover(defaultPopover, event)">Present Popover</button>
<ion-popover class="datetime-popover" id="default-popover">
<ion-datetime value="2022-05-03T14:23:00.000Z"></ion-datetime>
</ion-popover>

8
core/src/components/datetime/test/size/index.html
View File

@@ -43,7 +43,7 @@
<div class="grid-item">
<h2>Popover - Fixed (350px)</h2>
<ion-button onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
<button onclick="presentPopover(defaultPopover, event)">Present Popover</button>
<ion-popover class="datetime-popover" id="default-popover">
<ion-datetime></ion-datetime>
</ion-popover>
@@ -51,7 +51,7 @@
<div class="grid-item">
<h2>Modal - Fixed (350px)</h2>
<ion-button onclick="presentModal()">Present Modal</ion-button>
<button onclick="presentModal()">Present Modal</button>
</div>
<div class="grid-item">
@@ -61,7 +61,7 @@
<div class="grid-item">
<h2>Popover - Cover (100%)</h2>
<ion-button onclick="presentPopover(customPopover, event)">Present Popover</ion-button>
<button onclick="presentPopover(customPopover, event)">Present Popover</button>
<ion-popover class="datetime-popover" id="custom-popover">
<ion-datetime size="cover"></ion-datetime>
</ion-popover>
@@ -69,7 +69,7 @@
<div class="grid-item">
<h2>Modal - Cover (100%)</h2>
<ion-button onclick="presentModal('cover')">Present Modal</ion-button>
<button onclick="presentModal('cover')">Present Modal</button>
</div>
</div>
</ion-content>