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

package/src/components/date-time-selector/index.ts

@@ -0,0 +1,291 @@
+import { closestByEvent, debounce, html } from '../../utils';
+import {
+    type BaseAttrs,
+    type Emit2EventMap,
+    UiBase
+} from '../web-component-base';
+import {
+    Ele as YyyyMmNavEle,
+    type EventMap as YyyyMmNavEvent
+} from '../yyyymm-nav';
+import { styleStr } from './styleStr';
+YyyyMmNavEle.define();
+import {
+    Ele as CalendarBaseEle,
+    type EventMap as CalendarBaseEvent,
+    type Weeks,
+    weekKey
+} from '../calendar';
+CalendarBaseEle.define();
+import { Ele as HhMmSsMsListGrpEle } from '../hhmmss-ms-list-grp';
+HhMmSsMsListGrpEle.define();
+import { Ele as PopoverEle, type EventMap as PopoverEvent } from '../popover';
+PopoverEle.define();
+
+const granularityList = [
+    'day',
+    'hour',
+    'minute',
+    'second',
+    'millisecond'
+] as const;
+
+export interface Attrs extends BaseAttrs {
+    /**
+     * Set which day of the week is the first day.
+     * @type `'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'`
+     * @default 'sun'
+     */
+    'week-start-at'?: Weeks;
+    /**
+     * The time of the calendar.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     * @default Date.now()
+     */
+    'current-time'?: string | number;
+    /**
+     * The showing time, used to determine the month to show on calendar.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     * @default 'current-time'
+     */
+    'showing-time'?: string | number;
+    /**
+     * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
+     * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
+     */
+    'min-granularity'?: 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
+}
+
+export interface Emits {
+    'select-time': Date;
+    'open-change': boolean;
+}
+export type EventMap = Emit2EventMap<Emits>;
+
+export class Ele extends UiBase<Attrs, Emits> {
+    public static readonly tagName = 'dt-date-time-selector' as const;
+    static get observedAttributes(): string[] {
+        return [
+            ...(super.observedAttributes as (keyof BaseAttrs)[]),
+            'week-start-at',
+            'current-time',
+            'showing-time',
+            'min-granularity'
+        ] satisfies (keyof Attrs)[];
+    }
+    public get currentTime() {
+        const v = this._getAttr('current-time', '' + Date.now());
+        return new Date(Number.isNaN(+v) ? v : +v);
+    }
+    public set currentTime(val: number | string | Date) {
+        const v = new Date(val);
+        if (Number.isNaN(+v)) return;
+        this.setAttribute('current-time', +v + '');
+    }
+    public get showingTime() {
+        const v = this._getAttr('showing-time', '' + this.currentTime);
+        return new Date(Number.isNaN(+v) ? v : +v);
+    }
+    public set showingTime(val: number | string | Date) {
+        const v = new Date(val);
+        if (Number.isNaN(+v)) return;
+        this.setAttribute('showing-time', +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);
+    }
+    public get minGranularity() {
+        return this._getAttr('min-granularity', 'millisecond');
+    }
+    public set minGranularity(val:
+        | 'day'
+        | 'hour'
+        | 'minute'
+        | 'second'
+        | 'millisecond') {
+        if (!granularityList.includes(val)) return;
+        this.setAttribute('min-granularity', val);
+    }
+
+    protected _style = styleStr;
+    protected _template = html`
+<dt-popover>
+    <slot slot="trigger" name="trigger"><button>select date and time</button></slot>
+    <div slot="pop" class="wrapper menu">
+        <dt-yyyymm-nav
+            show-ctrl-btn-month-add
+            show-ctrl-btn-month-sub
+        ></dt-yyyymm-nav>
+        <dt-calendar-base></dt-calendar-base>
+        <dt-popover id="time-popover">
+            <div slot="trigger" class="time-echo-wrapper">
+                <i class="time-icon"></i>
+                <span class="time-echo">hh:mm:ss.sss</span>
+            </div>
+            <div slot="pop" class="time-selector">
+                <h3 class="title">Select Time</h3>
+                <dt-hhmmss-ms-list-grp></dt-hhmmss-ms-list-grp>
+                <button id="time-selector-done-btn">Done</button>
+            </div>
+        </dt-popover>
+    </div>
+</dt-popover>
+`;
+
+    private get _navEle() {
+        return this.shadowRoot?.querySelector('dt-yyyymm-nav') as YyyyMmNavEle;
+    }
+    private get _calendar() {
+        return this.shadowRoot?.querySelector(
+            'dt-calendar-base'
+        ) as CalendarBaseEle;
+    }
+    private get _timeSelector() {
+        return this.shadowRoot?.querySelector(
+            'dt-hhmmss-ms-list-grp'
+        ) as HhMmSsMsListGrpEle;
+    }
+    private get _timePopover() {
+        return this.shadowRoot?.querySelector('#time-popover') as PopoverEle;
+    }
+
+    constructor() {
+        super();
+        this._applyTemplate();
+    }
+
+    public connectedCallback() {
+        if (!super.connectedCallback()) return;
+        this._calendar.formatter = (i: number) => String(i).padStart(2, '0');
+        this._render();
+        this._calendar.addEventListener('select-time', this._onCalendarSelect);
+        this._navEle.addEventListener('change', this._onNavChange);
+        this._timePopover.addEventListener(
+            'open-change',
+            this._onTimePopoverOpenChange
+        );
+        this._navEle.addEventListener(
+            'popover-open-change',
+            this._onNavOpenToggle
+        );
+        this.shadowRoot
+            ?.querySelectorAll('#time-selector-done-btn')
+            .forEach((btn) => {
+                btn.addEventListener('click', this._onTimeSelectorDoneClick);
+            });
+    }
+    public disconnectedCallback() {
+        if (!super.disconnectedCallback()) return;
+        this._calendar.removeEventListener(
+            'select-time',
+            this._onCalendarSelect
+        );
+        this._navEle.removeEventListener('change', this._onNavChange);
+        this._timePopover.removeEventListener(
+            'open-change',
+            this._onTimePopoverOpenChange
+        );
+        this._navEle.removeEventListener(
+            'popover-open-change',
+            this._onNavOpenToggle
+        );
+        this.shadowRoot
+            ?.querySelectorAll('#time-selector-done-btn')
+            .forEach((btn) => {
+                btn.removeEventListener('click', this._onTimeSelectorDoneClick);
+            });
+    }
+    protected _onAttrChanged(name: string, oldValue: string, newValue: string) {
+        super._onAttrChanged(name, oldValue, newValue);
+        this._render();
+        if (name === 'current-time') {
+            this.dispatchEvent('select-time', this.currentTime as Date);
+        }
+    }
+
+    private _render = debounce(() => {
+        if (!this.isConnected) return;
+        const currentTime = this.currentTime as Date;
+        this._calendar.weekStartAt = this.weekStartAt;
+        const tz = new Date().getTimezoneOffset() * 60 * 1000;
+        this._navEle.millisecond =
+            this._calendar.timeStart =
+            this._calendar.timeEnd =
+                +currentTime;
+        this._calendar.showingTime = this.showingTime;
+
+        const selectorWrapper =
+            this.shadowRoot!.querySelector<HTMLElement>('.time-selector')!;
+        if (this.minGranularity === 'day') {
+            this._timeSelector.millisecond = 0;
+            selectorWrapper.style.display = 'none';
+            return;
+        }
+        selectorWrapper.style.display = '';
+        this._timeSelector.minGranularity = this.minGranularity;
+
+        this._timeSelector.millisecond =
+            (+currentTime - tz) % (24 * 60 * 60 * 1000);
+        this.shadowRoot!.querySelector('.wrapper .time-echo')!.textContent =
+            this.timeFormatter(currentTime as Date, this.minGranularity);
+    }, 0);
+
+    private _onCalendarSelect = (e: CalendarBaseEvent['select-time']) => {
+        e.stopPropagation();
+        this.currentTime = +e.detail + this._timeSelector.millisecond;
+    };
+    private _onNavChange = (e: YyyyMmNavEvent['change']) => {
+        e.stopPropagation();
+        const wrapper = closestByEvent(e, '.wrapper');
+        if (!wrapper) return;
+        const { newTime } = e.detail;
+        this._calendar.showingTime = +newTime;
+    };
+    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
+            .querySelector<HhMmSsMsListGrpEle>('dt-hhmmss-ms-list-grp')
+            ?.scrollToCurrentItem();
+    };
+    private _onNavOpenToggle = (e: YyyyMmNavEvent['popover-open-change']) => {
+        if (!(e.target instanceof YyyyMmNavEle)) return;
+        e.stopPropagation();
+        e.target.nextElementSibling?.classList.toggle('hide', e.detail);
+    };
+    private _onTimeSelectorDoneClick = (e: Event) => {
+        const btn = closestByEvent(e, '#time-selector-done-btn');
+        if (!btn) return;
+        const calcTime = (time: Date, ms: number) => {
+            time.setHours(0, 0, 0, 0);
+            time.setMilliseconds(ms);
+            return time;
+        };
+        this.currentTime = calcTime(
+            this.currentTime as Date,
+            this._timeSelector.millisecond
+        );
+        this._timePopover.open = false;
+    };
+
+    public timeFormatter = (
+        time: Date,
+        minGranularity: 'day' | 'hour' | 'minute' | 'second' | 'millisecond'
+    ) => {
+        const t = new Date(+time - new Date().getTimezoneOffset() * 60 * 1000)
+            .toISOString()
+            .slice(11, 23);
+        if (minGranularity === 'day') return '';
+        if (minGranularity === 'hour') return t.slice(0, 2);
+        if (minGranularity === 'minute') return t.slice(0, 5);
+        if (minGranularity === 'second') return t.slice(0, 8);
+        return t;
+    };
+}
+
+Ele.define();

package/src/components/date-time-selector/styleStr.ts

@@ -0,0 +1,125 @@
+import { css } from '../../utils';
+
+export const styleStr = css`
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+dt-popover {
+  position: relative;
+}
+
+[open] > .time-echo-wrapper {
+  border-color: #18181B;
+}
+
+.time-echo-wrapper {
+  width: 100%;
+  padding: 4px;
+  display: flex;
+  gap: 5px;
+  border-radius: 4px;
+  min-height: 30px;
+  border: 1px solid #0001;
+  box-sizing: border-box;
+  align-items: center;
+  cursor: pointer;
+}
+
+.time-selector {
+  position: absolute;
+  width: 100%;
+  height: 461px;
+  box-sizing: border-box;
+  background-color: #fff;
+
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  padding: 15px;
+  border-radius: 6px;
+  border: 1px solid #eee;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+
+  .title {
+    font-size: 16px;
+    margin: 0;
+    line-height: 1;
+  }
+}
+
+dt-hhmmss-ms-list-grp::part(list-container) {
+  gap: 2px;
+}
+dt-hhmmss-ms-list-grp::part(list) {
+  scroll-behavior: smooth;
+}
+dt-hhmmss-ms-list-grp::part(item) {
+  font-size: 14px;
+  line-height: 17px;
+}
+
+#time-selector-done-btn {
+  border: none;
+  min-height: 30px;
+  border-radius: 6px;
+  padding: 5px 10px;
+  font-size: 14px;
+  background-color: #18181B;
+  color: #fff;
+}
+
+.time-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' fill='currentColor'%3E%3Cpath d='M7.4335 4.241a.4376.4376 0 0 0-.871.0594v3.783l.0044.0622a.4375.4375 0 0 0 .1921.3029L8.9242 9.877l.0566.0317a.4376.4376 0 0 0 .5495-.1559l.0317-.0566a.4376.4376 0 0 0-.1559-.5495L7.4375 7.8471V4.3004l-.004-.0593ZM7 1.6667c-3.2217 0-5.8333 2.6116-5.8333 5.8333 0 3.2217 2.6116 5.8333 5.8333 5.8333 3.2217 0 5.8333-2.6116 5.8333-5.8333 0-3.2217-2.6116-5.8333-5.8333-5.8333Zm0 .814c2.7721 0 5.0194 2.2472 5.0194 5.0193 0 2.7721-2.2473 5.0194-5.0194 5.0194S1.9806 10.2721 1.9806 7.5 4.228 2.4806 7 2.4806Z'/%3E%3C/svg%3E") 50%/20px 20px no-repeat;
+}
+
+.time-echo {
+  font-size: 14px;
+  color: #999;
+  line-height: 1;
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 5px;
+  font-size: 14px;
+  gap: 10px;
+  border-radius: 6px;
+  border: 1px solid #eee;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  background-color: #fff;
+  width: 285px;
+
+  & > * {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+dt-calendar-base {
+  // 254 = item height 6 * 30 + week 14 + gap 10 * 6
+  height: 254px;
+
+  &::part(week) {
+    font-size: 12px;
+    line-height: 14px;
+  }
+
+  &::part(item) {
+    font-size: 14px;
+  }
+}
+dt-yyyymm-nav::part(list-grp) {
+  height: 254px;
+  margin-top: 10px;
+}
+dt-calendar-base.hide {
+  display: none;
+}
+`;

package/src/components/hhmmss-ms-list-grp/index.ts

@@ -114,7 +114,7 @@ export class Ele extends UiBase<Attrs, Emits> {
     protected _style = styleStr;
     protected _template = html`
         <div class="cols" part="cols">
-            <div class="col" part="col hour">
+            <div class="col hour" part="col hour">
                 <span>Hour</span>
                 <dt-num-list
                     exportparts="container:list-container, item, item-current"
@@ -124,7 +124,7 @@ export class Ele extends UiBase<Attrs, Emits> {
                     max-num="23"
                 ></dt-num-list>
             </div>
-            <div class="col" part="col minute">
+            <div class="col minute" part="col minute">
                 <span>Minute</span>
                 <dt-num-list
                     exportparts="container:list-container, item, item-current"
@@ -134,7 +134,7 @@ export class Ele extends UiBase<Attrs, Emits> {
                     max-num="59"
                 ></dt-num-list>
             </div>
-            <div class="col" part="col second">
+            <div class="col second" part="col second">
                 <span>Second</span>
                 <dt-num-list
                     exportparts="container:list-container, item, item-current"
@@ -156,14 +156,18 @@ export class Ele extends UiBase<Attrs, Emits> {
         this._applyTemplate();
     }
 
-    private get _colsHourEle() {
-        return this.shadowRoot?.querySelector('.cols .hour') as NumListEle;
+    private get _listEleHour() {
+        return this.shadowRoot?.querySelector('dt-num-list.hour') as NumListEle;
     }
-    private get _colsMinuteEle() {
-        return this.shadowRoot?.querySelector('.cols .minute') as NumListEle;
+    private get _listEleMinute() {
+        return this.shadowRoot?.querySelector(
+            'dt-num-list.minute'
+        ) as NumListEle;
     }
-    private get _colsSecondEle() {
-        return this.shadowRoot?.querySelector('.cols .second') as NumListEle;
+    private get _listEleSecond() {
+        return this.shadowRoot?.querySelector(
+            'dt-num-list.second'
+        ) as NumListEle;
     }
     private get _msInputEle() {
         return this.shadowRoot?.querySelector('input#ms') as HTMLInputElement;
@@ -178,35 +182,21 @@ export class Ele extends UiBase<Attrs, Emits> {
         this.setAttribute('millisecond', '' + v);
     }
     public get maxGranularity() {
-        return this._getAttr('max-granularity', 'hour') as
-            | 'hour'
-            | 'minute'
-            | 'second'
-            | 'millisecond';
+        return this._getAttr('max-granularity', 'hour');
     }
     public set maxGranularity(v: 'hour' | 'minute' | 'second' | 'millisecond') {
         if (!['hour', 'minute', 'second', 'millisecond'].includes(v)) return;
         this.setAttribute('max-granularity', v);
     }
     public get minGranularity() {
-        return this._getAttr('min-granularity', 'millisecond') as
-            | 'hour'
-            | 'minute'
-            | 'second'
-            | 'millisecond';
+        return this._getAttr('min-granularity', 'millisecond');
     }
     public set minGranularity(v: 'hour' | 'minute' | 'second' | 'millisecond') {
         if (!['hour', 'minute', 'second', 'millisecond'].includes(v)) return;
         this.setAttribute('min-granularity', v);
     }
     public get colOrder() {
-        return this._getAttr('col-order', 'smh') as
-            | 'hms'
-            | 'hsm'
-            | 'mhs'
-            | 'msh'
-            | 'shm'
-            | 'smh';
+        return this._getAttr('col-order', 'smh');
     }
     public set colOrder(v: 'hms' | 'hsm' | 'mhs' | 'msh' | 'shm' | 'smh') {
         if (!['hms', 'hsm', 'mhs', 'msh', 'shm', 'smh'].includes(v)) return;
@@ -221,28 +211,28 @@ export class Ele extends UiBase<Attrs, Emits> {
 
     public connectedCallback() {
         if (!super.connectedCallback()) return;
-        this._colsHourEle.formatter =
-            this._colsMinuteEle.formatter =
-            this._colsSecondEle.formatter =
+        this._listEleHour.formatter =
+            this._listEleMinute.formatter =
+            this._listEleSecond.formatter =
                 (num) => ('0' + num).slice(-2);
 
         this._renderCols();
         this._updateGranularity();
         this._updateColsValue();
 
-        this._colsHourEle.addEventListener('select-num', this._onColsSelect);
-        this._colsMinuteEle.addEventListener('select-num', this._onColsSelect);
-        this._colsSecondEle.addEventListener('select-num', this._onColsSelect);
+        this._listEleHour.addEventListener('select-num', this._onColsSelect);
+        this._listEleMinute.addEventListener('select-num', this._onColsSelect);
+        this._listEleSecond.addEventListener('select-num', this._onColsSelect);
         this._msInputEle.addEventListener('input', this._onMsInput);
     }
     public disconnectedCallback() {
         if (!super.disconnectedCallback()) return;
-        this._colsHourEle.removeEventListener('select-num', this._onColsSelect);
-        this._colsMinuteEle.removeEventListener(
+        this._listEleHour.removeEventListener('select-num', this._onColsSelect);
+        this._listEleMinute.removeEventListener(
             'select-num',
             this._onColsSelect
         );
-        this._colsSecondEle.removeEventListener(
+        this._listEleSecond.removeEventListener(
             'select-num',
             this._onColsSelect
         );
@@ -261,9 +251,9 @@ export class Ele extends UiBase<Attrs, Emits> {
         if (!this.isConnected) return;
         const {
             colOrder,
-            _colsHourEle: hEle,
-            _colsMinuteEle: mEle,
-            _colsSecondEle: sEle
+            _listEleHour: hEle,
+            _listEleMinute: mEle,
+            _listEleSecond: sEle
         } = this;
         // columns order
         const orderedCols: HTMLElement[] = [];
@@ -283,13 +273,15 @@ export class Ele extends UiBase<Attrs, Emits> {
 
     private _updateGranularity = debounce(() => {
         if (!this.isConnected) return;
-        const {
-            _colsHourEle: hEle,
-            _colsMinuteEle: mEle,
-            _colsSecondEle: sEle,
-            maxGranularity,
-            minGranularity
-        } = this;
+        const { maxGranularity, minGranularity } = this;
+        const hEle = this.shadowRoot!.querySelector<HTMLElement>('.col.hour')!;
+        const mEle =
+            this.shadowRoot!.querySelector<HTMLElement>('.col.minute')!;
+        const sEle =
+            this.shadowRoot!.querySelector<HTMLElement>('.col.second')!;
+        const msEle = this.shadowRoot!.querySelector<HTMLElement>(
+            '[part="ms-wrapper"]'
+        )!;
         const colsContainer =
             this.shadowRoot!.querySelector<HTMLElement>('.cols')!;
 
@@ -311,17 +303,15 @@ export class Ele extends UiBase<Attrs, Emits> {
         ).length
             ? ''
             : 'none';
-        this.shadowRoot!.querySelector<HTMLElement>(
-            '[part="ms-wrapper"]'
-        )!.style.display = maxG >= 0 && minG <= 0 ? '' : 'none';
+        msEle.style.display = maxG >= 0 && minG <= 0 ? '' : 'none';
     }, 0);
 
     private _updateColsValue = debounce(() => {
         if (!this.isConnected) return;
         const {
-            _colsHourEle: hEle,
-            _colsMinuteEle: mEle,
-            _colsSecondEle: sEle,
+            _listEleHour: hEle,
+            _listEleMinute: mEle,
+            _listEleSecond: sEle,
             millisecond
         } = this;
 
@@ -339,9 +329,9 @@ export class Ele extends UiBase<Attrs, Emits> {
     }, 0);
 
     private _getMsFromEle() {
-        const hour = this._colsHourEle.currentNum;
-        const minute = this._colsMinuteEle.currentNum;
-        const second = this._colsSecondEle.currentNum;
+        const hour = this._listEleHour.currentNum;
+        const minute = this._listEleMinute.currentNum;
+        const second = this._listEleSecond.currentNum;
         const ms = Math.min(Math.max(0, +this._msInputEle.value || 0), 999);
         return ((hour * 60 + minute) * 60 + second) * 1000 + ms;
     }

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

@@ -45,7 +45,7 @@
   background-color: #eee;
 }
 
-dt-date-nav::part(list-grp) {
+dt-yyyymm-nav::part(list-grp) {
   height: 254px;
   margin-top: 15px;
 }
@@ -85,6 +85,7 @@ dt-popover {
   border: 1px solid #0001;
   box-sizing: border-box;
   align-items: center;
+  cursor: pointer;
 }
 
 .time-selector {
@@ -109,7 +110,7 @@ dt-popover {
   }
 }
 
-dt-hhmmss-ms-list-grp{
+dt-hhmmss-ms-list-grp {
   &::part(list-container) {
     gap: 2px;
   }