@gez/date-time-kit 2.0.0-alpha.0 → 2.0.0-alpha.2

package/src/components/period-selector/index.ts

@@ -48,7 +48,7 @@ const styleStr = css`
   background-color: #eee;
 }
 
-dt-date-nav::part(list-grp) {
+dt-yyyymm-nav::part(list-grp) {
   height: 254px;
   margin-top: 15px;
 }
@@ -88,6 +88,7 @@ dt-popover {
   border: 1px solid rgba(0, 0, 0, 0.0666666667);
   box-sizing: border-box;
   align-items: center;
+  cursor: pointer;
 }
 
 .time-selector {
@@ -155,11 +156,16 @@ dt-calendar-base::part(item) {
   font-size: 14px;
 }
 `;
-import { Ele as DateNavEle, type EventMap as DateNavEvent } from './date-nav';
-DateNavEle.define();
+import {
+    Ele as YyyyMmNavEle,
+    type EventMap as YyyyMmNavEvent
+} from '../yyyymm-nav';
+YyyyMmNavEle.define();
 import {
     Ele as CalendarBaseEle,
-    type EventMap as CalendarBaseEvent
+    type EventMap as CalendarBaseEvent,
+    type Weeks,
+    weekKey
 } from '../calendar';
 CalendarBaseEle.define();
 import { Ele as HhMmSsMsListGrpEle } from '../hhmmss-ms-list-grp';
@@ -185,6 +191,12 @@ export interface Attrs extends BaseAttrs {
      * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
      */
     'min-granularity'?: 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
+    /**
+     * Set which day of the week is the first day.
+     * @type `'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'`
+     * @default 'sun'
+     */
+    'week-start-at'?: Weeks;
 }
 
 export interface Emits {
@@ -218,7 +230,8 @@ export class Ele extends UiBase<Attrs, Emits> {
             ...(super.observedAttributes as (keyof BaseAttrs)[]),
             'time-start',
             'time-end',
-            'min-granularity'
+            'min-granularity',
+            'week-start-at'
         ] satisfies (keyof Attrs)[];
     }
 
@@ -240,6 +253,13 @@ export class Ele extends UiBase<Attrs, Emits> {
         if (Number.isNaN(+v)) return;
         this.setAttribute('time-end', +v + '');
     }
+    public get weekStartAt() {
+        return this._getAttr('week-start-at', 'sun');
+    }
+    public set weekStartAt(val: Weeks) {
+        if (!weekKey.includes(val)) return;
+        this.setAttribute('week-start-at', val);
+    }
 
     protected _style = styleStr;
     protected _template = html`
@@ -257,10 +277,10 @@ export class Ele extends UiBase<Attrs, Emits> {
         .map(
             (s) => html`
 <div class="wrapper ${s}">
-    <dt-date-nav
+    <dt-yyyymm-nav
         show-ctrl-btn-month-add
         show-ctrl-btn-month-sub
-    ></dt-date-nav>
+    ></dt-yyyymm-nav>
     <dt-calendar-base data-type="${s}"></dt-calendar-base>
     <dt-popover>
         <div slot="trigger" class="time-echo-wrapper">
@@ -284,11 +304,13 @@ export class Ele extends UiBase<Attrs, Emits> {
 
     private get _startNavEle() {
         return this.shadowRoot?.querySelector(
-            '.start dt-date-nav'
-        ) as DateNavEle;
+            '.start dt-yyyymm-nav'
+        ) as YyyyMmNavEle;
     }
     private get _endNavEle() {
-        return this.shadowRoot?.querySelector('.end dt-date-nav') as DateNavEle;
+        return this.shadowRoot?.querySelector(
+            '.end dt-yyyymm-nav'
+        ) as YyyyMmNavEle;
     }
     private get _startCalendar() {
         return this.shadowRoot?.querySelector(
@@ -430,6 +452,8 @@ export class Ele extends UiBase<Attrs, Emits> {
         let timeStart = this.timeStart as Date;
         let timeEnd = this.timeEnd as Date;
         if (timeStart > timeEnd) [timeStart, timeEnd] = [timeEnd, timeStart];
+        this._startCalendar.weekStartAt = this._endCalendar.weekStartAt =
+            this.weekStartAt;
         const tz = new Date().getTimezoneOffset() * 60 * 1000;
         this._startNavEle.millisecond =
             this._startCalendar.showingTime =
@@ -478,6 +502,7 @@ export class Ele extends UiBase<Attrs, Emits> {
     }
 
     private _onCalendarSelect = (e: CalendarBaseEvent['select-time']) => {
+        e.stopPropagation();
         if (this._selectedDate) {
             this._selectedDate = null;
             this.timeEnd = +e.detail + this._endTimeSelector.millisecond;
@@ -487,26 +512,30 @@ export class Ele extends UiBase<Attrs, Emits> {
         }
     };
     private _onCalendarItemHover = (e: CalendarBaseEvent['hover-item']) => {
+        e.stopPropagation();
         if (!this._selectedDate) return;
         this.timeEnd = +e.detail + this._endTimeSelector.millisecond;
     };
-    private _onNavChange = (e: DateNavEvent['change']) => {
+    private _onNavChange = (e: YyyyMmNavEvent['change']) => {
+        e.stopPropagation();
         const wrapper = closestByEvent(e, '.wrapper');
         if (!wrapper) return;
-        const { newStartTime, newEndTime } = e.detail;
+        const { newTime } = e.detail;
         if (wrapper.classList.contains('start')) {
-            this._startCalendar.showingTime = +newStartTime;
+            this._startCalendar.showingTime = +newTime;
         } else {
-            this._endCalendar.showingTime = +newEndTime;
+            this._endCalendar.showingTime = +newTime;
         }
         this._updateNavCtrlBtn();
     };
-    private _onNavOpenToggle = (e: DateNavEvent['popover-open-change']) => {
-        if (!(e.target instanceof DateNavEle)) return;
+    private _onNavOpenToggle = (e: YyyyMmNavEvent['popover-open-change']) => {
+        if (!(e.target instanceof YyyyMmNavEle)) return;
+        e.stopPropagation();
         e.target.nextElementSibling?.classList.toggle('hide', e.detail);
     };
     private _onTimePopoverOpenChange = (e: PopoverEvent['open-change']) => {
         if (!(e.target instanceof PopoverEle)) return;
+        e.stopPropagation();
         if (!e.detail) return this._render(); // for reset time selector value
         e.target
             .querySelectorAll<HhMmSsMsListGrpEle>('dt-hhmmss-ms-list-grp')

package/src/components/quick-selector/index.ts

@@ -210,11 +210,11 @@ export interface Attrs extends BaseAttrs {
     /**
      * Start time of the quick selection. Only works in custom mode.
      */
-    'start-time'?: Date | null | 'null';
+    'start-time'?: string | number | '';
     /**
      * End time of the quick selection. Only works in custom mode.
      */
-    'end-time'?: Date | null | 'null';
+    'end-time'?: string | number | '';
 }
 
 export interface Emits {
@@ -256,57 +256,52 @@ const genStartDate = (fn?: (_t: Date) => void, t?: Date) =>
     genDateWithHours(true, fn, t);
 const genEndDate = (fn?: (_t: Date) => void, t?: Date) =>
     genDateWithHours(false, fn, t);
-const quickPeriodTimes = (weekOffset = 0) =>
+export const genPeriodTimes = (
+    startFn?: (_t: Date, weekOffset: number) => void,
+    endFn?: (_t: Date, weekOffset: number) => void,
+    t: Date = new Date(),
+    weekStartAt: Weeks = 'sun'
+) => {
+    const weekOffset = weekKey.indexOf(weekStartAt);
+    return {
+        start: genStartDate((t) => startFn?.(t, weekOffset), new Date(t)),
+        end: genEndDate((t) => endFn?.(t, weekOffset), new Date(t))
+    };
+};
+const quickPeriodTimes = (weekStartAt: Weeks = 'sun') =>
     ({
         all: null,
-        today: {
-            start: genStartDate(),
-            end: genEndDate()
-        },
-        yesterday: {
-            start: genStartDate((t) => t.setDate(t.getDate() - 1)),
-            end: genEndDate((t) => t.setDate(t.getDate() - 1))
-        },
-        week: {
-            start: genStartDate((t) =>
-                t.setDate(t.getDate() - t.getDay() + weekOffset)
-            ),
-            end: genEndDate((t) =>
+        today: genPeriodTimes(),
+        yesterday: genPeriodTimes(
+            (t) => t.setDate(t.getDate() - 1),
+            (t) => t.setDate(t.getDate() - 1)
+        ),
+        week: genPeriodTimes(
+            (t, weekOffset) => t.setDate(t.getDate() - t.getDay() + weekOffset),
+            (t, weekOffset) =>
                 t.setDate(t.getDate() - t.getDay() + weekOffset + 6)
-            )
-        },
-        lastWeek: {
-            start: genStartDate((t) =>
-                t.setDate(t.getDate() - t.getDay() + weekOffset - 7)
-            ),
-            end: genEndDate((t) =>
+        ),
+        lastWeek: genPeriodTimes(
+            (t, weekOffset) =>
+                t.setDate(t.getDate() - t.getDay() + weekOffset - 7),
+            (t, weekOffset) =>
                 t.setDate(t.getDate() - t.getDay() + weekOffset - 1)
-            )
-        },
-        last7Days: {
-            start: genStartDate((t) => t.setDate(t.getDate() - 6)),
-            end: genEndDate()
-        },
-        month: {
-            start: genStartDate((t) => t.setDate(1)),
-            end: genEndDate((t) => t.setMonth(t.getMonth() + 1, 0))
-        },
-        last30Days: {
-            start: genStartDate((t) => t.setDate(t.getDate() - 29)),
-            end: genEndDate()
-        },
-        last180Days: {
-            start: genStartDate((t) => t.setDate(t.getDate() - 179)),
-            end: genEndDate()
-        },
-        last6Month: {
-            start: genStartDate((t) => t.setMonth(t.getMonth() - 5, 1)),
-            end: genEndDate((t) => t.setMonth(t.getMonth() + 1, 0))
-        },
-        year: {
-            start: genStartDate((t) => t.setMonth(0, 1)),
-            end: genEndDate((t) => t.setFullYear(t.getFullYear() + 1, 0, 0))
-        }
+        ),
+        last7Days: genPeriodTimes((t) => t.setDate(t.getDate() - 6)),
+        month: genPeriodTimes(
+            (t) => t.setDate(1),
+            (t) => t.setMonth(t.getMonth() + 1, 0)
+        ),
+        last30Days: genPeriodTimes((t) => t.setDate(t.getDate() - 29)),
+        last180Days: genPeriodTimes((t) => t.setDate(t.getDate() - 179)),
+        last6Month: genPeriodTimes(
+            (t) => t.setMonth(t.getMonth() - 5, 1),
+            (t) => t.setMonth(t.getMonth() + 1, 0)
+        ),
+        year: genPeriodTimes(
+            (t) => t.setMonth(0, 1),
+            (t) => t.setFullYear(t.getFullYear() + 1, 0, 0)
+        )
     }) as const;
 
 /**
@@ -360,9 +355,37 @@ export class Ele extends UiBase<Attrs, Emits> {
         return this._getAttr('week-start-at', 'sun');
     }
     public set weekStartAt(val: Weeks) {
-        if (weekKey.includes(val)) return;
+        if (!weekKey.includes(val)) return;
         this.setAttribute('week-start-at', val);
     }
+    public get startTime() {
+        const v = this._getAttr('start-time', '');
+        if (v === '') return '';
+        return new Date(Number.isNaN(+v) ? v : +v);
+    }
+    public set startTime(val: number | string | Date) {
+        if (val === '') {
+            this.removeAttribute('start-time');
+            return;
+        }
+        const v = new Date(val);
+        if (Number.isNaN(+v)) return;
+        this.setAttribute('time-start', +v + '');
+    }
+    public get endTime() {
+        const v = this._getAttr('end-time', '' + this.startTime);
+        if (v === '') return '';
+        return new Date(Number.isNaN(+v) ? v : +v);
+    }
+    public set endTime(val: number | string | Date) {
+        if (val === '') {
+            this.removeAttribute('end-time');
+            return;
+        }
+        const v = new Date(val);
+        if (Number.isNaN(+v)) return;
+        this.setAttribute('time-end', +v + '');
+    }
 
     protected _style = styleStr;
     protected _template = html`
@@ -449,6 +472,7 @@ export class Ele extends UiBase<Attrs, Emits> {
         if (!super.connectedCallback()) return;
         this._renderTz();
         this._updateRadio();
+        this._updatePeriodSelector();
         this.shadowRoot!.querySelector('.tz-trigger')?.addEventListener(
             'click',
             this._onTzTriggerClick
@@ -513,19 +537,34 @@ export class Ele extends UiBase<Attrs, Emits> {
         if (name === 'quick-key') {
             this._updateRadio();
         }
+        if (name === 'week-start-at') {
+            this._updatePeriodSelector();
+        }
+        if (name === 'start-time' || name === 'end-time') {
+            if (this.quickKey !== 'custom') return;
+            this._updatePeriodSelector();
+        }
     }
 
     private _updatePeriodSelector = debounce(() => {
+        this._periodSelector.weekStartAt = this.weekStartAt;
         if (
             this.shadowRoot?.querySelector<HTMLElement>('.menu.custom')?.style
                 .display === 'none'
         ) {
             return;
         }
-        const defaultPeriod = quickPeriodTimes().last30Days;
         const ele = this._periodSelector;
-        ele.timeStart = defaultPeriod.start;
-        ele.timeEnd = defaultPeriod.end;
+        const startTime = this.startTime;
+        const endTime = this.endTime;
+        if (startTime !== '' && endTime !== '') {
+            ele.timeStart = startTime;
+            ele.timeEnd = endTime;
+        } else {
+            const defaultPeriod = quickPeriodTimes(this.weekStartAt).last30Days;
+            ele.timeStart = defaultPeriod.start;
+            ele.timeEnd = defaultPeriod.end;
+        }
         ele.showCalendarDatePoint();
     }, 0);
 
@@ -575,7 +614,7 @@ export class Ele extends UiBase<Attrs, Emits> {
         if (name === 'radio') {
             const v = value as QuickKey;
             if (v === 'custom') return;
-            const t = quickPeriodTimes()[v];
+            const t = quickPeriodTimes(this.weekStartAt)[v];
             this.dispatchEvent(
                 'time-changed',
                 !t
@@ -593,9 +632,7 @@ export class Ele extends UiBase<Attrs, Emits> {
     private _onDoneBtnClick = (_e: Event) => {
         const selector = this._periodSelector;
         this._showMenu('top');
-        this.shadowRoot!.querySelector<HTMLInputElement>(
-            'input[name="radio"][value="custom"]'
-        )!.checked = true;
+        this.quickKey = 'custom';
         this.dispatchEvent(
             'time-changed',
             {
@@ -606,6 +643,14 @@ export class Ele extends UiBase<Attrs, Emits> {
             true
         );
     };
+
+    public readonly genPeriodTimes = (
+        startFn?: (_t: Date, weekOffset: number) => void,
+        endFn?: (_t: Date, weekOffset: number) => void,
+        t: Date = new Date()
+    ) => {
+        return genPeriodTimes(startFn, endFn, t, this.weekStartAt);
+    };
 }
 
 Ele.define();

package/src/components/{period-selector/date-nav.ts → yyyymm-nav/index.ts}

@@ -1,10 +1,10 @@
+import { css, debounce, html } from '../../utils';
 import {
     type BaseAttrs,
     type Emit2EventMap,
     UiBase
-} from '../../components/web-component-base';
-import { css, debounce, html } from '../../utils';
-// import styleStr from './date-nav.scss?inline';
+} from '../web-component-base';
+// import styleStr from './index.scss?inline';
 const styleStr = css`
 .wrapper {
   display: block;
@@ -133,10 +133,8 @@ export interface Attrs extends BaseAttrs {
 
 export interface Emits {
     change: {
-        oldStartTime: Date;
-        oldEndTime: Date;
-        newStartTime: Date;
-        newEndTime: Date;
+        oldTime: Date;
+        newTime: Date;
     };
     'popover-open-change': boolean;
 }
@@ -148,7 +146,7 @@ export type EventMap = Emit2EventMap<Emits>;
  * 存在一个 titleFormatter 方法，可以重写该方法以自定义年月标题的回显格式。
  */
 export class Ele extends UiBase<Attrs, Emits> {
-    public static readonly tagName = 'dt-date-nav' as const;
+    public static readonly tagName = 'dt-yyyymm-nav' as const;
 
     static get observedAttributes(): string[] {
         return [
@@ -260,10 +258,8 @@ export class Ele extends UiBase<Attrs, Emits> {
             this.dispatchEvent(
                 'change',
                 {
-                    oldStartTime: new Date(+oldValue),
-                    oldEndTime: new Date(+oldValue),
-                    newStartTime: new Date(+newValue),
-                    newEndTime: new Date(+newValue)
+                    oldTime: new Date(+oldValue),
+                    newTime: new Date(+newValue)
                 },
                 true
             );
@@ -279,9 +275,9 @@ export class Ele extends UiBase<Attrs, Emits> {
         root.querySelector('.title')!.textContent = this.titleFormatter(ms);
     }, 0);
 
-    private _onTitleToggle = ({
-        detail: isOpen
-    }: PopoverEvent['open-change']) => {
+    private _onTitleToggle = (e: PopoverEvent['open-change']) => {
+        const isOpen = e.detail;
+        e.stopPropagation();
         this.shadowRoot!.querySelector('.wrapper')!.classList.toggle(
             'show-list',
             isOpen
@@ -293,6 +289,7 @@ export class Ele extends UiBase<Attrs, Emits> {
     };
     private _onItemSelect = (e: YyyyMmDdListGrpEvent['change']) => {
         if (!(e.target instanceof YyyyMmDdListGrpEle)) return;
+        e.stopPropagation();
         this.millisecond = e.target.millisecond;
     };
     private _onBtnClick = (e: MouseEvent) => {

package/src/components/yyyymmdd-list-grp/index.ts

@@ -1,4 +1,4 @@
-import { debounce, html } from '../../utils';
+import { css, debounce, html } from '../../utils';
 import { Ele as NumListEle, type EventMap as NumListEvent } from '../num-list';
 NumListEle.define();
 import {
@@ -7,7 +7,40 @@ import {
     UiBase
 } from '../web-component-base';
 // import styleStr from './index.scss?inline';
-const styleStr = '';
+const styleStr = css`
+:host {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: 15px;
+}
+
+.cols {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  height: 0;
+  justify-content: space-between;
+  gap: 2px;
+}
+
+.col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.col > span {
+  text-align: center;
+  display: inline-block;
+  line-height: 27px;
+}
+
+dt-num-list {
+  flex: 1;
+}
+`;
 
 export interface Attrs extends BaseAttrs {
     millisecond: number;
@@ -93,33 +126,21 @@ export class Ele extends UiBase<Attrs, Emits> {
         this.setAttribute('millisecond', '' + Math.floor(v));
     }
     public get maxGranularity() {
-        return this._getAttr('max-granularity', 'year') as
-            | 'year'
-            | 'month'
-            | 'day';
+        return this._getAttr('max-granularity', 'year');
     }
     public set maxGranularity(v: 'year' | 'month' | 'day') {
         if (!['year', 'month', 'day'].includes(v)) return;
         this.setAttribute('max-granularity', v);
     }
     public get minGranularity() {
-        return this._getAttr('min-granularity', 'day') as
-            | 'year'
-            | 'month'
-            | 'day';
+        return this._getAttr('min-granularity', 'day');
     }
     public set minGranularity(v: 'year' | 'month' | 'day') {
         if (!['year', 'month', 'day'].includes(v)) return;
         this.setAttribute('min-granularity', v);
     }
     public get colOrder() {
-        return this._getAttr('col-order', 'dmy') as
-            | 'ymd'
-            | 'ydm'
-            | 'myd'
-            | 'mdy'
-            | 'dym'
-            | 'dmy';
+        return this._getAttr('col-order', 'dmy');
     }
     public set colOrder(v: 'ymd' | 'ydm' | 'myd' | 'mdy' | 'dym' | 'dmy') {
         if (!['ymd', 'ydm', 'myd', 'mdy', 'dym', 'dmy'].includes(v)) return;

package/src/index.ts

@@ -4,6 +4,7 @@ export * as DtHhMmSsMsListGrp from './components/hhmmss-ms-list-grp';
 export * as DtYyyyMmDdListGrp from './components/yyyymmdd-list-grp';
 export * as DtQuickSelector from './components/quick-selector';
 export * as DtPopover from './components/popover';
+export * as DtDataTimeSelector from './components/date-time-selector';
 
 export {
     i18n as dtI18n,