timered-counter 0.0.0

package/dist/src/timered-counter.js

@@ -0,0 +1,80 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { CounterStylesMixin } from './mixins/counter-styles.js';
+import { CounterPartsMixin } from './mixins/counter-parts.js';
+import { CounterBaseMixin } from './mixins/counter-base.js';
+import { timeredCounterStyles } from './styles/timered-counter-styles.js';
+import { CounterAnimationMixin } from './mixins/counter-animation.js';
+import './transitions/roller/index.js';
+import { CounterAiraMixin } from './mixins/counter-aira.js';
+class TimeredCounterAnimationEvent extends Event {
+}
+let TimeredCounter = class TimeredCounter extends CounterAiraMixin(CounterAnimationMixin(CounterStylesMixin(CounterPartsMixin(CounterBaseMixin(LitElement))))) {
+    constructor() {
+        super();
+        this.resizeObserver = new ResizeObserver(() => {
+            this.partsContainerRect = this.partsContainer
+                ? this.partsContainer.getBoundingClientRect()
+                : new DOMRect();
+        });
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        if (this.partsContainer) {
+            this.resizeObserver.observe(this.partsContainer);
+        }
+    }
+    render() {
+        const cellStyles = this.extractCellStyles();
+        const digitStyles = this.extractDigitStyles();
+        const partStyles = this.extractPartStyles();
+        const animationOptions = this.extractAnimationOptions();
+        const keyframes = this.extractKeyframes();
+        return html `
+      <timered-counter-roller
+        exportparts="prefix, suffix, part-suffix"
+        class="timered-counter"
+        aria-hidden="true"
+        color=${this.color}
+        .parentContainerRect=${this.partsContainerRect}
+        .parts=${this.parts}
+        .partPreprocessDataList=${this.partPreprocessDataList}
+        .animationOptions=${animationOptions}
+        .keyframes=${keyframes}
+        .cellStyles=${cellStyles}
+        .digitStyles=${digitStyles}
+        .partStyles=${partStyles}
+        .direction=${this.direction}
+        @roller-animation-start=${this.dispatchTimeredCounterAnimationStart}
+        @roller-animation-end=${this.dispatchTimeredCounterAnimationEnd}
+      >
+        <slot name="prefix" slot="prefix"></slot>
+        <slot name="suffix" slot="suffix"></slot>
+        ${repeat(this.parts, (_, index) => index, (_, partIndex) => html `<slot
+              name=${`part-suffix-${partIndex}`}
+              slot=${`part-suffix-${partIndex}`}
+            ></slot>`)}
+      </timered-counter-roller>
+    `;
+    }
+    dispatchTimeredCounterAnimationStart() {
+        this.dispatchEvent(new TimeredCounterAnimationEvent('timered-counter-animation-start'));
+    }
+    dispatchTimeredCounterAnimationEnd() {
+        this.dispatchEvent(new TimeredCounterAnimationEvent('timered-counter-animation-end'));
+    }
+};
+TimeredCounter.styles = [timeredCounterStyles];
+__decorate([
+    state()
+], TimeredCounter.prototype, "partsContainerRect", void 0);
+__decorate([
+    query('timered-counter-roller')
+], TimeredCounter.prototype, "partsContainer", void 0);
+TimeredCounter = __decorate([
+    customElement('timered-counter')
+], TimeredCounter);
+export { TimeredCounter };
+//# sourceMappingURL=timered-counter.js.map

package/dist/src/timered-counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timered-counter.js","sourceRoot":"","sources":["../../src/timered-counter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,+BAA+B,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,4BAA6B,SAAQ,KAAK;CAI/C;AAGM,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,gBAAgB,CAClD,qBAAqB,CACnB,kBAAkB,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,CACpE,CACF;IAWC;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC5C,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,cAAc;gBAC3C,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,qBAAqB,EAAE;gBAC7C,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAES,YAAY,CAAC,kBAAkC;QACvD,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QAEvC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC5C,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC9C,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAE5C,MAAM,gBAAgB,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACxD,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAE1C,OAAO,IAAI,CAAA;;;;;gBAKC,IAAI,CAAC,KAAK;+BACK,IAAI,CAAC,kBAAkB;iBACrC,IAAI,CAAC,KAAK;kCACO,IAAI,CAAC,sBAAsB;4BACjC,gBAAgB;qBACvB,SAAS;sBACR,UAAU;uBACT,WAAW;sBACZ,UAAU;qBACX,IAAI,CAAC,SAAS;kCACD,IAAI,CAAC,oCAAoC;gCAC3C,IAAI,CAAC,kCAAkC;;;;UAI7D,MAAM,CACN,IAAI,CAAC,KAAK,EACV,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACnB,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CACf,IAAI,CAAA;qBACK,eAAe,SAAS,EAAE;qBAC1B,eAAe,SAAS,EAAE;qBAC1B,CACZ;;KAEJ,CAAC;IACJ,CAAC;IAED,oCAAoC;QAClC,IAAI,CAAC,aAAa,CAChB,IAAI,4BAA4B,CAAC,iCAAiC,CAAC,CACpE,CAAC;IACJ,CAAC;IAED,kCAAkC;QAChC,IAAI,CAAC,aAAa,CAChB,IAAI,4BAA4B,CAAC,+BAA+B,CAAC,CAClE,CAAC;IACJ,CAAC;;AA/EM,qBAAM,GAAG,CAAC,oBAAoB,CAAC,AAAzB,CAA0B;AAKvC;IADC,KAAK,EAAE;0DACgC;AAGxC;IADC,KAAK,CAAC,wBAAwB,CAAC;sDACQ;AAb7B,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAqF1B","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { CounterStylesMixin } from './mixins/counter-styles.js';\nimport { CounterPartsMixin } from './mixins/counter-parts.js';\nimport { CounterBaseMixin } from './mixins/counter-base.js';\nimport { timeredCounterStyles } from './styles/timered-counter-styles.js';\nimport { CounterAnimationMixin } from './mixins/counter-animation.js';\nimport './transitions/roller/index.js';\nimport { CounterAiraMixin } from './mixins/counter-aira.js';\n\nclass TimeredCounterAnimationEvent extends Event {\n  // constructor(type: string, eventInitDict?: EventInit) {\n  //   super(type, eventInitDict);\n  // }\n}\n\n@customElement('timered-counter')\nexport class TimeredCounter extends CounterAiraMixin(\n  CounterAnimationMixin(\n    CounterStylesMixin(CounterPartsMixin(CounterBaseMixin(LitElement))),\n  ),\n) {\n  static styles = [timeredCounterStyles];\n\n  resizeObserver: ResizeObserver;\n\n  @state()\n  partsContainerRect: DOMRect | undefined;\n\n  @query('timered-counter-roller')\n  partsContainer: HTMLElement | undefined;\n\n  constructor() {\n    super();\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.partsContainerRect = this.partsContainer\n        ? this.partsContainer.getBoundingClientRect()\n        : new DOMRect();\n    });\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues) {\n    super.firstUpdated(_changedProperties);\n\n    if (this.partsContainer) {\n      this.resizeObserver.observe(this.partsContainer);\n    }\n  }\n\n  render() {\n    const cellStyles = this.extractCellStyles();\n    const digitStyles = this.extractDigitStyles();\n    const partStyles = this.extractPartStyles();\n\n    const animationOptions = this.extractAnimationOptions();\n    const keyframes = this.extractKeyframes();\n\n    return html`\n      <timered-counter-roller\n        exportparts=\"prefix, suffix, part-suffix\"\n        class=\"timered-counter\"\n        aria-hidden=\"true\"\n        color=${this.color}\n        .parentContainerRect=${this.partsContainerRect}\n        .parts=${this.parts}\n        .partPreprocessDataList=${this.partPreprocessDataList}\n        .animationOptions=${animationOptions}\n        .keyframes=${keyframes}\n        .cellStyles=${cellStyles}\n        .digitStyles=${digitStyles}\n        .partStyles=${partStyles}\n        .direction=${this.direction}\n        @roller-animation-start=${this.dispatchTimeredCounterAnimationStart}\n        @roller-animation-end=${this.dispatchTimeredCounterAnimationEnd}\n      >\n        <slot name=\"prefix\" slot=\"prefix\"></slot>\n        <slot name=\"suffix\" slot=\"suffix\"></slot>\n        ${repeat(\n          this.parts,\n          (_, index) => index,\n          (_, partIndex) =>\n            html`<slot\n              name=${`part-suffix-${partIndex}`}\n              slot=${`part-suffix-${partIndex}`}\n            ></slot>`,\n        )}\n      </timered-counter-roller>\n    `;\n  }\n\n  dispatchTimeredCounterAnimationStart() {\n    this.dispatchEvent(\n      new TimeredCounterAnimationEvent('timered-counter-animation-start'),\n    );\n  }\n\n  dispatchTimeredCounterAnimationEnd() {\n    this.dispatchEvent(\n      new TimeredCounterAnimationEvent('timered-counter-animation-end'),\n    );\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+export { TimeredCounterRoller } from './roller.js';

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

@@ -0,0 +1,2 @@
+export { TimeredCounterRoller } from './roller.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/transitions/roller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { TimeredCounterRoller } from './roller.js';\n"]}

package/dist/src/transitions/roller/roller-digit.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, PropertyValues } from 'lit';
+import { PartPreprocessedData } from '../../utils/preprocess-part-data.js';
+import { PartDataDigit } from '../../types/group.js';
+export declare class TimeredCounterRollerDigit extends LitElement {
+    static styles: import("lit").CSSResult[];
+    digit: PartDataDigit;
+    preprocessData: PartPreprocessedData;
+    direction: 'up' | 'down';
+    textStyle: Partial<CSSStyleDeclaration>;
+    cellStyle: Partial<CSSStyleDeclaration>[];
+    animationOptions: KeyframeAnimationOptions;
+    keyframes: PropertyIndexedKeyframes;
+    clonedRollDigitList: HTMLElement | undefined;
+    rollList: HTMLElement | undefined;
+    digitWidth: number;
+    resizeObserver: ResizeObserver;
+    animation: Animation | undefined;
+    constructor();
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    protected updated(_changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    shouldAnimate(): boolean;
+    startAnimation(): Promise<void>;
+    clearAnimation(): void;
+    private __emitAnimationStart;
+    private __emitAnimationEnd;
+}

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

@@ -0,0 +1,259 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { intersection, isEmpty, isNullish, isString, merge, omit, range, } from 'remeda';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { rollerDigitStyles } from './styles.js';
+import * as EasingFunctions from '../../easing/index.js';
+class RollerDigitAnimationEvent extends Event {
+}
+let TimeredCounterRollerDigit = class TimeredCounterRollerDigit extends LitElement {
+    constructor() {
+        super();
+        this.digit = { data: [], place: 0 };
+        this.preprocessData = {
+            animate: true,
+            cancelPrevAnimation: false,
+            earlyReturn: '',
+            index: 0,
+            partIndex: 0,
+            digitIndex: 0,
+        };
+        this.direction = 'up';
+        this.textStyle = {};
+        this.cellStyle = [];
+        this.animationOptions = {};
+        this.keyframes = {};
+        this.digitWidth = 0;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.digitWidth = (this.clonedRollDigitList
+                ? this.clonedRollDigitList.getBoundingClientRect()
+                : new DOMRect()).width;
+        });
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        if (this.clonedRollDigitList) {
+            this.resizeObserver.observe(this.clonedRollDigitList);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver.disconnect();
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        /**
+         * 仅当影响滚动列表 dom 结构的属性发生变化时才会触发动画.
+         */
+        if (intersection(Array.from(_changedProperties.keys()), [
+            'digit',
+            'preprocessData',
+            'direction',
+            'animationOptions',
+            'keyframes',
+        ]).length > 0) {
+            if (this.shouldAnimate()) {
+                this.startAnimation().then();
+            }
+        }
+    }
+    render() {
+        const shadowCellStyle = this.cellStyle.map(style => omit(style, ['position']));
+        return html `
+      <span class="roller-part-digit">
+        <!--    占位      -->
+        <span
+          class="placeholder"
+          style=${styleMap({ width: `${Math.round(this.digitWidth)}px` })}
+        >
+          0
+        </span>
+        <!--  一个不可见的滚动列表的复制, 用于计算该列表的最大宽度.  -->
+        <span class="roll-list__shadow">
+          ${repeat(this.digit.data, (_, index) => index, (digit, index) => html `
+              <span style=${styleMap(shadowCellStyle[index])}>
+                ${digit}
+              </span>
+            `)}
+        </span>
+        <span
+          class=${classMap({
+            /**
+             * 向上(up)滚动时, 使滚动列表顶部对齐以便于应用 `translationY(-100%)` 实现向上滚动效果
+             * 向下同理
+             */
+            'roll-list__up': this.direction === 'up',
+            'roll-list__down': this.direction === 'down',
+            'roll-list': true,
+        })}
+        >
+          ${this.digit.data.length > 1
+            ? repeat(this.digit.data, (_, index) => index, (digit, index) => {
+                if (this.direction === 'up' &&
+                    index === this.digit.data.length - 1) {
+                    return html `<span
+                      class="roll-item roll-item__head"
+                      style=${styleMap(this.cellStyle[index])}
+                    >
+                      <span style=${styleMap(this.textStyle)}
+                        >${digit}</span
+                      >
+                    </span>`;
+                }
+                if (this.direction === 'down' && index === 0) {
+                    return html `
+                      <span
+                        class="roll-item roll-item__tail"
+                        style=${styleMap(this.cellStyle[index])}
+                      >
+                        <span style=${styleMap(this.textStyle)}
+                          >${digit}</span
+                        >
+                      </span>
+                    `;
+                }
+                return html `
+                    <span
+                      class="roll-item"
+                      style=${styleMap(this.cellStyle[index])}
+                    >
+                      <span style=${styleMap(this.textStyle)}
+                        >${digit}</span
+                      >
+                    </span>
+                  `;
+            })
+            : html `
+                <span
+                  class="roll-item"
+                  style=${styleMap(this.cellStyle[0])}
+                >
+                  <span style=${styleMap(this.textStyle)}
+                    >${this.digit.data[0]}</span
+                  >
+                </span>
+              `}
+        </span>
+      </span>
+    `;
+    }
+    shouldAnimate() {
+        const { cancelPrevAnimation, animate } = this.preprocessData;
+        if (cancelPrevAnimation) {
+            if (this.animation) {
+                this.animation.cancel();
+            }
+            if (this.rollList && this.rollList.style && this.rollList.style.cssText) {
+                this.rollList.style.cssText = '';
+            }
+        }
+        if (!animate)
+            return false;
+        return true;
+    }
+    async startAnimation() {
+        if (isNullish(this.rollList))
+            return;
+        this.__emitAnimationStart();
+        const anmOptions = merge({ duration: 1000, iterations: 1, easing: 'ease-out', fill: 'forwards' }, this.animationOptions);
+        const keyframes = isEmpty(this.keyframes)
+            ? {
+                up: { transform: ['translateY(0)', 'translateY(-100%)'] },
+                down: { transform: ['translateY(0)', 'translateY(100%)'] },
+            }[this.direction]
+            : this.keyframes;
+        /**
+         * 尝试从 `PennerEasingFunctions` 中获取对应的 easing 函数
+         */
+        // {
+        if (isString(anmOptions.easing) &&
+            EasingFunctions[anmOptions.easing]) {
+            const func = EasingFunctions[anmOptions.easing];
+            anmOptions.easing = `linear(${range(0, 64)
+                .map((_, i) => func(i / 63))
+                .join(',')})`;
+        }
+        // }
+        try {
+            this.clearAnimation();
+            this.animation = this.rollList.animate(keyframes, anmOptions);
+            this.animation.addEventListener('finish', () => this.__emitAnimationEnd(), {
+                once: true,
+            });
+            // /**
+            //  * 动画播放完成或被其他动画中断都会使得 `finished` resolve.
+            //  * 只有当动画顺利播放完成的情况下, 才能调用 `cancel` 取消动画. 在其他情况下调用, 会抛出异常[1].
+            //  *
+            //  * 因此, 提前检查 `playState` 的值. 当 `playState` 不是 `finished` 时, 说明动画被其他 `Animation` 实例中断.
+            //  * 因为已经有其他 `Animation` 实例的存在, 我们可以直接丢弃这个 `Animation` 实例, 而不用担心无动画可用.
+            //  *
+            //  * [1]: https://developer.mozilla.org/en-US/docs/Web/API/Animation/cancel#exceptions
+            //  */
+            // await this.animation.finished;
+            // if (
+            //   this.animation.playState === 'finished' &&
+            //   this.rollList.checkVisibility()
+            // ) {
+            //   // this.animation.commitStyles();
+            //   // this.animation.cancel();
+            // }
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(e);
+        }
+    }
+    clearAnimation() {
+        this.animation?.removeEventListener('finish', this.__emitAnimationEnd);
+        this.animation?.cancel();
+    }
+    __emitAnimationStart() {
+        if (!this.isConnected)
+            return;
+        this.dispatchEvent(new RollerDigitAnimationEvent('roller-digit-animation-start'));
+    }
+    __emitAnimationEnd() {
+        if (!this.isConnected)
+            return;
+        this.dispatchEvent(new RollerDigitAnimationEvent('roller-digit-animation-end'));
+    }
+};
+TimeredCounterRollerDigit.styles = [rollerDigitStyles];
+__decorate([
+    property({ type: Object })
+], TimeredCounterRollerDigit.prototype, "digit", void 0);
+__decorate([
+    property({ type: Object })
+], TimeredCounterRollerDigit.prototype, "preprocessData", void 0);
+__decorate([
+    property({ type: String })
+], TimeredCounterRollerDigit.prototype, "direction", void 0);
+__decorate([
+    property({ type: Object })
+], TimeredCounterRollerDigit.prototype, "textStyle", void 0);
+__decorate([
+    property({ type: Array })
+], TimeredCounterRollerDigit.prototype, "cellStyle", void 0);
+__decorate([
+    property({ type: Object })
+], TimeredCounterRollerDigit.prototype, "animationOptions", void 0);
+__decorate([
+    property({ type: Object })
+], TimeredCounterRollerDigit.prototype, "keyframes", void 0);
+__decorate([
+    query('.roll-list__shadow')
+], TimeredCounterRollerDigit.prototype, "clonedRollDigitList", void 0);
+__decorate([
+    query('.roll-list')
+], TimeredCounterRollerDigit.prototype, "rollList", void 0);
+__decorate([
+    state()
+], TimeredCounterRollerDigit.prototype, "digitWidth", void 0);
+TimeredCounterRollerDigit = __decorate([
+    customElement('timered-counter-roller-digit')
+], TimeredCounterRollerDigit);
+export { TimeredCounterRollerDigit };
+//# sourceMappingURL=roller-digit.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"roller-digit.js","sourceRoot":"","sources":["../../../../src/transitions/roller/roller-digit.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport {\n  intersection,\n  isEmpty,\n  isNullish,\n  isString,\n  merge,\n  omit,\n  range,\n} from 'remeda';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { PartPreprocessedData } from '../../utils/preprocess-part-data.js';\nimport { PartDataDigit } from '../../types/group.js';\nimport { rollerDigitStyles } from './styles.js';\nimport * as EasingFunctions from '../../easing/index.js';\n\nclass RollerDigitAnimationEvent extends Event {\n  // constructor(type: string, eventInitDict?: EventInit) {\n  //   super(type, eventInitDict);\n  // }\n}\n\n@customElement('timered-counter-roller-digit')\nexport class TimeredCounterRollerDigit extends LitElement {\n  static styles = [rollerDigitStyles];\n\n  @property({ type: Object })\n  digit: PartDataDigit = { data: [], place: 0 };\n\n  @property({ type: Object })\n  preprocessData: PartPreprocessedData = {\n    animate: true,\n    cancelPrevAnimation: false,\n    earlyReturn: '',\n    index: 0,\n    partIndex: 0,\n    digitIndex: 0,\n  };\n\n  @property({ type: String })\n  direction: 'up' | 'down' = 'up';\n\n  @property({ type: Object })\n  textStyle: Partial<CSSStyleDeclaration> = {};\n\n  @property({ type: Array })\n  cellStyle: Partial<CSSStyleDeclaration>[] = [];\n\n  @property({ type: Object })\n  animationOptions: KeyframeAnimationOptions = {};\n\n  @property({ type: Object })\n  keyframes: PropertyIndexedKeyframes = {};\n\n  @query('.roll-list__shadow')\n  clonedRollDigitList: HTMLElement | undefined;\n\n  @query('.roll-list')\n  rollList: HTMLElement | undefined;\n\n  @state()\n  digitWidth: number = 0;\n\n  resizeObserver: ResizeObserver;\n\n  animation: Animation | undefined;\n\n  constructor() {\n    super();\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.digitWidth = (\n        this.clonedRollDigitList\n          ? this.clonedRollDigitList.getBoundingClientRect()\n          : new DOMRect()\n      ).width;\n    });\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues<this>) {\n    super.firstUpdated(_changedProperties);\n\n    if (this.clonedRollDigitList) {\n      this.resizeObserver.observe(this.clonedRollDigitList);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.resizeObserver.disconnect();\n  }\n\n  protected updated(_changedProperties: PropertyValues) {\n    super.updated(_changedProperties);\n\n    /**\n     * 仅当影响滚动列表 dom 结构的属性发生变化时才会触发动画.\n     */\n    if (\n      intersection(Array.from(_changedProperties.keys()), [\n        'digit',\n        'preprocessData',\n        'direction',\n        'animationOptions',\n        'keyframes',\n      ]).length > 0\n    ) {\n      if (this.shouldAnimate()) {\n        this.startAnimation().then();\n      }\n    }\n  }\n\n  render() {\n    const shadowCellStyle = this.cellStyle.map(style =>\n      omit(style, ['position']),\n    );\n\n    return html`\n      <span class=\"roller-part-digit\">\n        <!--    占位      -->\n        <span\n          class=\"placeholder\"\n          style=${styleMap({ width: `${Math.round(this.digitWidth)}px` })}\n        >\n          0\n        </span>\n        <!--  一个不可见的滚动列表的复制, 用于计算该列表的最大宽度.  -->\n        <span class=\"roll-list__shadow\">\n          ${repeat(\n            this.digit.data,\n            (_, index) => index,\n            (digit, index) => html`\n              <span style=${styleMap(shadowCellStyle[index] as StyleInfo)}>\n                ${digit}\n              </span>\n            `,\n          )}\n        </span>\n        <span\n          class=${classMap({\n            /**\n             * 向上(up)滚动时, 使滚动列表顶部对齐以便于应用 `translationY(-100%)` 实现向上滚动效果\n             * 向下同理\n             */\n            'roll-list__up': this.direction === 'up',\n            'roll-list__down': this.direction === 'down',\n            'roll-list': true,\n          })}\n        >\n          ${this.digit.data.length > 1\n            ? repeat(\n                this.digit.data,\n                (_, index) => index,\n                (digit, index) => {\n                  if (\n                    this.direction === 'up' &&\n                    index === this.digit.data.length - 1\n                  ) {\n                    return html`<span\n                      class=\"roll-item roll-item__head\"\n                      style=${styleMap(this.cellStyle[index] as StyleInfo)}\n                    >\n                      <span style=${styleMap(this.textStyle as StyleInfo)}\n                        >${digit}</span\n                      >\n                    </span>`;\n                  }\n                  if (this.direction === 'down' && index === 0) {\n                    return html`\n                      <span\n                        class=\"roll-item roll-item__tail\"\n                        style=${styleMap(this.cellStyle[index] as StyleInfo)}\n                      >\n                        <span style=${styleMap(this.textStyle as StyleInfo)}\n                          >${digit}</span\n                        >\n                      </span>\n                    `;\n                  }\n                  return html`\n                    <span\n                      class=\"roll-item\"\n                      style=${styleMap(this.cellStyle[index] as StyleInfo)}\n                    >\n                      <span style=${styleMap(this.textStyle as StyleInfo)}\n                        >${digit}</span\n                      >\n                    </span>\n                  `;\n                },\n              )\n            : html`\n                <span\n                  class=\"roll-item\"\n                  style=${styleMap(this.cellStyle[0] as StyleInfo)}\n                >\n                  <span style=${styleMap(this.textStyle as StyleInfo)}\n                    >${this.digit.data[0]}</span\n                  >\n                </span>\n              `}\n        </span>\n      </span>\n    `;\n  }\n\n  shouldAnimate() {\n    const { cancelPrevAnimation, animate } = this.preprocessData;\n    if (cancelPrevAnimation) {\n      if (this.animation) {\n        this.animation.cancel();\n      }\n\n      if (this.rollList && this.rollList.style && this.rollList.style.cssText) {\n        this.rollList.style.cssText = '';\n      }\n    }\n\n    if (!animate) return false;\n\n    return true;\n  }\n\n  async startAnimation() {\n    if (isNullish(this.rollList)) return;\n\n    this.__emitAnimationStart();\n\n    const anmOptions = merge(\n      { duration: 1000, iterations: 1, easing: 'ease-out', fill: 'forwards' },\n      this.animationOptions,\n    );\n\n    const keyframes = isEmpty(this.keyframes)\n      ? {\n          up: { transform: ['translateY(0)', 'translateY(-100%)'] },\n          down: { transform: ['translateY(0)', 'translateY(100%)'] },\n        }[this.direction]\n      : this.keyframes;\n\n    /**\n     * 尝试从 `PennerEasingFunctions` 中获取对应的 easing 函数\n     */\n    // {\n    if (\n      isString(anmOptions.easing) &&\n      EasingFunctions[anmOptions.easing as keyof typeof EasingFunctions]\n    ) {\n      const func =\n        EasingFunctions[anmOptions.easing as keyof typeof EasingFunctions];\n      anmOptions.easing = `linear(${range(0, 64)\n        .map((_, i) => func(i / 63))\n        .join(',')})`;\n    }\n    // }\n\n    try {\n      this.clearAnimation();\n      this.animation = this.rollList.animate(keyframes, anmOptions);\n\n      this.animation.addEventListener(\n        'finish',\n        () => this.__emitAnimationEnd(),\n        {\n          once: true,\n        },\n      );\n\n      // /**\n      //  * 动画播放完成或被其他动画中断都会使得 `finished` resolve.\n      //  * 只有当动画顺利播放完成的情况下, 才能调用 `cancel` 取消动画. 在其他情况下调用, 会抛出异常[1].\n      //  *\n      //  * 因此, 提前检查 `playState` 的值. 当 `playState` 不是 `finished` 时, 说明动画被其他 `Animation` 实例中断.\n      //  * 因为已经有其他 `Animation` 实例的存在, 我们可以直接丢弃这个 `Animation` 实例, 而不用担心无动画可用.\n      //  *\n      //  * [1]: https://developer.mozilla.org/en-US/docs/Web/API/Animation/cancel#exceptions\n      //  */\n      // await this.animation.finished;\n      // if (\n      //   this.animation.playState === 'finished' &&\n      //   this.rollList.checkVisibility()\n      // ) {\n      //   // this.animation.commitStyles();\n      //   // this.animation.cancel();\n      // }\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.error(e);\n    }\n  }\n\n  clearAnimation() {\n    this.animation?.removeEventListener('finish', this.__emitAnimationEnd);\n    this.animation?.cancel();\n  }\n\n  private __emitAnimationStart() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(\n      new RollerDigitAnimationEvent('roller-digit-animation-start'),\n    );\n  }\n\n  private __emitAnimationEnd() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(\n      new RollerDigitAnimationEvent('roller-digit-animation-end'),\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,42 @@
+import { LitElement, PropertyValues } from 'lit';
+import { PartData } from '../../types/group.js';
+import { PartPreprocessedData } from '../../utils/preprocess-part-data.js';
+import './roller-digit.js';
+export declare class TimeredCounterRoller extends LitElement {
+    static styles: import("lit").CSSResult[];
+    color: string;
+    direction: 'up' | 'down';
+    parts: PartData[];
+    partPreprocessDataList: PartPreprocessedData[][];
+    animationOptions: KeyframeAnimationOptions[][];
+    keyframes: PropertyIndexedKeyframes[][];
+    cellStyles: Partial<CSSStyleDeclaration>[][][];
+    digitStyles: Partial<CSSStyleDeclaration>[][];
+    partStyles: Partial<CSSStyleDeclaration>[];
+    parentContainerRect: DOMRect;
+    prefixContainer: HTMLElement | undefined;
+    suffixContainer: HTMLElement | undefined;
+    private __mergedDigitStyles;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected willUpdate(_changedProperties: PropertyValues): void;
+    /**
+     * 记录一次更新中, 启动动画并结束的 <timered-counter-roller-digit> 元素个数.
+     *
+     * 在每次更新前重置为 0.
+     *
+     * @see {@link __handleDigitAnimationEnd}
+     * @private
+     */
+    private digitAnimateEndCount;
+    /**
+     * 记录一次更新中, 需要启动动画的 <timered-counter-roller-digit> 元素总数.
+     *
+     * 在每次更新前重新计算.
+     * @private
+     */
+    private digitAnimatedCount;
+    private __handleDigitAnimationEnd;
+    private __emitAnimationStart;
+    private __emitAnimationEnd;
+    private __generatePartDigitsColorStyles;
+}