@gez/date-time-kit 2.0.0-alpha.3 → 2.0.0-alpha.5

package/dist/assets/index.d.ts

@@ -0,0 +1,9 @@
+export declare const svg2url: (svg: string) => string;
+export declare const svg2cssUrl: (svg: string) => string;
+export declare const arrowLeftSvg = "<svg class=\"bidirectional-flip\" width=\"16\" height=\"17\" fill=\"currentColor\"><path 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\"/></svg>";
+export declare const arrowRightSvg = "<svg class=\"bidirectional-flip\" width=\"17\" height=\"17\" fill=\"currentColor\"><path 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\"/></svg>";
+export declare const arrowLeftDoubleSvg = "<svg class=\"bidirectional-flip\" width=\"16\" height=\"17\" fill=\"currentColor\"><path 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\"/></svg>";
+export declare const arrowRightDoubleSvg = "<svg class=\"bidirectional-flip\" width=\"17\" height=\"17\" fill=\"currentColor\"><path 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\"/></svg>";
+export declare const arrowDownSvg = "<svg class=\"bidirectional-flip\" width=\"15\" height=\"15\" fill=\"currentColor\"><path 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\"/></svg>";
+export declare const backArrowSvg = "<svg class=\"bidirectional-flip\" width=\"24\" height=\"24\" fill=\"currentColor\"><path d=\"M9.894 5.106a.75.75 0 0 1 0 1.06L4.811 11.25 21 11.25a.75.75 0 0 1 0 1.5l-16.191-.001 5.085 5.085a.75.75 0 0 1-1.06 1.06L2.47 12.53a.75.75 0 0 1 0-1.06l6.364-6.364a.75.75 0 0 1 1.06 0Z\"/></svg>";
+export declare const timeSvg = "<svg width=\"14\" height=\"15\" fill=\"currentColor\"><path 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\"/></svg>";

package/dist/assets/index.mjs

@@ -0,0 +1,13 @@
+const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g;
+export const svg2url = (svg) => "data:image/svg+xml," + svg.replace(
+  "<svg",
+  ~svg.indexOf("xmlns") ? "<svg" : '<svg xmlns="http://www.w3.org/2000/svg"'
+).replace(/"/g, "'").replace(/>\s{1,}</g, "><").replace(/\s{2,}/g, " ").replace(symbols, encodeURIComponent);
+export const svg2cssUrl = (svg) => 'url("'.concat(svg2url(svg), '")');
+export const arrowLeftSvg = '<svg class="bidirectional-flip" width="16" height="17" fill="currentColor"><path 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"/></svg>';
+export const arrowRightSvg = '<svg class="bidirectional-flip" width="17" height="17" fill="currentColor"><path 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"/></svg>';
+export const arrowLeftDoubleSvg = '<svg class="bidirectional-flip" width="16" height="17" fill="currentColor"><path 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"/></svg>';
+export const arrowRightDoubleSvg = '<svg class="bidirectional-flip" width="17" height="17" fill="currentColor"><path 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"/></svg>';
+export const arrowDownSvg = '<svg class="bidirectional-flip" width="15" height="15" fill="currentColor"><path 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"/></svg>';
+export const backArrowSvg = '<svg class="bidirectional-flip" width="24" height="24" fill="currentColor"><path d="M9.894 5.106a.75.75 0 0 1 0 1.06L4.811 11.25 21 11.25a.75.75 0 0 1 0 1.5l-16.191-.001 5.085 5.085a.75.75 0 0 1-1.06 1.06L2.47 12.53a.75.75 0 0 1 0-1.06l6.364-6.364a.75.75 0 0 1 1.06 0Z"/></svg>';
+export const timeSvg = '<svg width="14" height="15" fill="currentColor"><path 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"/></svg>';

package/dist/components/calendar/index.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/dist/components/calendar/index.css.mjs

@@ -0,0 +1,11 @@
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a;
+import {
+  css,
+  cssDirLtrSelector1,
+  cssDirLtrSelector2,
+  cssDirLtrSelector3
+} from "../../utils.mjs";
+export default css(_a || (_a = __template(["\n:host {\n  --gap: var(--calendar-item-gap, 10px 0);\n  --item-size: var(--calendar-item-size, 30px);\n  --color-disabled-text: var(--calendar-item-disabled-text, #aaa);\n  --color-active-bg: var(--calendar-item-active-bg, #002BE7);\n  --color-active-text: var(--calendar-item-active-text, #fff);\n  --color-in-range-bg: var(--calendar-item-in-range-bg, #002BE726);\n  --color-in-range-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  --color-active-hover-bg: var(--calendar-item-active-hover-bg, var(--color-active-bg));\n  --color-active-hover-text: var(--calendar-item-active-hover-text, var(--color-active-text));\n}\n\n.wrapper {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: var(--gap);\n  width: 100%;\n  height: 100%;\n  justify-content: space-between;\n  text-align: center;\n}\n\n.week {\n  min-width: var(--item-size);\n  display: inline-block;\n}\n\n.item {\n  min-width: var(--item-size);\n  line-height: var(--item-size);\n  height: var(--item-size);\n  position: relative;\n  --half-period-bg-w: calc(50% + var(--item-size) / 2);\n}\n.item span {\n  position: relative;\n  z-index: 2;\n}\n.item:not(.disabled) {\n  cursor: pointer;\n}\n:host([show-other-month]) .item.prev.disabled, :host([show-other-month]) .item.next.disabled, .item.disabled:not(.prev, .next) {\n  cursor: not-allowed;\n  color: var(--color-disabled-text);\n}\n.item:hover {\n  color: var(--color-hover-text);\n}\n.item.in-range {\n  color: var(--color-in-range-text);\n}\n.item:not(.disabled) .highlight {\n  display: block;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: var(--item-size);\n  height: var(--item-size);\n  transform: translate(-50%, -50%);\n}\n.item.start, .item.end {\n  color: var(--color-active-text);\n}\n.item.start .highlight, .item.end .highlight {\n  background-color: var(--color-active-bg);\n}\n.item:hover .highlight {\n  background-color: var(--color-hover-bg);\n}\n.item.start:hover .highlight, .item.end:hover .highlight {\n  background-color: var(--color-active-hover-bg);\n}\n.item.start:hover, .item.end:hover {\n  color: var(--color-active-hover-text);\n}\n.item.in-range .bg {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 43, 231, 0.1490196078);\n}\n.item:nth-of-type(7n + 1) .bg {\n  border-radius: var(--item-size) 0 0 var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item:nth-of-type(7n) .bg {\n  border-radius: 0 var(--item-size) var(--item-size) 0;\n  width: var(--half-period-bg-w);\n}\n.item:nth-of-type(7n).range-start .bg {\n  width: var(--item-size);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-start .bg {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-end .bg {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n}\n.item.range-start.range-end .bg {\n  width: var(--item-size);\n}\n.item:nth-of-type(7n).range-start .bg, .item:nth-of-type(7n + 1).range-end .bg {\n  width: var(--item-size);\n}\n\n.item .bg", " { border-radius: 0; }\n.item .bg", " { border-radius: 0; }\n.item .bg", " { border-radius: 0; }\n.item.in-range .bg", " { left: auto; right: 0; }\n.item.in-range .bg", " { left: auto; right: 0; }\n.item.in-range .bg", " { left: auto; right: 0; }\n.item:nth-of-type(7n + 1) .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); border-radius: 0 var(--item-size) var(--item-size) 0; }\n.item:nth-of-type(7n + 1) .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); border-radius: 0 var(--item-size) var(--item-size) 0; }\n.item:nth-of-type(7n + 1) .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); border-radius: 0 var(--item-size) var(--item-size) 0; }\n.item:nth-of-type(7n) .bg", " { border-radius: var(--item-size) 0 0 var(--item-size); }\n.item:nth-of-type(7n) .bg", " { border-radius: var(--item-size) 0 0 var(--item-size); }\n.item:nth-of-type(7n) .bg", " { border-radius: var(--item-size) 0 0 var(--item-size); }\n.item:nth-of-type(7n).range-start .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); }\n.item:nth-of-type(7n).range-start .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); }\n.item:nth-of-type(7n).range-start .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); }\n.item.range-start .bg", " {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  left: auto;\n  right: calc(50% - var(--item-size) / 2);\n}\n.item.range-start .bg", " {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  left: auto;\n  right: calc(50% - var(--item-size) / 2);\n}\n.item.range-start .bg", " {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  left: auto;\n  right: calc(50% - var(--item-size) / 2);\n}\n.item.range-end .bg", " {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n}\n.item.range-end .bg", " {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n}\n.item.range-end .bg", " {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n}\n"])), cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3);

package/dist/components/calendar/index.d.ts

@@ -1,7 +1,6 @@
 import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
-export type Weeks = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
-export declare const weekKey: Weeks[];
-export declare const getWeekInOrder: (startAt?: Weeks | null) => Weeks[];
+import { type Weeks } from './weeks';
+export { type Weeks, weekKey, getWeekInOrder } from './weeks';
 export interface Attrs extends BaseAttrs {
     /**
      * The showing time, used to determine the month to show on calendar.

package/dist/components/calendar/index.html.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/dist/components/calendar/index.html.mjs

@@ -0,0 +1,13 @@
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a, _b, _c;
+import { html } from "../../utils.mjs";
+import { Ele as I18nEle } from "../i18n/index.mjs";
+I18nEle.define();
+import { weekKey } from "./weeks.mjs";
+export default html(_c || (_c = __template(['\n<div class="wrapper">', "</div>"])), weekKey.map(
+  (key) => html(_a || (_a = __template(['<dt-i18n class="week" i18n-key="date.', '" part="week"></dt-i18n>'])), key)
+).join("") + [...Array(7 * 6)].map(
+  (_, i) => html(_b || (_b = __template(['<div class="item" part="item"><i class="bg"></i><i class="highlight"></i><span>', "</span></div>"])), i % 31 + 1)
+).join(""));

package/dist/components/calendar/index.mjs

@@ -1,40 +1,19 @@
-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, _c, _d;
-import { closestByEvent, css, debounce, html } from "../../utils.mjs";
-import { Ele as I18nEle } from "../i18n/index.mjs";
-I18nEle.define();
+import { closestByEvent, debounce } from "../../utils.mjs";
 import {
   UiBase
 } from "../web-component-base/index.mjs";
-const styleStr = css(_a || (_a = __template(["\n:host {\n  --gap: var(--calendar-item-gap, 10px 0);\n  --item-size: var(--calendar-item-size, 30px);\n  --color-disabled-text: var(--calendar-item-disabled-text, #aaa);\n  --color-active-bg: var(--calendar-item-active-bg, #002BE7);\n  --color-active-text: var(--calendar-item-active-text, #fff);\n  --color-in-range-bg: var(--calendar-item-in-range-bg, #002BE726);\n  --color-in-range-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}\n\n.wrapper {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: var(--gap);\n  width: 100%;\n  height: 100%;\n  justify-content: space-between;\n  text-align: center;\n}\n\n.week {\n  min-width: var(--item-size);\n}\n\n.item {\n  min-width: var(--item-size);\n  line-height: var(--item-size);\n  height: var(--item-size);\n  position: relative;\n  --half-period-bg-w: calc(50% + var(--item-size) / 2);\n}\n.item span {\n  position: relative;\n  z-index: 2;\n}\n.item:not(.disabled) {\n  cursor: pointer;\n}\n:host([show-other-month]) .item.prev.disabled, :host([show-other-month]) .item.next.disabled, .item.disabled:not(.prev, .next) {\n  cursor: not-allowed;\n  color: var(--color-disabled-text);\n}\n.item:hover {\n  color: var(--color-hover-text);\n}\n.item.in-range {\n  color: var(--color-in-range-text);\n}\n.item:not(.disabled) .highlight {\n  display: block;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: var(--item-size);\n  height: var(--item-size);\n  transform: translate(-50%, -50%);\n}\n.item.start, .item.end {\n  color: var(--color-active-text);\n}\n.item.start .highlight, .item.end .highlight {\n  background-color: var(--color-active-bg);\n}\n.item:hover .highlight {\n  background-color: var(--color-hover-bg);\n}\n.item.in-range .bg {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 43, 231, 0.1490196078);\n}\n.item:nth-of-type(7n + 1) .bg {\n  border-radius: var(--item-size) 0 0 var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item:nth-of-type(7n) .bg {\n  border-radius: 0 var(--item-size) var(--item-size) 0;\n  width: var(--half-period-bg-w);\n}\n.item:nth-of-type(7n).range-start .bg {\n  width: var(--item-size);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-start .bg {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-end .bg {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n}\n.item.range-start.range-end .bg {\n  width: var(--item-size);\n}\n.item:nth-of-type(7n).range-start .bg, .item:nth-of-type(7n + 1).range-end .bg {\n  width: var(--item-size);\n}\n"])));
-export const weekKey = [
-  "sun",
-  "mon",
-  "tue",
-  "wed",
-  "thu",
-  "fri",
-  "sat"
-];
-export const getWeekInOrder = (startAt) => {
-  if (!startAt) startAt = "sun";
-  const index = weekKey.indexOf(startAt);
-  if (index === -1) return weekKey;
-  return [...weekKey.slice(index), ...weekKey.slice(0, index)];
-};
+import styleStr from "./index.css.mjs";
+import html from "./index.html.mjs";
+import { getWeekInOrder, weekKey } from "./weeks.mjs";
+export { weekKey, getWeekInOrder } from "./weeks.mjs";
 export class Ele extends UiBase {
   constructor() {
     super();
     __publicField(this, "_style", styleStr);
-    __publicField(this, "_template", html(_d || (_d = __template(['\n<div class="wrapper">', "</div>"])), weekKey.map(
-      (key) => html(_b || (_b = __template(['<dt-i18n class="week" i18n-key="date.', '" part="week"></dt-i18n>'])), key)
-    ).join("") + [...Array(7 * 6)].map(
-      (_, i) => html(_c || (_c = __template(['<div class="item" part="item"><i class="bg"></i><i class="highlight"></i><span>', "</span></div>"])), i % 31 + 1)
-    ).join("")));
+    __publicField(this, "_template", html);
     __publicField(this, "_onWeekStartAtChange", debounce(() => {
       if (!this.isConnected) return;
       const weekOrder = getWeekInOrder(this.weekStartAt);

package/dist/components/calendar/weeks.d.ts

@@ -0,0 +1,3 @@
+export type Weeks = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+export declare const weekKey: Weeks[];
+export declare const getWeekInOrder: (startAt?: Weeks | null) => Weeks[];

package/dist/components/calendar/weeks.mjs

@@ -0,0 +1,15 @@
+export const weekKey = [
+  "sun",
+  "mon",
+  "tue",
+  "wed",
+  "thu",
+  "fri",
+  "sat"
+];
+export const getWeekInOrder = (startAt) => {
+  if (!startAt) startAt = "sun";
+  const index = weekKey.indexOf(startAt);
+  if (index === -1) return weekKey;
+  return [...weekKey.slice(index), ...weekKey.slice(0, index)];
+};

package/dist/components/date-time-selector/index.d.ts

@@ -1,5 +1,8 @@
-import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
 import { type Weeks } from '../calendar';
+import { type Granularity as TimeGranularity } from '../hhmmss-ms-list-grp/selector';
+import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
+export declare const granularityList: readonly ["day", "hour", "minute", "second", "millisecond"];
+export type Granularity = (typeof granularityList)[number];
 export interface Attrs extends BaseAttrs {
     /**
      * Set which day of the week is the first day.
@@ -23,13 +26,19 @@ export interface Attrs extends BaseAttrs {
      * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
      * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
      */
-    'min-granularity'?: 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
+    'min-granularity'?: Granularity;
 }
 export interface Emits {
     'select-time': Date;
     'open-change': boolean;
 }
 export type EventMap = Emit2EventMap<Emits>;
+/**
+ * 日期时间选择器（单个时间点）
+ * 包括日历和时分秒毫秒选择。
+ *
+ * 存在一个 timeFormatter 方法，用于格式化时分秒毫秒显示时间。
+ */
 export declare class Ele extends UiBase<Attrs, Emits> {
     static readonly tagName: "dt-date-time-selector";
     static get observedAttributes(): string[];
@@ -46,7 +55,6 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     private get _navEle();
     private get _calendar();
     private get _timeSelector();
-    private get _timePopover();
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -54,8 +62,8 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     private _render;
     private _onCalendarSelect;
     private _onNavChange;
-    private _onTimePopoverOpenChange;
     private _onNavOpenToggle;
-    private _onTimeSelectorDoneClick;
-    timeFormatter: (time: Date, minGranularity: "day" | "hour" | "minute" | "second" | "millisecond") => string;
+    private _onTimeSelectorChange;
+    get timeFormatter(): (time: Date, minGranularity: TimeGranularity) => string;
+    set timeFormatter(fn: (time: Date, minGranularity: TimeGranularity) => string);
 }

package/dist/components/date-time-selector/index.html.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/dist/components/date-time-selector/index.html.mjs

@@ -0,0 +1,14 @@
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a;
+import { html } from "../../utils.mjs";
+import { Ele as PopoverEle } from "../popover/index.mjs";
+PopoverEle.define();
+import { Ele as YyyyMmNavEle } from "../yyyymm-nav/index.mjs";
+YyyyMmNavEle.define();
+import { Ele as CalendarBaseEle } from "../calendar/index.mjs";
+CalendarBaseEle.define();
+import { Ele as HhMmSsMsSelector } from "../hhmmss-ms-list-grp/selector.mjs";
+HhMmSsMsSelector.define();
+export default html(_a || (_a = __template(['\n<dt-popover part="popover">\n    <slot slot="trigger" name="trigger"><button>select date and time</button></slot>\n    <div slot="pop" class="wrapper" part="pop">\n        <dt-yyyymm-nav\n            show-ctrl-btn-month-add\n            show-ctrl-btn-month-sub\n        ></dt-yyyymm-nav>\n        <dt-calendar-base></dt-calendar-base>\n        <dt-hhmmss-ms-selector></dt-hhmmss-ms-selector>\n    </div>\n</dt-popover>\n'])));

package/dist/components/date-time-selector/index.mjs

@@ -1,56 +1,40 @@
-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;
-import { closestByEvent, debounce, html } from "../../utils.mjs";
+import { closestByEvent, debounce } from "../../utils.mjs";
+import {
+  weekKey
+} from "../calendar/index.mjs";
+import {
+  granularityList as timeGranularityList
+} from "../hhmmss-ms-list-grp/selector.mjs";
 import {
   UiBase
 } from "../web-component-base/index.mjs";
 import {
   Ele as YyyyMmNavEle
 } from "../yyyymm-nav/index.mjs";
+import html from "./index.html.mjs";
 import { styleStr } from "./styleStr.mjs";
-YyyyMmNavEle.define();
-import {
-  Ele as CalendarBaseEle,
-  weekKey
-} from "../calendar/index.mjs";
-CalendarBaseEle.define();
-import { Ele as HhMmSsMsListGrpEle } from "../hhmmss-ms-list-grp/index.mjs";
-HhMmSsMsListGrpEle.define();
-import { Ele as PopoverEle } from "../popover/index.mjs";
-PopoverEle.define();
-const granularityList = [
-  "day",
-  "hour",
-  "minute",
-  "second",
-  "millisecond"
-];
+export const granularityList = ["day", ...timeGranularityList];
 export class Ele extends UiBase {
   constructor() {
     super();
     __publicField(this, "_style", styleStr);
-    __publicField(this, "_template", html(_a || (_a = __template(['\n<dt-popover part="popover">\n    <slot slot="trigger" name="trigger"><button>select date and time</button></slot>\n    <div slot="pop" class="wrapper menu" part="pop">\n        <dt-yyyymm-nav\n            show-ctrl-btn-month-add\n            show-ctrl-btn-month-sub\n        ></dt-yyyymm-nav>\n        <dt-calendar-base></dt-calendar-base>\n        <dt-popover id="time-popover" part="popover time">\n            <div slot="trigger" class="time-echo-wrapper">\n                <i class="time-icon"></i>\n                <span class="time-echo">hh:mm:ss.sss</span>\n            </div>\n            <div slot="pop" class="time-selector">\n                <h3 class="title">Select Time</h3>\n                <dt-hhmmss-ms-list-grp></dt-hhmmss-ms-list-grp>\n                <button id="time-selector-done-btn">Done</button>\n            </div>\n        </dt-popover>\n    </div>\n</dt-popover>\n']))));
+    __publicField(this, "_template", html);
     __publicField(this, "_render", debounce(() => {
       if (!this.isConnected) return;
       const currentTime = this.currentTime;
       this._calendar.weekStartAt = this.weekStartAt;
-      const tz = (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3;
       this._navEle.millisecond = this._calendar.timeStart = this._calendar.timeEnd = +currentTime;
       this._calendar.showingTime = this.showingTime;
-      const selectorWrapper = this.shadowRoot.querySelector(".time-selector");
       if (this.minGranularity === "day") {
-        this._timeSelector.millisecond = 0;
-        selectorWrapper.style.display = "none";
+        this._timeSelector.style.display = "none";
         return;
       }
-      selectorWrapper.style.display = "";
+      this._timeSelector.style.display = "";
       this._timeSelector.minGranularity = this.minGranularity;
-      this._timeSelector.millisecond = (+currentTime - tz) % (24 * 60 * 60 * 1e3);
-      this.shadowRoot.querySelector(".wrapper .time-echo").textContent = this.timeFormatter(currentTime, this.minGranularity);
+      this._timeSelector.currentTime = currentTime;
     }, 0));
     __publicField(this, "_onCalendarSelect", (e) => {
       e.stopPropagation();
@@ -63,40 +47,14 @@ export class Ele extends UiBase {
       const { newTime } = e.detail;
       this._calendar.showingTime = +newTime;
     });
-    __publicField(this, "_onTimePopoverOpenChange", (e) => {
-      var _a2;
-      if (!(e.target instanceof PopoverEle)) return;
-      e.stopPropagation();
-      if (!e.detail) return this._render();
-      (_a2 = e.target.querySelector("dt-hhmmss-ms-list-grp")) == null ? void 0 : _a2.scrollToCurrentItem();
-    });
     __publicField(this, "_onNavOpenToggle", (e) => {
-      var _a2;
+      var _a;
       if (!(e.target instanceof YyyyMmNavEle)) return;
       e.stopPropagation();
-      (_a2 = e.target.nextElementSibling) == null ? void 0 : _a2.classList.toggle("hide", e.detail);
+      (_a = e.target.nextElementSibling) == null ? void 0 : _a.classList.toggle("hide", e.detail);
     });
-    __publicField(this, "_onTimeSelectorDoneClick", (e) => {
-      const btn = closestByEvent(e, "#time-selector-done-btn");
-      if (!btn) return;
-      const calcTime = (time, ms) => {
-        time.setHours(0, 0, 0, 0);
-        time.setMilliseconds(ms);
-        return time;
-      };
-      this.currentTime = calcTime(
-        this.currentTime,
-        this._timeSelector.millisecond
-      );
-      this._timePopover.open = false;
-    });
-    __publicField(this, "timeFormatter", (time, minGranularity) => {
-      const t = new Date(+time - (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3).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;
+    __publicField(this, "_onTimeSelectorChange", (e) => {
+      this.currentTime = e.detail;
     });
     this._applyTemplate();
   }
@@ -142,63 +100,53 @@ export class Ele extends UiBase {
     this.setAttribute("min-granularity", val);
   }
   get _navEle() {
-    var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("dt-yyyymm-nav");
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("dt-yyyymm-nav");
   }
   get _calendar() {
-    var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
       "dt-calendar-base"
     );
   }
   get _timeSelector() {
-    var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(
-      "dt-hhmmss-ms-list-grp"
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      "dt-hhmmss-ms-selector"
     );
   }
-  get _timePopover() {
-    var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("#time-popover");
-  }
   connectedCallback() {
-    var _a2;
     if (!super.connectedCallback()) return;
     this._calendar.formatter = (i) => 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
     );
-    (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelectorAll("#time-selector-done-btn").forEach((btn) => {
-      btn.addEventListener("click", this._onTimeSelectorDoneClick);
-    });
+    this._timeSelector.addEventListener(
+      "select-time",
+      this._onTimeSelectorChange
+    );
+    this._timeSelector.addEventListener("open-change", this._stopEvent);
   }
   disconnectedCallback() {
-    var _a2;
     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
     );
-    (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelectorAll("#time-selector-done-btn").forEach((btn) => {
-      btn.removeEventListener("click", this._onTimeSelectorDoneClick);
-    });
+    this._timeSelector.removeEventListener(
+      "select-time",
+      this._onTimeSelectorChange
+    );
+    this._timeSelector.removeEventListener("open-change", this._stopEvent);
   }
   _onAttrChanged(name, oldValue, newValue) {
     super._onAttrChanged(name, oldValue, newValue);
@@ -207,6 +155,13 @@ export class Ele extends UiBase {
       this.dispatchEvent("select-time", this.currentTime);
     }
   }
+  get timeFormatter() {
+    return this._timeSelector.timeFormatter;
+  }
+  set timeFormatter(fn) {
+    if (typeof fn !== "function") return;
+    this._timeSelector.timeFormatter = fn;
+  }
 }
 __publicField(Ele, "tagName", "dt-date-time-selector");
 Ele.define();

package/dist/components/date-time-selector/styleStr.mjs

@@ -3,4 +3,4 @@ var __defProp = Object.defineProperty;
 var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
 var _a;
 import { css } from "../../utils.mjs";
-export const styleStr = css(_a || (_a = __template(["\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\ndt-popover {\n  position: relative;\n}\n\n[open] > .time-echo-wrapper {\n  border-color: #18181B;\n}\n\n.time-echo-wrapper {\n  width: 100%;\n  padding: 4px;\n  display: flex;\n  gap: 5px;\n  border-radius: 4px;\n  min-height: 30px;\n  border: 1px solid #0001;\n  box-sizing: border-box;\n  align-items: center;\n  cursor: pointer;\n}\n\n.time-selector {\n  position: absolute;\n  width: 100%;\n  height: 461px;\n  box-sizing: border-box;\n  background-color: #fff;\n\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  padding: 15px;\n  border-radius: 6px;\n  border: 1px solid #eee;\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n\n  .title {\n    font-size: 16px;\n    margin: 0;\n    line-height: 1;\n  }\n}\n\ndt-hhmmss-ms-list-grp::part(list-container) {\n  gap: 2px;\n}\ndt-hhmmss-ms-list-grp::part(list) {\n  scroll-behavior: smooth;\n}\ndt-hhmmss-ms-list-grp::part(item) {\n  font-size: 14px;\n  line-height: 17px;\n}\n\n#time-selector-done-btn {\n  border: none;\n  min-height: 30px;\n  border-radius: 6px;\n  padding: 5px 10px;\n  font-size: 14px;\n  background-color: #18181B;\n  color: #fff;\n}\n\n.time-icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  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;\n}\n\n.time-echo {\n  font-size: 14px;\n  color: #999;\n  line-height: 1;\n}\n\n.menu {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 10px 5px;\n  font-size: 14px;\n  gap: 10px;\n  border-radius: 6px;\n  border: 1px solid #eee;\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n  background-color: #fff;\n  width: 285px;\n\n  & > * {\n    width: 100%;\n    box-sizing: border-box;\n  }\n}\n\ndt-calendar-base {\n  // 254 = item height 6 * 30 + week 14 + gap 10 * 6\n  height: 254px;\n\n  &::part(week) {\n    font-size: 12px;\n    line-height: 14px;\n  }\n\n  &::part(item) {\n    font-size: 14px;\n  }\n}\ndt-yyyymm-nav::part(list-grp) {\n  height: 254px;\n  margin-top: 10px;\n}\ndt-calendar-base.hide {\n  display: none;\n}\n"])));
+export const styleStr = css(_a || (_a = __template(["\n:host {\n  font-size: 14px;\n}\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;\n  position: fixed;\n  width: 285px;\n}\n.wrapper > * {\n  width: 100%;\n}\n\ndt-calendar-base {\n  // 254 = item height 6 * 30 + week 14 + gap 10 * 6\n  height: 254px;\n}\ndt-calendar-base::part(week) {\n  font-size: 12px;\n  line-height: 14px;\n}\ndt-calendar-base::part(item) {\n  font-size: 14px;\n}\ndt-calendar-base.hide {\n  display: none;\n}\n\ndt-yyyymm-nav::part(list-grp) {\n  height: 254px;\n  margin-top: 15px;\n}\n"])));

package/dist/components/hhmmss-ms-list-grp/base.d.ts

@@ -0,0 +1,51 @@
+import { type BaseAttrs, UiBase } from '../web-component-base';
+export declare const granularityList: readonly ["hour", "minute", "second", "millisecond"];
+export type Granularity = (typeof granularityList)[number];
+export declare const colOrderList: readonly ["hms", "hsm", "mhs", "msh", "shm", "smh"];
+export type ColOrder = (typeof colOrderList)[number];
+export interface Attrs extends BaseAttrs {
+    millisecond: number;
+    /**
+     * 选择器的粒度，表示最大可选的时间单位。默认为 hour。
+     * 例如设置为 'minute'，则表示最大只能选择到分钟，小时将被忽略。
+     */
+    'max-granularity'?: Granularity;
+    /**
+     * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
+     * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
+     */
+    'min-granularity'?: Granularity;
+    'col-order'?: ColOrder;
+}
+export interface BaseEmits {
+}
+/**
+ * 时分秒毫秒选择器
+ */
+export declare class BaseEle<A extends Attrs, E extends BaseEmits> extends UiBase<A, E> {
+    static get observedAttributes(): string[];
+    protected _style: string;
+    protected _template: string;
+    private get _listEleHour();
+    private get _listEleMinute();
+    private get _listEleSecond();
+    private get _msInputEle();
+    get millisecond(): number;
+    set millisecond(v: number);
+    get maxGranularity(): Granularity;
+    set maxGranularity(v: Granularity);
+    get minGranularity(): Granularity;
+    set minGranularity(v: Granularity);
+    get colOrder(): ColOrder;
+    set colOrder(v: ColOrder);
+    scrollToCurrentItem(): void;
+    connectedCallback(): boolean | void;
+    disconnectedCallback(): boolean | void;
+    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    private _renderCols;
+    private _updateGranularity;
+    private _updateColsValue;
+    private _getMsFromEle;
+    private _onMsInput;
+    private _onColsSelect;
+}