@gez/date-time-kit 1.1.4 → 2.0.0-alpha.1

package/dist/components/num-list/index.d.ts

@@ -0,0 +1,68 @@
+import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
+export interface Attrs extends BaseAttrs {
+    /**
+     * The current number in the list. The component will scroll to this number when rendered.
+     * @type {number}
+     */
+    'current-num': number;
+    /**
+     * The minimum number in the list (include). If not set, there is no minimum limit.
+     * @type {number}
+     * @default -Infinity
+     */
+    'min-num'?: number;
+    /**
+     * The maximum number in the list (include). If not set, there is no maximum limit.
+     * @type {number}
+     * @default Infinity
+     */
+    'max-num'?: number;
+    /**
+     * The position to scroll the current number into view.
+     * @type {`"center" | "end" | "nearest" | "start"`}
+     * @default "start"
+     */
+    position?: ScrollLogicalPosition;
+}
+export interface Emits {
+    'select-num': {
+        oldNum: number;
+        newNum: number;
+    };
+}
+export type EventMap = Emit2EventMap<Emits>;
+/**
+ * 基础的数字列表组件。允许无限滚动。点击后可以滚动定位到当前数字。
+ *
+ * 存在一个 formatter 方法，可以重写该方法以自定义数字的显示格式。
+ */
+export declare class Ele extends UiBase<Attrs, Emits> {
+    static tagName: "dt-num-list";
+    static get observedAttributes(): string[];
+    protected _style: string;
+    protected _template: string;
+    constructor();
+    private get _containerEle();
+    private get _currentItemEle();
+    get currentNum(): number;
+    set currentNum(val: number);
+    get minNum(): number;
+    set minNum(val: number);
+    get maxNum(): number;
+    set maxNum(val: number);
+    private _createItem;
+    private _intersectionOb;
+    private _destroyOb;
+    private _initOb;
+    private _loadBefore;
+    private _loadAfter;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    private get _itemHeight();
+    private get _pageSize();
+    scrollToCurrent: () => void;
+    private _render;
+    private _onClick;
+    formatter: (num: number) => string;
+}

package/dist/components/num-list/index.mjs

@@ -0,0 +1,259 @@
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a, _b;
+import { closestByEvent, css, debounce, html } from "../../utils.mjs";
+import {
+  UiBase
+} from "../web-component-base/index.mjs";
+const styleStr = css(_a || (_a = __template(["\n:host {\n  --color-current-bg: var(--calendar-item-in-range-bg, #002BE726);\n  --color-current-text: var(--calendar-item-in-range-text, #002BE7);\n  --color-hover-bg: var(--calendar-item-hover-bg, #0000000D);\n  --color-hover-text: var(--calendar-item-hover-text, #000);\n  display: block;\n  overflow: hidden auto;\n  position: relative !important;\n  overflow-anchor: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 5px;\n}\n\n.item {\n  cursor: pointer;\n  user-select: none;\n  width: 100%;\n  text-align: center;\n  border-radius: 2px;\n  padding: 5px 2px;\n  box-sizing: border-box;\n}\n.item.item-current {\n  color: var(--color-current-text);\n  background-color: var(--color-current-bg);\n}\n.item:hover {\n  color: var(--color-hover-text);\n  background-color: var(--color-hover-bg);\n}\n"])));
+export class Ele extends UiBase {
+  constructor() {
+    super();
+    __publicField(this, "_style", styleStr);
+    __publicField(this, "_template", html(_b || (_b = __template(['<div class="container" part="container"></div>']))));
+    __publicField(this, "_createItem", (num, currentNum = this.currentNum) => {
+      const ele = document.createElement("div");
+      ele.setAttribute("part", ele.className = "item");
+      ele.classList.toggle("item-current", num === currentNum);
+      ele.part.toggle("item-current", num === currentNum);
+      ele.dataset.number = num + "";
+      ele.textContent = this.formatter(num);
+      return ele;
+    });
+    __publicField(this, "_intersectionOb", null);
+    __publicField(this, "_loadBefore", debounce(() => {
+      var _a2, _b2, _c, _d;
+      const container = this._containerEle;
+      const firstItem = container.firstElementChild;
+      const lastItem = container.lastElementChild;
+      const firstNum = Number(firstItem.dataset.number);
+      const curNum = this.currentNum;
+      const pageSize = this._pageSize;
+      const itemHeight = this._itemHeight;
+      const items = [...Array(pageSize * 2)].map(
+        (_, i) => this._createItem(firstNum - pageSize * 2 + i, curNum)
+      );
+      (_a2 = this._intersectionOb) == null ? void 0 : _a2.unobserve(firstItem);
+      (_b2 = this._intersectionOb) == null ? void 0 : _b2.unobserve(lastItem);
+      const scrollTop = this.scrollTop;
+      container.prepend(...items);
+      for (let i = 0; i < items.length; ++i) {
+        container.removeChild(container.lastElementChild);
+      }
+      const addedHeight = items.length * itemHeight;
+      this.scrollTo({
+        top: scrollTop + addedHeight,
+        behavior: "instant"
+      });
+      (_c = this._intersectionOb) == null ? void 0 : _c.observe(items[0]);
+      (_d = this._intersectionOb) == null ? void 0 : _d.observe(container.lastElementChild);
+    }, 0));
+    __publicField(this, "_loadAfter", debounce(() => {
+      var _a2, _b2, _c, _d;
+      const container = this._containerEle;
+      const firstItem = container.firstElementChild;
+      const lastItem = container.lastElementChild;
+      const curNum = this.currentNum;
+      const pageSize = this._pageSize;
+      const itemHeight = this._itemHeight;
+      const lastNum = Number(lastItem.textContent);
+      const items = [...Array(pageSize * 2)].map(
+        (_, i) => this._createItem(lastNum + i + 1, curNum)
+      );
+      (_a2 = this._intersectionOb) == null ? void 0 : _a2.unobserve(firstItem);
+      (_b2 = this._intersectionOb) == null ? void 0 : _b2.unobserve(lastItem);
+      const scrollTop = this.scrollTop;
+      container.append(...items);
+      for (let i = 0; i < items.length; ++i) {
+        container.removeChild(container.firstElementChild);
+      }
+      const addedHeight = items.length * itemHeight;
+      this.scrollTo({
+        top: scrollTop - addedHeight,
+        behavior: "instant"
+      });
+      (_c = this._intersectionOb) == null ? void 0 : _c.observe(container.firstElementChild);
+      (_d = this._intersectionOb) == null ? void 0 : _d.observe(items[items.length - 1]);
+    }, 0));
+    __publicField(this, "scrollToCurrent", () => {
+      var _a2;
+      const ele = this._currentItemEle;
+      if (!ele) return;
+      (_a2 = this._intersectionOb) == null ? void 0 : _a2.observe(ele);
+      const containerRect = this._containerEle.getBoundingClientRect();
+      const eleRect = ele.getBoundingClientRect();
+      const offsetTop = eleRect.top - containerRect.top + this.scrollTop;
+      this.scrollTo({
+        top: offsetTop
+      });
+    });
+    __publicField(this, "_render", debounce(() => {
+      if (!this.isConnected) return;
+      this._destroyOb();
+      const container = this._containerEle;
+      container.innerHTML = "";
+      if (!this.hasAttribute("current-num")) return;
+      const currentNum = this.currentNum;
+      const minNum = this.minNum;
+      const maxNum = this.maxNum;
+      if (minNum === Number.NEGATIVE_INFINITY && maxNum === Number.POSITIVE_INFINITY) {
+        this._initOb();
+        const pageSize = this._pageSize;
+        for (let i = -pageSize * 2; i <= pageSize * 2; ++i) {
+          container.appendChild(
+            this._createItem(currentNum + i, currentNum)
+          );
+        }
+      } else
+        for (let i = minNum; i <= maxNum; ++i) {
+          container.appendChild(this._createItem(i, currentNum));
+        }
+      setTimeout(this.scrollToCurrent, 0);
+    }, 0));
+    __publicField(this, "_onClick", (e) => {
+      var _a2;
+      if (!this.isConnected) return;
+      const container = this._containerEle;
+      const oldCurrent = container.querySelector(".item-current");
+      const item = closestByEvent(e, ".item", this);
+      if (!item || item === oldCurrent) return;
+      oldCurrent == null ? void 0 : oldCurrent.classList.remove("item-current");
+      oldCurrent == null ? void 0 : oldCurrent.part.remove("item-current");
+      item.classList.add("item-current");
+      item.part.add("item-current");
+      this.scrollToCurrent();
+      super.dispatchEvent(
+        "select-num",
+        {
+          oldNum: +((_a2 = oldCurrent == null ? void 0 : oldCurrent.dataset.number) != null ? _a2 : this.currentNum),
+          newNum: +item.dataset.number
+        },
+        true
+      );
+    });
+    __publicField(this, "formatter", (num) => "" + num);
+    this._applyTemplate();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "current-num",
+      "min-num",
+      "max-num"
+    ];
+  }
+  get _containerEle() {
+    var _a2;
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(".container");
+  }
+  get _currentItemEle() {
+    return this._containerEle.querySelector(".item-current");
+  }
+  get currentNum() {
+    return Number(this._getAttr("current-num"));
+  }
+  set currentNum(val) {
+    this.setAttribute("current-num", String(val));
+  }
+  get minNum() {
+    return Number(this._getAttr("min-num", "-Infinity"));
+  }
+  set minNum(val) {
+    let min = +val;
+    if (Number.isNaN(min)) min = Number.NEGATIVE_INFINITY;
+    if (min > this.maxNum) [this.maxNum, min] = [min, this.maxNum];
+    this.setAttribute("min-num", String(val));
+  }
+  get maxNum() {
+    return Number(this._getAttr("max-num", "Infinity"));
+  }
+  set maxNum(val) {
+    let max = +val;
+    if (Number.isNaN(max)) max = Number.POSITIVE_INFINITY;
+    if (max < this.minNum) [this.minNum, max] = [max, this.minNum];
+    this.setAttribute("max-num", String(val));
+  }
+  _destroyOb() {
+    var _a2;
+    (_a2 = this._intersectionOb) == null ? void 0 : _a2.disconnect();
+    this._intersectionOb = null;
+  }
+  _initOb() {
+    this._destroyOb();
+    if (!this.shadowRoot) return;
+    this._intersectionOb = new IntersectionObserver(
+      (entries, observer) => {
+        const container = this._containerEle;
+        const firstItem = container.firstElementChild;
+        const lastItem = container.lastElementChild;
+        for (const { target, isIntersecting } of entries) {
+          if (!isIntersecting) continue;
+          observer.unobserve(target);
+          if (target === this._currentItemEle) {
+            observer.observe(firstItem);
+            observer.observe(lastItem);
+          }
+          if (target === firstItem) {
+            this._loadBefore();
+          } else if (target === lastItem) {
+            this._loadAfter();
+          }
+        }
+      },
+      { root: this }
+    );
+  }
+  connectedCallback() {
+    if (!super.connectedCallback()) return;
+    this._render();
+    this.addEventListener("click", this._onClick);
+  }
+  disconnectedCallback() {
+    if (!super.disconnectedCallback()) return;
+    this.removeEventListener("click", this._onClick);
+    this._destroyOb();
+  }
+  _onAttrChanged(name, oldValue, newValue) {
+    var _a2;
+    super._onAttrChanged(name, oldValue, newValue);
+    if (name === "current-num" && newValue === ((_a2 = this._containerEle.querySelector(".item-current")) == null ? void 0 : _a2.dataset.number)) {
+      return;
+    }
+    this._render();
+  }
+  get _itemHeight() {
+    const container = this._containerEle;
+    const items = Array.from(
+      container.querySelectorAll(".item")
+    );
+    const len = items.length;
+    if (len === 1) {
+      container.append(this._createItem(0, 1));
+    } else if (len === 0) {
+      container.append(this._createItem(0, 1), this._createItem(0, 1));
+    }
+    const h = container.firstElementChild.offsetHeight;
+    const itemNum = Math.max(2, len);
+    const gap = Math.max(
+      0,
+      (container.clientHeight - h * itemNum) / (itemNum - 1)
+    );
+    if (len === 0) {
+      container.removeChild(container.lastElementChild);
+      container.removeChild(container.lastElementChild);
+    } else if (len === 1) {
+      container.removeChild(container.lastElementChild);
+    }
+    return h + gap;
+  }
+  get _pageSize() {
+    const thisHeight = this.clientHeight;
+    if (thisHeight === 0) return 10;
+    return Math.min(10, Math.ceil(thisHeight / this._itemHeight));
+  }
+}
+__publicField(Ele, "tagName", "dt-num-list");
+Ele.define();

package/dist/components/period-selector/index.css

@@ -0,0 +1,153 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.date-echo {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.start-date-echo-wrapper,
+.end-date-echo-wrapper {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.1490196078);
+  padding: 4px;
+}
+.start-date-echo-wrapper.active,
+.end-date-echo-wrapper.active {
+  border-color: #333;
+}
+
+.date-echo .label {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.start-date-echo, .end-date-echo {
+  font-size: 16px;
+  line-height: 1;
+  font-weight: bold;
+}
+
+.dividing-line {
+  display: block;
+  height: 1px;
+  width: 20px;
+  background-color: #eee;
+}
+
+dt-yyyymm-nav::part(list-grp) {
+  height: 254px;
+  margin-top: 15px;
+}
+
+dt-calendar-base.hide {
+  display: none;
+}
+
+.calendars {
+  display: flex;
+  gap: 20px;
+}
+
+.wrapper {
+  flex: 1;
+  height: 100%;
+  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 rgba(0, 0, 0, 0.0666666667);
+  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);
+}
+.time-selector .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("@/assets/time.svg") 50%/20px 20px no-repeat;
+}
+
+.time-echo {
+  font-size: 14px;
+  color: #999;
+  line-height: 1;
+}
+
+dt-calendar-base {
+  height: 254px;
+}
+dt-calendar-base::part(week) {
+  font-size: 12px;
+  line-height: 14px;
+}
+dt-calendar-base::part(item) {
+  font-size: 14px;
+}

package/dist/components/period-selector/index.d.ts

@@ -0,0 +1,77 @@
+import { type BaseAttrs, UiBase } from '../web-component-base';
+import { type Weeks } from '../calendar';
+export interface Attrs extends BaseAttrs {
+    /**
+     * The start time of the calendar display range.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     * @default Date.now()
+     */
+    'time-start'?: string | number;
+    /**
+     * The end time of the calendar display range.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     * @default 'time-start'
+     */
+    'time-end': string | number;
+    /**
+     * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
+     * 例如设置为 '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 {
+    change: {
+        oldStartTime: Date;
+        oldEndTime: Date;
+        newStartTime: Date;
+        newEndTime: Date;
+    };
+}
+/**
+ * 时间段选择器（两个日历）
+ *
+ * 存在一个 timeFormatter 方法，可以重写该方法以自定义时分秒毫秒的回显格式。
+ */
+export declare class Ele extends UiBase<Attrs, Emits> {
+    static readonly tagName: "dt-period-selector";
+    static get observedAttributes(): string[];
+    get timeStart(): number | string | Date;
+    set timeStart(val: number | string | Date);
+    get timeEnd(): number | string | Date;
+    set timeEnd(val: number | string | Date);
+    get weekStartAt(): Weeks;
+    set weekStartAt(val: Weeks);
+    protected _style: string;
+    protected _template: string;
+    constructor();
+    private get _startNavEle();
+    private get _endNavEle();
+    private get _startCalendar();
+    private get _endCalendar();
+    private get _startTimeSelector();
+    private get _endTimeSelector();
+    private get _startTimePopover();
+    private get _endTimePopover();
+    private _selectedDate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    private _updateNavCtrlBtn;
+    private _render;
+    private _updateDateEcho;
+    private _onCalendarSelect;
+    private _onCalendarItemHover;
+    private _onNavChange;
+    private _onNavOpenToggle;
+    private _onTimePopoverOpenChange;
+    private _onTimeSelectorDoneClick;
+    showCalendarDatePoint(): void;
+    timeFormatter: (time: Date) => string;
+    dateFormatter: (time: Date) => string;
+}