timered-counter 0.0.0

package/dist/src/transitions/roller/roller.js

@@ -0,0 +1,235 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { clone, isNumber, values } from 'remeda';
+import './roller-digit.js';
+import { rollerStyles } from './styles.js';
+import { mergePartDigitOption } from '../../utils/extract-group-option.js';
+class RollerAnimationEvent extends Event {
+}
+let TimeredCounterRoller = class TimeredCounterRoller extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.color = '';
+        this.direction = 'up';
+        this.parts = [];
+        this.partPreprocessDataList = [];
+        this.animationOptions = [];
+        this.keyframes = [];
+        this.cellStyles = [];
+        this.digitStyles = [];
+        this.partStyles = [];
+        this.parentContainerRect = {};
+        this.__mergedDigitStyles = [];
+        /**
+         * 记录一次更新中, 启动动画并结束的 <timered-counter-roller-digit> 元素个数.
+         *
+         * 在每次更新前重置为 0.
+         *
+         * @see {@link __handleDigitAnimationEnd}
+         * @private
+         */
+        this.digitAnimateEndCount = 0;
+        /**
+         * 记录一次更新中, 需要启动动画的 <timered-counter-roller-digit> 元素总数.
+         *
+         * 在每次更新前重新计算.
+         * @private
+         */
+        this.digitAnimatedCount = 0;
+    }
+    render() {
+        return html `
+      <span
+        class="roller__prefix"
+        data-part-id="-1"
+        data-digit-id="0"
+        style=${styleMap((this.__mergedDigitStyles[-1]?.[0] ?? {}))}
+      >
+        <slot part="prefix" name="prefix"></slot>
+      </span>
+      <span class="counter-parts">
+        ${repeat(this.parts, (_, index) => index, (part, partIndex) => html `<span class="roller-part"
+                >${repeat(part.digits, (_, index) => `${part.digits.length - index}`, (digitInfo, digitIndex) => html `<span
+                      class="roller-part__wrapper"
+                      data-part-id="${partIndex}"
+                      data-digit-id="${digitIndex}"
+                    >
+                      <timered-counter-roller-digit
+                        .digit=${digitInfo}
+                        .preprocessData=${this.partPreprocessDataList[partIndex][digitIndex]}
+                        .direction=${this.direction}
+                        .textStyle=${this.__mergedDigitStyles[partIndex][digitIndex]}
+                        .cellStyle=${this.cellStyles[partIndex][digitIndex]}
+                        .animationOptions=${this.animationOptions[partIndex][digitIndex]}
+                        .keyframes=${this.keyframes[partIndex][digitIndex]}
+                        @roller-digit-animation-end=${this
+            .__handleDigitAnimationEnd}
+                      ></timered-counter-roller-digit>
+                    </span>`)}</span
+              >
+              <span
+                class="roller-part__suffix"
+                data-part-id="${partIndex}"
+                data-digit-id="-1"
+                style=${styleMap((this.__mergedDigitStyles[partIndex][-1] ?? {}))}
+              >
+                <slot
+                  part="part-suffix"
+                  name=${`part-suffix-${partIndex}`}
+                ></slot>
+              </span>`)}
+      </span>
+      <span
+        class="roller__suffix"
+        data-part-id="-2"
+        data-digit-id="0"
+        style=${styleMap((this.__mergedDigitStyles[-2]?.[0] ?? {}))}
+      >
+        <slot part="suffix" name="suffix"></slot>
+      </span>
+    `;
+    }
+    willUpdate(_changedProperties) {
+        super.willUpdate(_changedProperties);
+        if (_changedProperties.has('direction') ||
+            _changedProperties.has('parts')) {
+            this.digitAnimateEndCount = 0;
+            this.digitAnimatedCount = this.partPreprocessDataList
+                .flat()
+                .filter(({ animate }) => animate).length;
+            if (this.digitAnimatedCount > 0) {
+                this.__emitAnimationStart();
+            }
+        }
+        /**
+         * 将 color 样式合并到 digitStyles 中.
+         */
+        this.__mergedDigitStyles = mergePartDigitOption(clone(this.digitStyles), this.__generatePartDigitsColorStyles());
+    }
+    __handleDigitAnimationEnd() {
+        this.digitAnimateEndCount++;
+        if (this.digitAnimateEndCount < this.digitAnimatedCount)
+            return;
+        this.__emitAnimationEnd();
+    }
+    __emitAnimationStart() {
+        if (!this.isConnected)
+            return;
+        this.dispatchEvent(new RollerAnimationEvent('roller-animation-start'));
+    }
+    __emitAnimationEnd() {
+        if (!this.isConnected)
+            return;
+        this.dispatchEvent(new RollerAnimationEvent('roller-animation-end'));
+    }
+    __generatePartDigitsColorStyles() {
+        const result = [];
+        const containerRect = this.parentContainerRect;
+        const { 
+        // parts,
+        // oldParts,
+        prefixContainer, suffixContainer, color, } = this;
+        const partDigitElements = Array.from(this.shadowRoot?.querySelectorAll('[data-part-id]').values() ?? []);
+        /**
+         * 当某次更新**将**会导致 DOM 宽高发生变化时(如: 滚动数字的位数增加/减少会导致宽度变化),
+         * 需要跳过这次更新然后等待 DOM 宽高变化完成才能更新(宽高变化后将通过 {@link containerRect} 触发).
+         */
+        if (!containerRect) {
+            return result;
+        }
+        /**
+         * 比较 {@link data} 前后不同判断是否导致 DOM 宽度会发生变化.
+         */
+        // if (parts.length !== oldParts.length) {
+        //   this.requestUpdate();
+        //   return result;
+        // }
+        // for (let i = 0; i < parts.length; i++) {
+        //   if (parts[i].digits.length !== oldParts[i].digits.length) {
+        //     this.requestUpdate();
+        //     return result;
+        //   }
+        // }
+        if (prefixContainer)
+            partDigitElements[-1] = prefixContainer;
+        if (suffixContainer)
+            partDigitElements[-2] = suffixContainer;
+        for (const el of values(partDigitElements)) {
+            const partId = Number.parseInt(el.dataset.partId ?? '-1', 10);
+            const digitId = Number.parseInt(el.dataset.digitId ?? '-1', 10);
+            if (!isNumber(partId) || !isNumber(digitId)) {
+                throw new Error('The data-part-id and data-digit-id attributes are required.');
+            }
+            if (!result[partId])
+                result[partId] = [];
+            if (CSS.supports('color', color)) {
+                result[partId][digitId] = { color };
+            }
+            else if (CSS.supports('background-image', color)) {
+                result[partId][digitId] = {
+                    backgroundImage: color,
+                    backgroundClip: 'text',
+                    backgroundSize: `${containerRect.width}px ${containerRect.height}px`,
+                    backgroundPositionX: `${-el.offsetLeft}px`,
+                    backgroundPositionY: `${-el.offsetTop}px`,
+                    backgroundRepeat: 'no-repeat',
+                    color: 'transparent',
+                    // @ts-ignore
+                    '-webkit-text-fill-color': 'transparent',
+                };
+            }
+            else {
+                result[partId][digitId] = {};
+                // todo error event
+                // eslint-disable-next-line no-console
+                console.warn(new Error('The color property is not supported.'));
+            }
+        }
+        return result;
+    }
+};
+TimeredCounterRoller.styles = [rollerStyles];
+__decorate([
+    property({ type: String })
+], TimeredCounterRoller.prototype, "color", void 0);
+__decorate([
+    property({ type: String })
+], TimeredCounterRoller.prototype, "direction", void 0);
+__decorate([
+    property({ type: Array })
+], TimeredCounterRoller.prototype, "parts", void 0);
+__decorate([
+    property({ type: Array })
+], TimeredCounterRoller.prototype, "partPreprocessDataList", void 0);
+__decorate([
+    property({ type: Array })
+], TimeredCounterRoller.prototype, "animationOptions", void 0);
+__decorate([
+    property({ type: Array })
+], TimeredCounterRoller.prototype, "keyframes", void 0);
+__decorate([
+    property({ type: Array })
+], TimeredCounterRoller.prototype, "cellStyles", void 0);
+__decorate([
+    property({ type: Array })
+], TimeredCounterRoller.prototype, "digitStyles", void 0);
+__decorate([
+    property({ type: Array })
+], TimeredCounterRoller.prototype, "partStyles", void 0);
+__decorate([
+    property({ type: Object })
+], TimeredCounterRoller.prototype, "parentContainerRect", void 0);
+__decorate([
+    query('.roller__prefix')
+], TimeredCounterRoller.prototype, "prefixContainer", void 0);
+__decorate([
+    query('.roller__suffix')
+], TimeredCounterRoller.prototype, "suffixContainer", void 0);
+TimeredCounterRoller = __decorate([
+    customElement('timered-counter-roller')
+], TimeredCounterRoller);
+export { TimeredCounterRoller };
+//# sourceMappingURL=roller.js.map

package/dist/src/transitions/roller/roller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roller.js","sourceRoot":"","sources":["../../../../src/transitions/roller/roller.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { clone, isNumber, values } from 'remeda';\nimport { PartData } from '../../types/group.js';\nimport { PartPreprocessedData } from '../../utils/preprocess-part-data.js';\nimport './roller-digit.js';\nimport { rollerStyles } from './styles.js';\nimport { mergePartDigitOption } from '../../utils/extract-group-option.js';\n\nclass RollerAnimationEvent extends Event {\n  // constructor(type: string, eventInitDict?: EventInit) {\n  //   super(type, eventInitDict);\n  // }\n}\n\n@customElement('timered-counter-roller')\nexport class TimeredCounterRoller extends LitElement {\n  static styles = [rollerStyles];\n\n  @property({ type: String })\n  color: string = '';\n\n  @property({ type: String })\n  direction: 'up' | 'down' = 'up';\n\n  @property({ type: Array })\n  parts: PartData[] = [];\n\n  @property({ type: Array })\n  partPreprocessDataList: PartPreprocessedData[][] = [];\n\n  @property({ type: Array })\n  animationOptions: KeyframeAnimationOptions[][] = [];\n\n  @property({ type: Array })\n  keyframes: PropertyIndexedKeyframes[][] = [];\n\n  @property({ type: Array })\n  cellStyles: Partial<CSSStyleDeclaration>[][][] = [];\n\n  @property({ type: Array })\n  digitStyles: Partial<CSSStyleDeclaration>[][] = [];\n\n  @property({ type: Array })\n  partStyles: Partial<CSSStyleDeclaration>[] = [];\n\n  @property({ type: Object })\n  parentContainerRect: DOMRect = {} as DOMRect;\n\n  @query('.roller__prefix')\n  prefixContainer: HTMLElement | undefined;\n\n  @query('.roller__suffix')\n  suffixContainer: HTMLElement | undefined;\n\n  private __mergedDigitStyles: Partial<CSSStyleDeclaration>[][] = [];\n\n  protected render() {\n    return html`\n      <span\n        class=\"roller__prefix\"\n        data-part-id=\"-1\"\n        data-digit-id=\"0\"\n        style=${styleMap(\n          (this.__mergedDigitStyles[-1]?.[0] ?? {}) as StyleInfo,\n        )}\n      >\n        <slot part=\"prefix\" name=\"prefix\"></slot>\n      </span>\n      <span class=\"counter-parts\">\n        ${repeat(\n          this.parts,\n          (_, index) => index,\n          (part, partIndex) =>\n            html`<span class=\"roller-part\"\n                >${repeat(\n                  part.digits,\n                  (_, index) => `${part.digits.length - index}`,\n                  (digitInfo, digitIndex) =>\n                    html`<span\n                      class=\"roller-part__wrapper\"\n                      data-part-id=\"${partIndex}\"\n                      data-digit-id=\"${digitIndex}\"\n                    >\n                      <timered-counter-roller-digit\n                        .digit=${digitInfo}\n                        .preprocessData=${this.partPreprocessDataList[\n                          partIndex\n                        ][digitIndex]}\n                        .direction=${this.direction}\n                        .textStyle=${this.__mergedDigitStyles[partIndex][\n                          digitIndex\n                        ]}\n                        .cellStyle=${this.cellStyles[partIndex][digitIndex]}\n                        .animationOptions=${this.animationOptions[partIndex][\n                          digitIndex\n                        ]}\n                        .keyframes=${this.keyframes[partIndex][digitIndex]}\n                        @roller-digit-animation-end=${this\n                          .__handleDigitAnimationEnd}\n                      ></timered-counter-roller-digit>\n                    </span>`,\n                )}</span\n              >\n              <span\n                class=\"roller-part__suffix\"\n                data-part-id=\"${partIndex}\"\n                data-digit-id=\"-1\"\n                style=${styleMap(\n                  (this.__mergedDigitStyles[partIndex][-1] ?? {}) as StyleInfo,\n                )}\n              >\n                <slot\n                  part=\"part-suffix\"\n                  name=${`part-suffix-${partIndex}`}\n                ></slot>\n              </span>`,\n        )}\n      </span>\n      <span\n        class=\"roller__suffix\"\n        data-part-id=\"-2\"\n        data-digit-id=\"0\"\n        style=${styleMap(\n          (this.__mergedDigitStyles[-2]?.[0] ?? {}) as StyleInfo,\n        )}\n      >\n        <slot part=\"suffix\" name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues) {\n    super.willUpdate(_changedProperties);\n\n    if (\n      _changedProperties.has('direction') ||\n      _changedProperties.has('parts')\n    ) {\n      this.digitAnimateEndCount = 0;\n      this.digitAnimatedCount = this.partPreprocessDataList\n        .flat()\n        .filter(({ animate }) => animate).length;\n\n      if (this.digitAnimatedCount > 0) {\n        this.__emitAnimationStart();\n      }\n    }\n\n    /**\n     * 将 color 样式合并到 digitStyles 中.\n     */\n    this.__mergedDigitStyles = mergePartDigitOption(\n      clone(this.digitStyles),\n      this.__generatePartDigitsColorStyles(),\n    );\n  }\n\n  /**\n   * 记录一次更新中, 启动动画并结束的 <timered-counter-roller-digit> 元素个数.\n   *\n   * 在每次更新前重置为 0.\n   *\n   * @see {@link __handleDigitAnimationEnd}\n   * @private\n   */\n  private digitAnimateEndCount = 0;\n\n  /**\n   * 记录一次更新中, 需要启动动画的 <timered-counter-roller-digit> 元素总数.\n   *\n   * 在每次更新前重新计算.\n   * @private\n   */\n  private digitAnimatedCount = 0;\n\n  private __handleDigitAnimationEnd() {\n    this.digitAnimateEndCount++;\n\n    if (this.digitAnimateEndCount < this.digitAnimatedCount) return;\n\n    this.__emitAnimationEnd();\n  }\n\n  private __emitAnimationStart() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(new RollerAnimationEvent('roller-animation-start'));\n  }\n\n  private __emitAnimationEnd() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(new RollerAnimationEvent('roller-animation-end'));\n  }\n\n  private __generatePartDigitsColorStyles() {\n    const result: Partial<CSSStyleDeclaration>[][] = [];\n\n    const containerRect = this.parentContainerRect;\n    const {\n      // parts,\n      // oldParts,\n      prefixContainer,\n      suffixContainer,\n      color,\n    } = this;\n    const partDigitElements = Array.from(\n      this.shadowRoot?.querySelectorAll('[data-part-id]').values() ?? [],\n    ) as HTMLElement[];\n\n    /**\n     * 当某次更新**将**会导致 DOM 宽高发生变化时(如: 滚动数字的位数增加/减少会导致宽度变化),\n     * 需要跳过这次更新然后等待 DOM 宽高变化完成才能更新(宽高变化后将通过 {@link containerRect} 触发).\n     */\n    if (!containerRect) {\n      return result;\n    }\n    /**\n     * 比较 {@link data} 前后不同判断是否导致 DOM 宽度会发生变化.\n     */\n    // if (parts.length !== oldParts.length) {\n    //   this.requestUpdate();\n    //   return result;\n    // }\n    // for (let i = 0; i < parts.length; i++) {\n    //   if (parts[i].digits.length !== oldParts[i].digits.length) {\n    //     this.requestUpdate();\n    //     return result;\n    //   }\n    // }\n\n    if (prefixContainer) partDigitElements[-1] = prefixContainer;\n    if (suffixContainer) partDigitElements[-2] = suffixContainer;\n\n    for (const el of values(partDigitElements)) {\n      const partId = Number.parseInt(el.dataset.partId ?? '-1', 10);\n      const digitId = Number.parseInt(el.dataset.digitId ?? '-1', 10);\n      if (!isNumber(partId) || !isNumber(digitId)) {\n        throw new Error(\n          'The data-part-id and data-digit-id attributes are required.',\n        );\n      }\n\n      if (!result[partId]) result[partId] = [];\n\n      if (CSS.supports('color', color)) {\n        result[partId][digitId] = { color };\n      } else if (CSS.supports('background-image', color)) {\n        result[partId][digitId] = {\n          backgroundImage: color,\n          backgroundClip: 'text',\n          backgroundSize: `${containerRect.width}px ${containerRect.height}px`,\n          backgroundPositionX: `${-el.offsetLeft}px`,\n          backgroundPositionY: `${-el.offsetTop}px`,\n          backgroundRepeat: 'no-repeat',\n          color: 'transparent',\n          // @ts-ignore\n          '-webkit-text-fill-color': 'transparent',\n        };\n      } else {\n        result[partId][digitId] = {};\n        // todo error event\n        // eslint-disable-next-line no-console\n        console.warn(new Error('The color property is not supported.'));\n      }\n    }\n\n    return result;\n  }\n}\n"]}

package/dist/src/transitions/roller/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const rollerStyles: import("lit").CSSResult;
+export declare const rollerDigitStyles: import("lit").CSSResult;

package/dist/src/transitions/roller/styles.js

@@ -0,0 +1,77 @@
+import { css } from 'lit';
+export const rollerStyles = css `
+  .counter-parts {
+    display: inline-flex;
+    flex: 1 1 auto;
+  }
+
+  .roller-part {
+    white-space: nowrap;
+  }
+
+  .roller__prefix,
+  .roller__suffix {
+    flex: none;
+  }
+
+  .roller-part .roller-part__wrapper {
+    display: inline-block;
+  }
+
+  .roller-part .roller-part__suffix {
+    //display: inline-block;
+  }
+`;
+export const rollerDigitStyles = css `
+  .roller-part-digit {
+    position: relative;
+    display: inline-block;
+  }
+
+  .placeholder {
+    visibility: hidden;
+    display: inline-block;
+  }
+
+  .roll-list {
+    position: absolute;
+    left: 0;
+    display: inline-flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .roll-list.roll-list__up {
+    top: 0;
+  }
+
+  .roll-list.roll-list__down {
+    bottom: 0;
+  }
+
+  .roll-list__shadow {
+    visibility: hidden;
+    position: absolute;
+    z-index: -10;
+    display: inline-flex;
+    flex-direction: column;
+    white-space: nowrap;
+  }
+
+  .roll-item {
+    display: inline-block;
+    width: 100%;
+  }
+
+  .roll-item.roll-item__head {
+    position: absolute;
+    top: 100%;
+  }
+
+  .roll-item.roll-item__tail {
+    position: absolute;
+    bottom: 100%;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/src/transitions/roller/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/transitions/roller/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsB9B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDnC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const rollerStyles = css`\n  .counter-parts {\n    display: inline-flex;\n    flex: 1 1 auto;\n  }\n\n  .roller-part {\n    white-space: nowrap;\n  }\n\n  .roller__prefix,\n  .roller__suffix {\n    flex: none;\n  }\n\n  .roller-part .roller-part__wrapper {\n    display: inline-block;\n  }\n\n  .roller-part .roller-part__suffix {\n    //display: inline-block;\n  }\n`;\n\nexport const rollerDigitStyles = css`\n  .roller-part-digit {\n    position: relative;\n    display: inline-block;\n  }\n\n  .placeholder {\n    visibility: hidden;\n    display: inline-block;\n  }\n\n  .roll-list {\n    position: absolute;\n    left: 0;\n    display: inline-flex;\n    width: 100%;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .roll-list.roll-list__up {\n    top: 0;\n  }\n\n  .roll-list.roll-list__down {\n    bottom: 0;\n  }\n\n  .roll-list__shadow {\n    visibility: hidden;\n    position: absolute;\n    z-index: -10;\n    display: inline-flex;\n    flex-direction: column;\n    white-space: nowrap;\n  }\n\n  .roll-item {\n    display: inline-block;\n    width: 100%;\n  }\n\n  .roll-item.roll-item__head {\n    position: absolute;\n    top: 100%;\n  }\n\n  .roll-item.roll-item__tail {\n    position: absolute;\n    bottom: 100%;\n  }\n`;\n"]}

package/dist/src/types/duration.d.ts

@@ -0,0 +1,33 @@
+export declare enum DurationPartType {
+    Millisecond = "millisecond",
+    Second = "second",
+    Minute = "minute",
+    Hour = "hour",
+    Day = "day",
+    Week = "weekOfYear",
+    Month = "month",
+    Quarter = "quarter",
+    Year = "year"
+}
+export declare const DurationPartMillisecond: {
+    readonly millisecond: 1;
+    readonly second: 1000;
+    readonly minute: 60000;
+    readonly hour: 3600000;
+    readonly day: 86400000;
+    readonly weekOfYear: 604800000;
+    readonly month: 2629800000;
+    readonly quarter: 7889400000;
+    readonly year: 31557600000;
+};
+export declare const DurationPartMillisecondToType: {
+    readonly 1: DurationPartType.Millisecond;
+    readonly 1000: DurationPartType.Second;
+    readonly 60000: DurationPartType.Minute;
+    readonly 3600000: DurationPartType.Hour;
+    readonly 86400000: DurationPartType.Day;
+    readonly 604800000: DurationPartType.Week;
+    readonly 2629800000: DurationPartType.Month;
+    readonly 7889400000: DurationPartType.Quarter;
+    readonly 31557600000: DurationPartType.Year;
+};

package/dist/src/types/duration.js

@@ -0,0 +1,35 @@
+export var DurationPartType;
+(function (DurationPartType) {
+    DurationPartType["Millisecond"] = "millisecond";
+    DurationPartType["Second"] = "second";
+    DurationPartType["Minute"] = "minute";
+    DurationPartType["Hour"] = "hour";
+    DurationPartType["Day"] = "day";
+    DurationPartType["Week"] = "weekOfYear";
+    DurationPartType["Month"] = "month";
+    DurationPartType["Quarter"] = "quarter";
+    DurationPartType["Year"] = "year";
+})(DurationPartType || (DurationPartType = {}));
+export const DurationPartMillisecond = {
+    [DurationPartType.Millisecond]: 1,
+    [DurationPartType.Second]: 1000,
+    [DurationPartType.Minute]: 60000,
+    [DurationPartType.Hour]: 3600000,
+    [DurationPartType.Day]: 86400000,
+    [DurationPartType.Week]: 604800000,
+    [DurationPartType.Month]: 2629800000,
+    [DurationPartType.Quarter]: 7889400000,
+    [DurationPartType.Year]: 31557600000,
+};
+export const DurationPartMillisecondToType = {
+    1: DurationPartType.Millisecond,
+    1000: DurationPartType.Second,
+    60000: DurationPartType.Minute,
+    3600000: DurationPartType.Hour,
+    86400000: DurationPartType.Day,
+    604800000: DurationPartType.Week,
+    2629800000: DurationPartType.Month,
+    7889400000: DurationPartType.Quarter,
+    31557600000: DurationPartType.Year,
+};
+//# sourceMappingURL=duration.js.map

package/dist/src/types/duration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"duration.js","sourceRoot":"","sources":["../../../src/types/duration.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,gBAUX;AAVD,WAAY,gBAAgB;IAC1B,+CAA2B,CAAA;IAC3B,qCAAiB,CAAA;IACjB,qCAAiB,CAAA;IACjB,iCAAa,CAAA;IACb,+BAAW,CAAA;IACX,uCAAmB,CAAA;IACnB,mCAAe,CAAA;IACf,uCAAmB,CAAA;IACnB,iCAAa,CAAA;AACf,CAAC,EAVW,gBAAgB,KAAhB,gBAAgB,QAU3B;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC;IACjC,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,IAAI;IAC/B,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,KAAK;IAChC,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO;IAChC,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,QAAQ;IAChC,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,SAAS;IAClC,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,UAAU;IACpC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,UAAU;IACtC,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,WAAW;CAC5B,CAAC;AAEX,MAAM,CAAC,MAAM,6BAA6B,GAAG;IAC3C,CAAC,EAAE,gBAAgB,CAAC,WAAW;IAC/B,IAAI,EAAE,gBAAgB,CAAC,MAAM;IAC7B,KAAK,EAAE,gBAAgB,CAAC,MAAM;IAC9B,OAAO,EAAE,gBAAgB,CAAC,IAAI;IAC9B,QAAQ,EAAE,gBAAgB,CAAC,GAAG;IAC9B,SAAS,EAAE,gBAAgB,CAAC,IAAI;IAChC,UAAU,EAAE,gBAAgB,CAAC,KAAK;IAClC,UAAU,EAAE,gBAAgB,CAAC,OAAO;IACpC,WAAW,EAAE,gBAAgB,CAAC,IAAI;CAC1B,CAAC","sourcesContent":["export enum DurationPartType {\n  Millisecond = 'millisecond',\n  Second = 'second',\n  Minute = 'minute',\n  Hour = 'hour',\n  Day = 'day',\n  Week = 'weekOfYear',\n  Month = 'month',\n  Quarter = 'quarter',\n  Year = 'year',\n}\n\nexport const DurationPartMillisecond = {\n  [DurationPartType.Millisecond]: 1,\n  [DurationPartType.Second]: 1000,\n  [DurationPartType.Minute]: 60000,\n  [DurationPartType.Hour]: 3600000,\n  [DurationPartType.Day]: 86400000,\n  [DurationPartType.Week]: 604800000,\n  [DurationPartType.Month]: 2629800000,\n  [DurationPartType.Quarter]: 7889400000,\n  [DurationPartType.Year]: 31557600000,\n} as const;\n\nexport const DurationPartMillisecondToType = {\n  1: DurationPartType.Millisecond,\n  1000: DurationPartType.Second,\n  60000: DurationPartType.Minute,\n  3600000: DurationPartType.Hour,\n  86400000: DurationPartType.Day,\n  604800000: DurationPartType.Week,\n  2629800000: DurationPartType.Month,\n  7889400000: DurationPartType.Quarter,\n  31557600000: DurationPartType.Year,\n} as const;\n"]}

package/dist/src/types/group.d.ts

@@ -0,0 +1,67 @@
+import { PartPreprocessedData } from '../utils/preprocess-part-data.js';
+export interface PartDataDigit {
+    data: string[];
+    /**
+     * 这是数字的第几位
+     * @example 1024 -> 4 是第 1 位, 2 是第 2 位, 0 是第 3 位, 1 是第 4 位
+     */
+    place: number;
+}
+export interface PartData {
+    /**
+     * 每个数字数位用于过渡动画的数据.
+     * @example 1 -> 10
+     * [
+     *   ["0", "1"], // 第一个数位
+     *   ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"], // 第二个数位
+     * ]
+     */
+    digits: PartDataDigit[];
+    /**
+     * 运动方向的头部数字. 向下运动时该值为数组的最后一个元素. 向上运动时该值为数组的第一个元素.
+     * @deprecated
+     */
+    headNumber?: number;
+    /**
+     * 运动方向的尾部数字.
+     @deprecated
+     */
+    tailNumber?: number;
+}
+/**
+ * 1. T: 单个数值. 为所有 part 下的 digit 使用 T.
+ * 2. T[]: 数组数值. 为第 `i` 个 part 下的所有 digit 使用 `T[i]` 值.
+ * 3. T[][]: 二维数组数值. 为第 `i` 个 part 下的第 `j` 个 digit 使用 `T[i][j]` 值.
+ * 4. (data: PartData[]) => T | T[] | T[][]: 同上
+ */
+export type GroupValue<T> = T | undefined;
+export interface GroupGetterOptions {
+    /**
+     * 用于生成滚动列表的数据.
+     */
+    data: PartData[];
+    /**
+     * 滚动方向.
+     */
+    direction: 'up' | 'down';
+    /**
+     * 导致这次滚动发生的值. [新值, 旧值].
+     */
+    value: [unknown, unknown];
+    preprocessData: PartPreprocessedData[][];
+}
+export type GroupGetter<T> = (options: GroupGetterOptions) => GroupValue<T>;
+export type GroupValueOrGetter<T> = GroupValue<T> | GroupGetter<T>;
+export type PartValue<T> = GroupValue<T> | GroupValue<T[]>;
+export type PartGetter<T> = GroupGetter<T> | GroupGetter<T[]>;
+export type PartValueOrGetter<T> = PartValue<T> | PartGetter<T>;
+export type PartDigitValue<T> = PartValue<T> | PartValue<T[]>;
+export type PartDigitGetter<T> = PartGetter<T> | PartGetter<T[]>;
+export type PartDigitValueOrGetter<T> = PartDigitValue<T> | PartDigitGetter<T>;
+export type PartDigitCellValue<T> = PartValue<T> | PartValue<T[]>;
+export type PartDigitCellGetter<T> = PartGetter<T> | PartGetter<T[]>;
+export type PartDigitCellValueOrGetter<T> = PartDigitCellValue<T> | PartDigitCellGetter<T>;
+export type ExtractGroupValue<T> = T extends GroupValueOrGetter<infer U> ? U extends Array<infer V> ? V : U : never;
+export type ExtractPartValue<T> = T extends PartValueOrGetter<infer U> ? U extends Array<infer V> ? ExtractGroupValue<V> : U : never;
+export type ExtractPartDigitValue<T> = T extends PartDigitValueOrGetter<infer U> ? U extends Array<infer V> ? ExtractPartValue<V> : U : never;
+export type ExtractPartDigitCellValue<T> = T extends PartDigitCellValueOrGetter<infer U> ? U extends Array<infer V> ? ExtractPartDigitValue<V> : U : never;

package/dist/src/types/group.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=group.js.map

package/dist/src/types/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/types/group.ts"],"names":[],"mappings":"","sourcesContent":["import { PartPreprocessedData } from '../utils/preprocess-part-data.js';\n\nexport interface PartDataDigit {\n  data: string[];\n  /**\n   * 这是数字的第几位\n   * @example 1024 -> 4 是第 1 位, 2 是第 2 位, 0 是第 3 位, 1 是第 4 位\n   */\n  place: number;\n}\n\nexport interface PartData {\n  /**\n   * 每个数字数位用于过渡动画的数据.\n   * @example 1 -> 10\n   * [\n   *   [\"0\", \"1\"], // 第一个数位\n   *   [\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\"], // 第二个数位\n   * ]\n   */\n  digits: PartDataDigit[];\n  /**\n   * 运动方向的头部数字. 向下运动时该值为数组的最后一个元素. 向上运动时该值为数组的第一个元素.\n   * @deprecated\n   */\n  headNumber?: number;\n  /**\n   * 运动方向的尾部数字.\n   @deprecated\n   */\n  tailNumber?: number;\n}\n\n/**\n * 1. T: 单个数值. 为所有 part 下的 digit 使用 T.\n * 2. T[]: 数组数值. 为第 `i` 个 part 下的所有 digit 使用 `T[i]` 值.\n * 3. T[][]: 二维数组数值. 为第 `i` 个 part 下的第 `j` 个 digit 使用 `T[i][j]` 值.\n * 4. (data: PartData[]) => T | T[] | T[][]: 同上\n */\nexport type GroupValue<T> = T | undefined;\nexport interface GroupGetterOptions {\n  /**\n   * 用于生成滚动列表的数据.\n   */\n  data: PartData[];\n  /**\n   * 滚动方向.\n   */\n  direction: 'up' | 'down';\n  /**\n   * 导致这次滚动发生的值. [新值, 旧值].\n   */\n  value: [unknown, unknown];\n  preprocessData: PartPreprocessedData[][];\n}\nexport type GroupGetter<T> = (options: GroupGetterOptions) => GroupValue<T>;\nexport type GroupValueOrGetter<T> = GroupValue<T> | GroupGetter<T>;\n\nexport type PartValue<T> = GroupValue<T> | GroupValue<T[]>;\nexport type PartGetter<T> = GroupGetter<T> | GroupGetter<T[]>;\nexport type PartValueOrGetter<T> = PartValue<T> | PartGetter<T>;\n\nexport type PartDigitValue<T> = PartValue<T> | PartValue<T[]>;\nexport type PartDigitGetter<T> = PartGetter<T> | PartGetter<T[]>;\nexport type PartDigitValueOrGetter<T> = PartDigitValue<T> | PartDigitGetter<T>;\n\nexport type PartDigitCellValue<T> = PartValue<T> | PartValue<T[]>;\nexport type PartDigitCellGetter<T> = PartGetter<T> | PartGetter<T[]>;\nexport type PartDigitCellValueOrGetter<T> =\n  | PartDigitCellValue<T>\n  | PartDigitCellGetter<T>;\n\nexport type ExtractGroupValue<T> =\n  T extends GroupValueOrGetter<infer U>\n    ? U extends Array<infer V>\n      ? V\n      : U\n    : never;\n\nexport type ExtractPartValue<T> =\n  T extends PartValueOrGetter<infer U>\n    ? U extends Array<infer V>\n      ? ExtractGroupValue<V>\n      : U\n    : never;\n\nexport type ExtractPartDigitValue<T> =\n  T extends PartDigitValueOrGetter<infer U>\n    ? U extends Array<infer V>\n      ? ExtractPartValue<V>\n      : U\n    : never;\n\nexport type ExtractPartDigitCellValue<T> =\n  T extends PartDigitCellValueOrGetter<infer U>\n    ? U extends Array<infer V>\n      ? ExtractPartDigitValue<V>\n      : U\n    : never;\n"]}

package/dist/src/utils/any-base.d.ts

@@ -0,0 +1,6 @@
+import type { StringAdapter } from '../string-adapter/index.js';
+export declare function anyBase(sa: StringAdapter, srcAlphabet: string, dstAlphabet: string): (number: string) => string;
+export declare const BIN = "01";
+export declare const OCT = "01234567";
+export declare const DEC = "0123456789";
+export declare const HEX = "0123456789abcdef";

package/dist/src/utils/any-base.js

@@ -0,0 +1,56 @@
+/**
+ * @license https://github.com/HarasimowiczKamil/any-base
+ */
+import { isDeepEqual } from 'remeda';
+function isValid(number, alphabet) {
+    for (const char of number) {
+        if (alphabet.indexOf(char) === -1) {
+            return false;
+        }
+    }
+    return true;
+}
+function convert(srcAlphabet, dstAlphabet, number) {
+    let i;
+    let divide;
+    let newLen;
+    let { length } = number;
+    const numberMap = {};
+    const fromBase = srcAlphabet.length;
+    const toBase = dstAlphabet.length;
+    const result = [];
+    if (!isValid(number, srcAlphabet)) {
+        throw new Error(`Number "${number}" contains of non-alphabetic digits (${srcAlphabet})`);
+    }
+    if (isDeepEqual(srcAlphabet, dstAlphabet)) {
+        return number.join('');
+    }
+    for (i = 0; i < length; i++) {
+        numberMap[i] = srcAlphabet.indexOf(number[i]);
+    }
+    do {
+        divide = 0;
+        newLen = 0;
+        for (i = 0; i < length; i++) {
+            divide = divide * fromBase + numberMap[i];
+            if (divide >= toBase) {
+                numberMap[newLen++] = Math.floor(divide / toBase);
+                divide %= toBase;
+            }
+            else if (newLen > 0) {
+                numberMap[newLen++] = 0;
+            }
+        }
+        length = newLen;
+        result.push(dstAlphabet[divide]);
+    } while (newLen !== 0);
+    return result.reverse().join('');
+}
+export function anyBase(sa, srcAlphabet, dstAlphabet) {
+    return (number) => convert(sa.stringToChars(srcAlphabet), sa.stringToChars(dstAlphabet), sa.stringToChars(number));
+}
+export const BIN = '01';
+export const OCT = '01234567';
+export const DEC = '0123456789';
+export const HEX = '0123456789abcdef';
+//# sourceMappingURL=any-base.js.map

package/dist/src/utils/any-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"any-base.js","sourceRoot":"","sources":["../../../src/utils/any-base.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAGrC,SAAS,OAAO,CAAC,MAAgB,EAAE,QAAkB;IACnD,KAAK,MAAM,IAAI,IAAI,MAAM,EAAE,CAAC;QAC1B,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;YAClC,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,OAAO,CACd,WAAqB,EACrB,WAAqB,EACrB,MAAgB;IAEhB,IAAI,CAAC,CAAC;IACN,IAAI,MAAM,CAAC;IACX,IAAI,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IACxB,MAAM,SAAS,GAA2B,EAAE,CAAC;IAC7C,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC;IACpC,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;IAClC,MAAM,MAAM,GAAG,EAAE,CAAC;IAElB,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,CAAC;QAClC,MAAM,IAAI,KAAK,CACb,WAAW,MAAM,wCAAwC,WAAW,GAAG,CACxE,CAAC;IACJ,CAAC;IAED,IAAI,WAAW,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC;QAC1C,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACzB,CAAC;IAED,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5B,SAAS,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD,CAAC;IACD,GAAG,CAAC;QACF,MAAM,GAAG,CAAC,CAAC;QACX,MAAM,GAAG,CAAC,CAAC;QACX,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;YAC1C,IAAI,MAAM,IAAI,MAAM,EAAE,CAAC;gBACrB,SAAS,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;gBAClD,MAAM,IAAI,MAAM,CAAC;YACnB,CAAC;iBAAM,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;gBACtB,SAAS,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;QACD,MAAM,GAAG,MAAM,CAAC;QAChB,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IACnC,CAAC,QAAQ,MAAM,KAAK,CAAC,EAAE;IAEvB,OAAO,MAAM,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,OAAO,CACrB,EAAiB,EACjB,WAAmB,EACnB,WAAmB;IAEnB,OAAO,CAAC,MAAc,EAAE,EAAE,CACxB,OAAO,CACL,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,EAC7B,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,EAC7B,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CACzB,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC;AACxB,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAAC;AAC9B,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAChC,MAAM,CAAC,MAAM,GAAG,GAAG,kBAAkB,CAAC","sourcesContent":["/**\n * @license https://github.com/HarasimowiczKamil/any-base\n */\nimport { isDeepEqual } from 'remeda';\nimport type { StringAdapter } from '../string-adapter/index.js';\n\nfunction isValid(number: string[], alphabet: string[]) {\n  for (const char of number) {\n    if (alphabet.indexOf(char) === -1) {\n      return false;\n    }\n  }\n  return true;\n}\n\nfunction convert(\n  srcAlphabet: string[],\n  dstAlphabet: string[],\n  number: string[],\n) {\n  let i;\n  let divide;\n  let newLen;\n  let { length } = number;\n  const numberMap: Record<string, number> = {};\n  const fromBase = srcAlphabet.length;\n  const toBase = dstAlphabet.length;\n  const result = [];\n\n  if (!isValid(number, srcAlphabet)) {\n    throw new Error(\n      `Number \"${number}\" contains of non-alphabetic digits (${srcAlphabet})`,\n    );\n  }\n\n  if (isDeepEqual(srcAlphabet, dstAlphabet)) {\n    return number.join('');\n  }\n\n  for (i = 0; i < length; i++) {\n    numberMap[i] = srcAlphabet.indexOf(number[i]);\n  }\n  do {\n    divide = 0;\n    newLen = 0;\n    for (i = 0; i < length; i++) {\n      divide = divide * fromBase + numberMap[i];\n      if (divide >= toBase) {\n        numberMap[newLen++] = Math.floor(divide / toBase);\n        divide %= toBase;\n      } else if (newLen > 0) {\n        numberMap[newLen++] = 0;\n      }\n    }\n    length = newLen;\n    result.push(dstAlphabet[divide]);\n  } while (newLen !== 0);\n\n  return result.reverse().join('');\n}\n\nexport function anyBase(\n  sa: StringAdapter,\n  srcAlphabet: string,\n  dstAlphabet: string,\n) {\n  return (number: string) =>\n    convert(\n      sa.stringToChars(srcAlphabet),\n      sa.stringToChars(dstAlphabet),\n      sa.stringToChars(number),\n    );\n}\n\nexport const BIN = '01';\nexport const OCT = '01234567';\nexport const DEC = '0123456789';\nexport const HEX = '0123456789abcdef';\n"]}

package/dist/src/utils/duration.d.ts

@@ -0,0 +1,15 @@
+import { DurationPartType } from '../types/duration.js';
+/**
+ * 计算两个日期之间的时间间隔. 返回一个数组, 包含 {@link parts} 每个部分的值.
+ *
+ * @example duration(new Date("2022-01-01"), new Date("2022-01-02"), [DurationPartType.Day, DurationPartType.Hour, DurationPartType.Minute, DurationPartType.Second]) // [1, 0, 0, 0]
+ * @example duration(new Date("2022-01-01 12:00:00"), new Date("2022-01-02 12:30:00"), [DurationPartType.Day, DurationPartType.Hour, DurationPartType.Minute, DurationPartType.Second]) // [1, 0, 30, 0]
+ *
+ * @param start
+ * @param end
+ * @param parts
+ */
+export declare function durationObject(start: Date, end: Date, parts: DurationPartType[]): {
+    [key in DurationPartType]?: number;
+};
+export declare function duration(start: Date, end: Date, parts: DurationPartType[]): number[];