timered-counter 0.0.2 → 0.0.3

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

@@ -1 +1 @@
-{"version":3,"file":"timered-counter-number.js","sourceRoot":"","sources":["../../src/timered-counter-number.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property, state } from 'lit/decorators.js';\nimport { html, PropertyValues } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { isBoolean, isNullish } from 'remeda';\nimport { TimeredCounter } from './timered-counter.js';\nimport { AvailableNumberAdapterValueType } from './number-adapter/index.js';\nimport { timeredCounterNumberStyles } from './styles/timered-counter-number-styles.js';\n\n@customElement('timered-counter-number')\nexport class TimeredCounterNumber extends TimeredCounter {\n  static styles = [...TimeredCounter.styles, timeredCounterNumberStyles];\n\n  /**\n   * 本地化数字格式化配置. 传入 `true` 时使用浏览器的默认配置.\n   *\n   * 详细配置参数请参考 [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)\n   *\n   * @default false\n   */\n  @property({\n    converter: value => {\n      if (isNullish(value)) return value;\n\n      try {\n        return JSON.parse(value);\n      } catch (error) {\n        return value;\n      }\n    },\n    reflect: true,\n    attribute: 'locale-number',\n  })\n  localeNumber: Intl.NumberFormatOptions | boolean = false;\n\n  localeNumberInstance: Intl.NumberFormat = new Intl.NumberFormat(\n    this.localeInstance,\n    isBoolean(this.localeNumber) ? {} : this.localeNumber,\n  );\n\n  /**\n   * 本地化数字格式化配置中的小数点分隔符. 根据不同的地区可能是 `.` 或 `,`.\n   * @see https://en.wikipedia.org/wiki/Decimal_separator\n   */\n  @state()\n  localDecimalSeparator = '.';\n\n  override sampleToString(value: AvailableNumberAdapterValueType): string {\n    return this.localeNumber\n      ? // todo Intl.NumberFormat 最大支持 21 位数.\n        this.localeNumberInstance.format(this.numberAdapter.toNumber(value))\n      : this.numberAdapter.toString(value);\n  }\n\n  override 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        class=\"timered-counter timered-counter-datetime-duration\"\n        exportparts=\"prefix, suffix, part-suffix\"\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  override willUpdate(_changedProperties: PropertyValues<this>) {\n    if (\n      _changedProperties.has('localeNumber') ||\n      _changedProperties.has('locale')\n    ) {\n      this.localeNumberInstance = new Intl.NumberFormat(\n        this.localeInstance,\n        isBoolean(this.localeNumber) ? {} : this.localeNumber,\n      );\n\n      /**\n       * 本地化数字格式化配置变化时, 更新 `partsOptions` 中的 `decimalSeparator`.\n       */\n      {\n        const decimalSeparator =\n          this.localeNumberInstance\n            .formatToParts(123456.789)\n            .find(part => part.type === 'decimal')?.value || '.';\n\n        if (this.localDecimalSeparator !== decimalSeparator) {\n          this.localDecimalSeparator = decimalSeparator;\n\n          const oldPartsOptions = this.partsOptions;\n          this.partsOptions = {\n            ...oldPartsOptions,\n            decimalSeparator: this.localDecimalSeparator,\n          };\n          _changedProperties.set('partsOptions', oldPartsOptions);\n        }\n      }\n    }\n\n    super.willUpdate(_changedProperties);\n  }\n}\n"]}
+{"version":3,"file":"timered-counter-number.js","sourceRoot":"","sources":["../../src/timered-counter-number.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property, state } from 'lit/decorators.js';\nimport { html, PropertyValues } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { isBoolean, isNullish } from 'remeda';\nimport { TimeredCounter } from './timered-counter.js';\nimport { AvailableNumberAdapterValueType } from './number-adapter/index.js';\nimport { timeredCounterNumberStyles } from './styles/timered-counter-number-styles.js';\n\n@customElement('timered-counter-number')\nexport class TimeredCounterNumber extends TimeredCounter {\n  static styles = [...TimeredCounter.styles, timeredCounterNumberStyles];\n\n  /**\n   * 本地化数字格式化配置. 传入 `true` 时使用浏览器的默认配置.\n   *\n   * 详细配置参数请参考 [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)\n   *\n   * @default false\n   */\n  @property({\n    converter: value => {\n      if (isNullish(value)) return false;\n\n      try {\n        return JSON.parse(value);\n      } catch (error) {\n        return true;\n      }\n    },\n    reflect: true,\n    attribute: 'locale-number',\n  })\n  localeNumber: Intl.NumberFormatOptions | boolean = false;\n\n  localeNumberInstance: Intl.NumberFormat = new Intl.NumberFormat(\n    this.localeInstance,\n    isBoolean(this.localeNumber) ? {} : this.localeNumber,\n  );\n\n  /**\n   * 本地化数字格式化配置中的小数点分隔符. 根据不同的地区可能是 `.` 或 `,`.\n   * @see https://en.wikipedia.org/wiki/Decimal_separator\n   */\n  @state()\n  localDecimalSeparator = '';\n\n  /**\n   * 本地化数字格式化配置中的分组分隔符.\n   * @see https://en.wikipedia.org/wiki/Decimal_separator#Digit_grouping\n   */\n  @state()\n  localeGroupingSeparator = '';\n\n  override sampleToString(value: AvailableNumberAdapterValueType): string {\n    return this.localeNumber\n      ? // todo Intl.NumberFormat 最大支持 21 位数.\n        this.localeNumberInstance.format(this.numberAdapter.toNumber(value))\n      : this.numberAdapter.toString(value);\n  }\n\n  override 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        class=\"timered-counter timered-counter-datetime-duration\"\n        exportparts=\"prefix, suffix, part-suffix\"\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  override willUpdate(_changedProperties: PropertyValues<this>) {\n    if (\n      _changedProperties.has('localeNumber') ||\n      _changedProperties.has('locale')\n    ) {\n      this.localeNumberInstance = new Intl.NumberFormat(\n        this.localeInstance,\n        isBoolean(this.localeNumber) ? {} : this.localeNumber,\n      );\n\n      /**\n       * 本地化数字格式化配置变化时, 更新 `partsOptions` 中的 `decimalSeparator`.\n       */\n      {\n        const numberParts = this.localeNumberInstance.formatToParts(123456.789);\n\n        const decimalSeparator =\n          numberParts.find(part => part.type === 'decimal')?.value || '.';\n        const groupingSeparator =\n          numberParts.find(part => part.type === 'group')?.value || '';\n\n        if (\n          this.localDecimalSeparator !== decimalSeparator ||\n          this.localeGroupingSeparator !== groupingSeparator\n        ) {\n          this.localDecimalSeparator = decimalSeparator;\n\n          const oldPartsOptions = this.partsOptions;\n          this.partsOptions = {\n            ...oldPartsOptions,\n            decimalSeparator: this.localDecimalSeparator,\n          };\n          _changedProperties.set('partsOptions', oldPartsOptions);\n        }\n      }\n    }\n\n    super.willUpdate(_changedProperties);\n  }\n}\n"]}

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

@@ -41,8 +41,7 @@ let TimeredCounterRoller = class TimeredCounterRoller extends LitElement {
         this.digitAnimatedCount = 0;
     }
     render() {
-        return html `
-      <span
+        return html ` <span
         class="roller__prefix"
         data-part-id="-1"
         data-digit-id="0"
@@ -52,45 +51,37 @@ let TimeredCounterRoller = class TimeredCounterRoller extends LitElement {
       </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
+              >${repeat(part.digits, (_, index) => `${part.digits.length - index}`, (digitInfo, digitIndex) => html `<timered-counter-roller-digit
+                    class="roller-part__wrapper"
+                    data-part-id="${partIndex}"
+                    data-digit-id="${digitIndex}"
+                    .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
+                  ></timered-counter-roller-digit>`)}${html `<span
                 class="roller-part__suffix"
                 data-part-id="${partIndex}"
                 data-digit-id="-1"
                 style=${styleMap((this.__mergedDigitStyles[partIndex][-1] ?? {}))}
-              >
-                <slot
+                ><slot
                   part="part-suffix"
                   name=${`part-suffix-${partIndex}`}
-                ></slot>
-              </span>`)}
-      </span>
-      <span
+                ></slot
+              ></span>`}</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>
-    `;
+        ><slot part="suffix" name="suffix"></slot
+      ></span>`;
     }
     willUpdate(_changedProperties) {
         super.willUpdate(_changedProperties);

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

@@ -1 +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"]}
+{"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` <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`<timered-counter-roller-digit\n                    class=\"roller-part__wrapper\"\n                    data-part-id=\"${partIndex}\"\n                    data-digit-id=\"${digitIndex}\"\n                    .digit=${digitInfo}\n                    .preprocessData=${this.partPreprocessDataList[partIndex][\n                      digitIndex\n                    ]}\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              )}${html`<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                ><slot\n                  part=\"part-suffix\"\n                  name=${`part-suffix-${partIndex}`}\n                ></slot\n              ></span>`}</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        ><slot part=\"suffix\" name=\"suffix\"></slot\n      ></span>`;\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.js

@@ -19,7 +19,7 @@ export const rollerStyles = css `
   }
 
   .roller-part .roller-part__suffix {
-    //display: inline-block;
+    display: inline-block;
   }
 `;
 export const rollerDigitStyles = css `

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

@@ -1 +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"]}
+{"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"]}