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

package/dist/components/period-selector/date-nav.css

@@ -0,0 +1,92 @@
+.wrapper {
+  display: block;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+.wrapper.show-list .btns {
+  display: none;
+}
+
+.btns {
+  display: flex;
+  align-items: center;
+}
+
+.btn {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+  background: 50%/16px 16px no-repeat;
+  --icon-arrow-left: url("@/assets/arrow-left.svg");
+  --icon-arrow-left-double: url("@/assets/arrow-left-double.svg");
+  --icon-arrow-right: url("@/assets/arrow-right.svg");
+  --icon-arrow-right-double: url("@/assets/arrow-right-double.svg");
+  background-image: var(--bg-img);
+  border-radius: 50%;
+}
+.btn:hover {
+  background-color: #eee;
+}
+:host(:not([show-ctrl-btn-year-add])) .btn.add.year, :host(:not([show-ctrl-btn-year-sub])) .btn.sub.year, :host(:not([show-ctrl-btn-month-add])) .btn.add.month, :host(:not([show-ctrl-btn-month-sub])) .btn.sub.month {
+  display: none;
+}
+.btn.sub {
+  --bg-img: var(--icon-arrow-left);
+}
+:host([show-ctrl-btn-month-add]) .btn.sub.add.year, :host([show-ctrl-btn-month-sub]) .btn.sub.sub.year {
+  --bg-img: var(--icon-arrow-left-double);
+}
+.btn.add {
+  --bg-img: var(--icon-arrow-right);
+}
+:host([show-ctrl-btn-month-add]) .btn.add.add.year, :host([show-ctrl-btn-month-sub]) .btn.add.sub.year {
+  --bg-img: var(--icon-arrow-right-double);
+}
+
+dt-yyyymmdd-list-grp {
+  width: 100%;
+}
+dt-yyyymmdd-list-grp::part(list) {
+  scroll-behavior: smooth;
+}
+dt-yyyymmdd-list-grp::part(col label) {
+  display: none;
+}
+
+dt-popover {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.title-wrapper {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  cursor: pointer;
+  margin: 10px 0;
+  min-height: 25px;
+  padding: 0 10px;
+  border-radius: 2px;
+  user-select: none;
+}
+.title-wrapper:hover {
+  background-color: #eee;
+}
+
+.title-arrow {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url("@/assets/arrow-down.svg") no-repeat center center;
+}
+
+dt-popover[open] .title-arrow {
+  transform: rotate(180deg);
+}

package/dist/components/period-selector/date-nav.d.ts

@@ -0,0 +1,64 @@
+import { type BaseAttrs, type Emit2EventMap, UiBase } from '../../components/web-component-base';
+export interface Attrs extends BaseAttrs {
+    millisecond: number;
+    /**
+     * 选择器的粒度，表示最大可选的时间单位。默认为 year。
+     */
+    'max-granularity'?: 'year' | 'month';
+    /**
+     * 选择器的粒度，表示最小可选的时间单位。默认为 month。
+     */
+    'min-granularity'?: 'year' | 'month';
+    /**
+     * 是否显示年份控制按钮（快速增减年份）
+     * @default false
+     */
+    'show-ctrl-btn-year-add'?: boolean;
+    'show-ctrl-btn-year-sub'?: boolean;
+    /**
+     * 是否显示月份控制按钮（快速增减月份）
+     * @default false
+     */
+    'show-ctrl-btn-month-add'?: boolean;
+    'show-ctrl-btn-month-sub'?: boolean;
+}
+export interface Emits {
+    change: {
+        oldStartTime: Date;
+        oldEndTime: Date;
+        newStartTime: Date;
+        newEndTime: Date;
+    };
+    'popover-open-change': boolean;
+}
+export type EventMap = Emit2EventMap<Emits>;
+/**
+ * 日期导航组件
+ *
+ * 存在一个 titleFormatter 方法，可以重写该方法以自定义年月标题的回显格式。
+ */
+export declare class Ele extends UiBase<Attrs, Emits> {
+    static readonly tagName: "dt-date-nav";
+    static get observedAttributes(): string[];
+    protected _style: string;
+    protected _template: string;
+    get millisecond(): number;
+    set millisecond(v: number);
+    get showCtrlBtnYearAdd(): boolean;
+    set showCtrlBtnYearAdd(val: boolean);
+    get showCtrlBtnYearSub(): boolean;
+    set showCtrlBtnYearSub(val: boolean);
+    get showCtrlBtnMonthAdd(): boolean;
+    set showCtrlBtnMonthAdd(val: boolean);
+    get showCtrlBtnMonthSub(): boolean;
+    set showCtrlBtnMonthSub(val: boolean);
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    private _render;
+    private _onTitleToggle;
+    private _onItemSelect;
+    private _onBtnClick;
+    titleFormatter: (ms: number) => string;
+}

package/dist/components/period-selector/date-nav.mjs

@@ -0,0 +1,161 @@
+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 {
+  UiBase
+} from "../../components/web-component-base/index.mjs";
+import { css, debounce, html } from "../../utils.mjs";
+const styleStr = css(_a || (_a = __template(["\n.wrapper {\n  display: block;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: space-between;\n  overflow: hidden;\n}\n.wrapper.show-list .btns {\n  display: none;\n}\n\n.btns {\n  display: flex;\n  align-items: center;\n}\n\n.btn {\n  width: 25px;\n  height: 25px;\n  cursor: pointer;\n  background: 50%/16px 16px no-repeat;\n  --icon-arrow-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='currentColor'%3E%3Cpath d='M11.687 1.703a.5.5 0 0 0-.707 0L4.852 7.83a.505.505 0 0 0-.045.05.5.5 0 0 0-.051.752l6.128 6.128a.5.5 0 0 0 .707-.707L5.817 8.28l5.87-5.87a.5.5 0 0 0 0-.707Z'/%3E%3C/svg%3E\");\n  --icon-arrow-left-double: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='currentColor'%3E%3Cpath d='M9.037 1.98a.5.5 0 1 1 .707.707l-5.87 5.87 5.774 5.774a.5.5 0 1 1-.707.707L2.813 8.911a.5.5 0 0 1 .051-.752.505.505 0 0 1 .045-.051L9.037 1.98ZM13.037 1.98a.5.5 0 0 1 .707.707l-5.87 5.87 5.774 5.774a.5.5 0 1 1-.707.707L6.813 8.911a.5.5 0 0 1 .051-.752.505.505 0 0 1 .045-.051l6.128-6.128Z'/%3E%3C/svg%3E\");\n  --icon-arrow-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='currentColor'%3E%3Cpath d='M5.256 1.703a.5.5 0 0 1 .707 0l6.128 6.128a.493.493 0 0 1 .045.05.5.5 0 0 1 .051.752l-6.128 6.128a.5.5 0 0 1-.707-.707l5.774-5.774-5.87-5.87a.5.5 0 0 1 0-.707Z'/%3E%3C/svg%3E\");\n  --icon-arrow-right-double: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='currentColor'%3E%3Cpath d='M7.963 1.703a.5.5 0 0 0-.707.707l5.87 5.87-5.774 5.774a.5.5 0 0 0 .707.707l6.128-6.128a.5.5 0 0 0-.051-.751.493.493 0 0 0-.045-.051L7.963 1.703ZM3.963 1.703a.5.5 0 0 0-.707.707l5.87 5.87-5.774 5.774a.5.5 0 0 0 .707.707l6.128-6.128a.5.5 0 0 0-.051-.751.493.493 0 0 0-.045-.051L3.963 1.703Z'/%3E%3C/svg%3E\");\n  background-image: var(--bg-img);\n  border-radius: 50%;\n}\n.btn:hover {\n  background-color: #eee;\n}\n:host(:not([show-ctrl-btn-year-add])) .btn.add.year, :host(:not([show-ctrl-btn-year-sub])) .btn.sub.year, :host(:not([show-ctrl-btn-month-add])) .btn.add.month, :host(:not([show-ctrl-btn-month-sub])) .btn.sub.month {\n  display: none;\n}\n.btn.sub {\n  --bg-img: var(--icon-arrow-left);\n}\n:host([show-ctrl-btn-month-add]) .btn.sub.add.year, :host([show-ctrl-btn-month-sub]) .btn.sub.sub.year {\n  --bg-img: var(--icon-arrow-left-double);\n}\n.btn.add {\n  --bg-img: var(--icon-arrow-right);\n}\n:host([show-ctrl-btn-month-add]) .btn.add.add.year, :host([show-ctrl-btn-month-sub]) .btn.add.sub.year {\n  --bg-img: var(--icon-arrow-right-double);\n}\n\ndt-yyyymmdd-list-grp {\n  width: 100%;\n}\ndt-yyyymmdd-list-grp::part(list) {\n  scroll-behavior: smooth;\n}\ndt-yyyymmdd-list-grp::part(col label) {\n  display: none;\n}\n\ndt-popover {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.title-wrapper {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  cursor: pointer;\n  margin: 10px 0;\n  min-height: 25px;\n  padding: 0 10px;\n  border-radius: 2px;\n  user-select: none;\n}\n.title-wrapper:hover {\n  background-color: #eee;\n}\n\n.title-arrow {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='currentColor'%3E%3Cpath d='m8.02 10.54 3.96-4.4a.583.583 0 0 0-.433-.973h-7.88a.583.583 0 0 0-.434.973l3.94 4.378c.216.24.585.26.824.044l.022-.021Z'/%3E%3C/svg%3E\") no-repeat center center;\n}\n\ndt-popover[open] .title-arrow {\n  transform: rotate(180deg);\n}\n"])));
+import { Ele as PopoverEle } from "../popover/index.mjs";
+PopoverEle.define();
+import {
+  Ele as YyyyMmDdListGrpEle
+} from "../yyyymmdd-list-grp/index.mjs";
+YyyyMmDdListGrpEle.define();
+export class Ele extends UiBase {
+  constructor() {
+    super();
+    __publicField(this, "_style", styleStr);
+    __publicField(this, "_template", html(_b || (_b = __template(['\n<div class="wrapper">\n    <div class="btns sub">\n        <i class="btn sub year"></i>\n        <i class="btn sub month"></i>\n    </div>\n    <dt-popover class="echo">\n        <div slot="trigger" class="title-wrapper">\n            <span class="title">title</span>\n            <i class="title-arrow"></i>\n        </div>\n        <dt-yyyymmdd-list-grp slot="pop" min-granularity="month" part="list-grp"></dt-yyyymmdd-list-grp>\n    </dt-popover>\n    <div class="btns add">\n        <i class="btn add month"></i>\n        <i class="btn add year"></i>\n    </div>\n</div>\n']))));
+    __publicField(this, "_render", debounce(() => {
+      const root = this.shadowRoot;
+      const ms = this.millisecond;
+      root.querySelector(
+        "dt-yyyymmdd-list-grp"
+      ).millisecond = ms;
+      root.querySelector(".title").textContent = this.titleFormatter(ms);
+    }, 0));
+    __publicField(this, "_onTitleToggle", ({
+      detail: isOpen
+    }) => {
+      this.shadowRoot.querySelector(".wrapper").classList.toggle(
+        "show-list",
+        isOpen
+      );
+      this.shadowRoot.querySelector(
+        "dt-yyyymmdd-list-grp"
+      ).scrollToCurrentItem();
+      this.dispatchEvent("popover-open-change", isOpen, true);
+    });
+    __publicField(this, "_onItemSelect", (e) => {
+      if (!(e.target instanceof YyyyMmDdListGrpEle)) return;
+      this.millisecond = e.target.millisecond;
+    });
+    __publicField(this, "_onBtnClick", (e) => {
+      if (!(e.target instanceof HTMLElement)) return;
+      const date = new Date(this.millisecond);
+      date.setDate(1);
+      if (e.target.matches(".add.year")) {
+        date.setFullYear(date.getFullYear() + 1);
+      } else if (e.target.matches(".sub.year")) {
+        date.setFullYear(date.getFullYear() - 1);
+      } else if (e.target.matches(".add.month")) {
+        date.setMonth(date.getMonth() + 1);
+      } else if (e.target.matches(".sub.month")) {
+        date.setMonth(date.getMonth() - 1);
+      }
+      this.millisecond = +date;
+    });
+    __publicField(this, "titleFormatter", (ms) => {
+      const date = new Date(ms);
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      return "".concat(("0" + month).slice(-2), "/").concat(year);
+    });
+    this._applyTemplate();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "millisecond",
+      "max-granularity",
+      "min-granularity",
+      "show-ctrl-btn-month-add",
+      "show-ctrl-btn-year-sub",
+      "show-ctrl-btn-month-add",
+      "show-ctrl-btn-month-sub"
+    ];
+  }
+  get millisecond() {
+    return Math.floor(+this._getAttr("millisecond", "0"));
+  }
+  set millisecond(v) {
+    if (!Number.isSafeInteger(v)) return;
+    this.setAttribute("millisecond", "" + Math.floor(v));
+  }
+  get showCtrlBtnYearAdd() {
+    return this.hasAttribute("show-ctrl-btn-year-add");
+  }
+  set showCtrlBtnYearAdd(val) {
+    this.toggleAttribute("show-ctrl-btn-year-add", val);
+  }
+  get showCtrlBtnYearSub() {
+    return this.hasAttribute("show-ctrl-btn-year-sub");
+  }
+  set showCtrlBtnYearSub(val) {
+    this.toggleAttribute("show-ctrl-btn-year-sub", val);
+  }
+  get showCtrlBtnMonthAdd() {
+    return this.hasAttribute("show-ctrl-btn-month-add");
+  }
+  set showCtrlBtnMonthAdd(val) {
+    this.toggleAttribute("show-ctrl-btn-month-add", val);
+  }
+  get showCtrlBtnMonthSub() {
+    return this.hasAttribute("show-ctrl-btn-month-sub");
+  }
+  set showCtrlBtnMonthSub(val) {
+    this.toggleAttribute("show-ctrl-btn-month-sub", val);
+  }
+  connectedCallback() {
+    if (!super.connectedCallback()) return;
+    this._render();
+    this.shadowRoot.querySelector(".echo").addEventListener(
+      "open-change",
+      this._onTitleToggle
+    );
+    this.shadowRoot.querySelector(
+      "dt-yyyymmdd-list-grp"
+    ).addEventListener("change", this._onItemSelect);
+    this.shadowRoot.querySelectorAll(".btn").forEach(
+      (btn) => {
+        btn.addEventListener("click", this._onBtnClick);
+      }
+    );
+  }
+  disconnectedCallback() {
+    if (!super.disconnectedCallback()) return;
+    this.shadowRoot.querySelector(
+      ".echo"
+    ).removeEventListener("open-change", this._onTitleToggle);
+    this.shadowRoot.querySelector(
+      "dt-yyyymmdd-list-grp"
+    ).removeEventListener("change", this._onItemSelect);
+    this.shadowRoot.querySelectorAll(".btn").forEach(
+      (btn) => {
+        btn.removeEventListener("click", this._onBtnClick);
+      }
+    );
+  }
+  _onAttrChanged(name, oldValue, newValue) {
+    super._onAttrChanged(name, oldValue, newValue);
+    this._render();
+    if (name === "millisecond") {
+      this.dispatchEvent(
+        "change",
+        {
+          oldStartTime: /* @__PURE__ */ new Date(+oldValue),
+          oldEndTime: /* @__PURE__ */ new Date(+oldValue),
+          newStartTime: /* @__PURE__ */ new Date(+newValue),
+          newEndTime: /* @__PURE__ */ new Date(+newValue)
+        },
+        true
+      );
+    }
+  }
+}
+__publicField(Ele, "tagName", "dt-date-nav");
+Ele.define();

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

@@ -0,0 +1,152 @@
+: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-date-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;
+}
+
+.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,68 @@
+import { type BaseAttrs, UiBase } from '../web-component-base';
+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';
+}
+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);
+    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;
+}