timered-counter 0.0.0

package/dist/src/mixins/counter-base.js

@@ -0,0 +1,152 @@
+import { __decorate } from "tslib";
+import { property, state } from 'lit/decorators.js';
+import { isNonNullish, isNullish, isString } from 'remeda';
+import { CounterAdapter } from '../counter-adapter.js';
+export const CounterBaseMixin = (superClass) => {
+    class CounterBaseMixinClass extends superClass {
+        get value() {
+            return this.numberAdapter.create(this.__value);
+        }
+        set value(value) {
+            value = CounterAdapter.NUMBER_ADAPTER.create(isNullish(value) || (isString(value) && value.trim() === '')
+                ? 0
+                : value);
+            const old = this.__value;
+            this.__value = value;
+            if (!this.numberAdapter.eq(this.__value, old)) {
+                this.requestUpdate('value', old);
+            }
+        }
+        get oldValue() {
+            return this.numberAdapter.create(this.__oldValue);
+        }
+        set oldValue(value) {
+            const old = this.__oldValue;
+            this.__oldValue = value;
+            this.requestUpdate('oldValue', old);
+        }
+        /**
+         * 如果初始值被设置, 组件初始化时会使用该值而不是 `value`, 然后在初始化完成后, 将内部值更新为 `value`.
+         *
+         * 这对于初始化完成后启动动画效果非常有用.
+         */
+        get initialValue() {
+            return this.numberAdapter.create(this.__initialValue);
+        }
+        set initialValue(value) {
+            const old = this.__initialValue;
+            this.__initialValue = value;
+            this.requestUpdate('initialValue', old);
+        }
+        /**
+         * 自定义本地化配置, 否则从浏览器环境中获取.
+         * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale
+         *
+         * @default "en-US"
+         */
+        get locale() {
+            return this.__locale;
+        }
+        set locale(value) {
+            const old = this.__locale;
+            this.__locale = value;
+            this.requestUpdate('locale', old);
+            this.localeInstance = isString(this.__locale)
+                ? new Intl.Locale(this.__locale)
+                : new Intl.Locale(...this.__locale);
+        }
+        constructor(...args) {
+            super(...args);
+            this.__value = CounterAdapter.NUMBER_ADAPTER.create(0);
+            // value: V = CounterBaseMixinClass.NUMBER_ADAPTER.create(0);
+            this.__oldValue = CounterAdapter.NUMBER_ADAPTER.create(0);
+            // oldValue: V = CounterBaseMixinClass.NUMBER_ADAPTER.create(0);
+            this.__initialValue = CounterAdapter.NUMBER_ADAPTER.create(0);
+            this.__locale = 'en-US';
+            this.localeInstance = isString(this.locale)
+                ? new Intl.Locale(this.locale)
+                : new Intl.Locale(...this.locale);
+            this.direction = 'up';
+            this.oldDirection = this.direction;
+            /**
+             * 第一次更新时, changedProperties 中 value 的旧值始终为 undefined.
+             * 因此, 当 value 第一次更新时, oldValue 的值应当来自 initialValue 或 value.
+             * 以保证 oldValue 始终有值.
+             * @private
+             */
+            this.isValueFirstUpdate = true;
+            // @ts-ignore
+            this.numberAdapter = CounterAdapter.NUMBER_ADAPTER;
+            // @ts-ignore
+            this.stringAdapter = CounterAdapter.STRING_ADAPTER;
+        }
+        willUpdate(changedProperties) {
+            super.willUpdate(changedProperties);
+            if (changedProperties.has('value')) {
+                if (this.isValueFirstUpdate) {
+                    this.isValueFirstUpdate = false;
+                    this.oldValue = isNonNullish(this.initialValue)
+                        ? this.initialValue
+                        : this.value;
+                }
+                else {
+                    this.oldValue = changedProperties.get('value') ?? this.oldValue;
+                }
+            }
+            this.oldDirection = this.direction;
+            this.direction = this.numberAdapter.gt(this.value, this.oldValue)
+                ? 'down'
+                : 'up';
+            // }
+        }
+    }
+    __decorate([
+        property({
+            attribute: 'value',
+            reflect: true,
+            converter: {
+                toAttribute: CounterAdapter.VALUE_CONVERTER.toAttribute,
+            },
+            noAccessor: true,
+        })
+    ], CounterBaseMixinClass.prototype, "value", null);
+    __decorate([
+        property({
+            attribute: 'old-value',
+            reflect: true,
+            converter: CounterAdapter.VALUE_CONVERTER,
+            noAccessor: true,
+        })
+    ], CounterBaseMixinClass.prototype, "oldValue", null);
+    __decorate([
+        property({
+            attribute: 'initial-value',
+            reflect: true,
+            converter: CounterAdapter.VALUE_CONVERTER,
+            noAccessor: true,
+        })
+    ], CounterBaseMixinClass.prototype, "initialValue", null);
+    __decorate([
+        property({
+            converter: value => {
+                if (isNullish(value))
+                    return value;
+                try {
+                    return JSON.parse(value);
+                }
+                catch (error) {
+                    return value;
+                }
+            },
+            noAccessor: true,
+        })
+    ], CounterBaseMixinClass.prototype, "locale", null);
+    __decorate([
+        state()
+    ], CounterBaseMixinClass.prototype, "direction", void 0);
+    __decorate([
+        state()
+    ], CounterBaseMixinClass.prototype, "oldDirection", void 0);
+    return CounterBaseMixinClass;
+};
+//# sourceMappingURL=counter-base.js.map

package/dist/src/mixins/counter-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter-base.js","sourceRoot":"","sources":["../../../src/mixins/counter-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { isNonNullish, isNullish, isString } from 'remeda';\nimport { Constructor } from 'type-fest';\nimport {\n  NumberAdapter,\n  AvailableNumberAdapterValueType,\n} from '../number-adapter/index.js';\nimport { StringAdapter } from '../string-adapter/index.js';\nimport { CounterAdapter } from '../counter-adapter.js';\n\nexport declare class CounterBaseMixinInterface<\n  V extends AvailableNumberAdapterValueType,\n> {\n  static NUMBER_ADAPTER: NumberAdapter;\n\n  static STRING_ADAPTER: StringAdapter;\n\n  get value(): V;\n\n  set value(value: V);\n\n  get oldValue(): V;\n\n  set oldValue(value: V);\n\n  get initialValue(): V;\n\n  set initialValue(value: V);\n\n  direction: 'up' | 'down';\n\n  oldDirection: 'up' | 'down';\n\n  locale:\n    | Intl.UnicodeBCP47LocaleIdentifier\n    | [Intl.UnicodeBCP47LocaleIdentifier, Intl.LocaleOptions];\n\n  localeInstance: Intl.Locale;\n\n  numberAdapter: NumberAdapter;\n\n  stringAdapter: StringAdapter;\n}\n\nexport const CounterBaseMixin = <\n  V extends AvailableNumberAdapterValueType,\n  T extends Constructor<LitElement> = Constructor<LitElement>,\n>(\n  superClass: T,\n) => {\n  class CounterBaseMixinClass extends superClass {\n    private __value: V = CounterAdapter.NUMBER_ADAPTER.create(0);\n\n    @property({\n      attribute: 'value',\n      reflect: true,\n      converter: {\n        toAttribute: CounterAdapter.VALUE_CONVERTER.toAttribute,\n      },\n      noAccessor: true,\n    })\n    get value() {\n      return this.numberAdapter.create(this.__value);\n    }\n\n    set value(value: V) {\n      value = CounterAdapter.NUMBER_ADAPTER.create(\n        isNullish(value) || (isString(value) && value.trim() === '')\n          ? 0\n          : value,\n      );\n\n      const old = this.__value;\n      this.__value = value;\n\n      if (!this.numberAdapter.eq(this.__value, old)) {\n        this.requestUpdate('value', old);\n      }\n    }\n    // value: V = CounterBaseMixinClass.NUMBER_ADAPTER.create(0);\n\n    private __oldValue: V = CounterAdapter.NUMBER_ADAPTER.create(0);\n\n    @property({\n      attribute: 'old-value',\n      reflect: true,\n      converter: CounterAdapter.VALUE_CONVERTER,\n      noAccessor: true,\n    })\n    get oldValue() {\n      return this.numberAdapter.create(this.__oldValue);\n    }\n\n    set oldValue(value: V) {\n      const old = this.__oldValue;\n      this.__oldValue = value;\n      this.requestUpdate('oldValue', old);\n    }\n    // oldValue: V = CounterBaseMixinClass.NUMBER_ADAPTER.create(0);\n\n    private __initialValue: V = CounterAdapter.NUMBER_ADAPTER.create(0);\n\n    /**\n     * 如果初始值被设置, 组件初始化时会使用该值而不是 `value`, 然后在初始化完成后, 将内部值更新为 `value`.\n     *\n     * 这对于初始化完成后启动动画效果非常有用.\n     */\n    @property({\n      attribute: 'initial-value',\n      reflect: true,\n      converter: CounterAdapter.VALUE_CONVERTER,\n      noAccessor: true,\n    })\n    get initialValue() {\n      return this.numberAdapter.create(this.__initialValue);\n    }\n\n    set initialValue(value: V) {\n      const old = this.__initialValue;\n      this.__initialValue = value;\n      this.requestUpdate('initialValue', old);\n    }\n\n    private __locale:\n      | Intl.UnicodeBCP47LocaleIdentifier\n      | [Intl.UnicodeBCP47LocaleIdentifier, Intl.LocaleOptions] = 'en-US';\n\n    /**\n     * 自定义本地化配置, 否则从浏览器环境中获取.\n     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale\n     *\n     * @default \"en-US\"\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      noAccessor: true,\n    })\n    get locale() {\n      return this.__locale;\n    }\n\n    set locale(\n      value:\n        | Intl.UnicodeBCP47LocaleIdentifier\n        | [Intl.UnicodeBCP47LocaleIdentifier, Intl.LocaleOptions],\n    ) {\n      const old = this.__locale;\n      this.__locale = value;\n      this.requestUpdate('locale', old);\n\n      this.localeInstance = isString(this.__locale)\n        ? new Intl.Locale(this.__locale)\n        : new Intl.Locale(...this.__locale);\n    }\n\n    localeInstance: Intl.Locale = isString(this.locale)\n      ? new Intl.Locale(this.locale)\n      : new Intl.Locale(...this.locale);\n\n    @state()\n    direction: 'up' | 'down' = 'up';\n\n    @state()\n    oldDirection: 'up' | 'down' = this.direction;\n\n    numberAdapter: NumberAdapter;\n\n    stringAdapter: StringAdapter;\n\n    constructor(...args: any[]) {\n      super(...args);\n\n      // @ts-ignore\n      this.numberAdapter = CounterAdapter.NUMBER_ADAPTER;\n      // @ts-ignore\n      this.stringAdapter = CounterAdapter.STRING_ADAPTER;\n    }\n\n    /**\n     * 第一次更新时, changedProperties 中 value 的旧值始终为 undefined.\n     * 因此, 当 value 第一次更新时, oldValue 的值应当来自 initialValue 或 value.\n     * 以保证 oldValue 始终有值.\n     * @private\n     */\n    private isValueFirstUpdate = true;\n\n    override willUpdate(changedProperties: PropertyValues<this>) {\n      super.willUpdate(changedProperties);\n\n      if (changedProperties.has('value')) {\n        if (this.isValueFirstUpdate) {\n          this.isValueFirstUpdate = false;\n          this.oldValue = isNonNullish(this.initialValue)\n            ? this.initialValue\n            : this.value;\n        } else {\n          this.oldValue = changedProperties.get('value') ?? this.oldValue;\n        }\n      }\n\n      this.oldDirection = this.direction;\n      this.direction = this.numberAdapter.gt(this.value, this.oldValue)\n        ? 'down'\n        : 'up';\n      // }\n    }\n  }\n\n  return CounterBaseMixinClass as Constructor<CounterBaseMixinInterface<V>> & T;\n};\n"]}

package/dist/src/mixins/counter-parts.d.ts

@@ -0,0 +1,42 @@
+import { Constructor } from 'type-fest';
+import { CounterBaseMixin } from './counter-base.js';
+import { PartData } from '../types/group.js';
+import { PartPreprocessedData } from '../utils/preprocess-part-data.js';
+import { AvailableNumberAdapterValueType } from '../number-adapter/index.js';
+export interface PartsOptions {
+    sampleCount: number;
+    /**
+     * 可以通过该属性将数字转换为你想要的任意字符串.
+     */
+    digitToChar: Record<string | number, string> | string[];
+    /**
+     * 小数点分隔符.
+     */
+    decimalSeparator: string;
+    /**
+     * 当**位数不足**时, 强制补全的 [整数, 小数] 位数. 为空时位数自适应.
+     */
+    minPlaces: [number | undefined, number | undefined];
+    fillChar: string;
+    /**
+     * 数据类型.
+     *
+     * 1. `'string'`: 字符串类型.
+     *  1. 不会使用 `decimalSeparator` 截取小数部分.
+     * 2. `'number'`: 数字类型.
+     *
+     *  @default `'number'`
+     */
+    type: 'string' | 'number';
+}
+export declare class CounterPartsMixinInterface<V extends AvailableNumberAdapterValueType> {
+    parts: PartData[];
+    oldParts: PartData[];
+    partPreprocessDataList: PartPreprocessedData[][];
+    get partsOptions(): Partial<PartsOptions>;
+    set partsOptions(value: Partial<PartsOptions>);
+    sampling(from: V, to: V): V[];
+    sampleSplit(samples: V[]): V[][];
+    sampleToString(value: V): string;
+}
+export declare const CounterPartsMixin: <V extends AvailableNumberAdapterValueType, T extends ReturnType<typeof CounterBaseMixin<V>> = Constructor<import("./counter-base.js").CounterBaseMixinInterface<V>> & Constructor<import("lit").LitElement>>(superClass: T) => Constructor<CounterPartsMixinInterface<V>> & T;

package/dist/src/mixins/counter-parts.js

@@ -0,0 +1,180 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { zip } from 'd3-array';
+import { property } from 'lit/decorators.js';
+import { isArray, isObjectType } from 'remeda';
+import { transitionDigit } from '../utils/transition-digit.js';
+import { preprocessPartData, } from '../utils/preprocess-part-data.js';
+import { parseJsonString } from '../utils/parse-json-string.js';
+function toChar(value) {
+    return String.fromCodePoint(value + 48);
+}
+function preprocessPartsOptions(options) {
+    const digitToChar = {};
+    if (isArray(options.digitToChar)) {
+        options.digitToChar.forEach((char, index) => {
+            digitToChar[toChar(index)] = char;
+        });
+    }
+    else if (isObjectType(options.digitToChar)) {
+        Object.entries(options.digitToChar).forEach(([key, value]) => {
+            digitToChar[key] = value;
+        });
+    }
+    return {
+        ...options,
+        digitToChar,
+    };
+}
+export const CounterPartsMixin = (superClass) => {
+    var _a, _CounterPartsMixinClass___partsOptions;
+    class CounterPartsMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            _CounterPartsMixinClass___partsOptions.set(this, {
+                ..._a.DEFAULT_PARTS_OPTIONS,
+            });
+            // partsOptions: InnerPartsOptions =
+            //   CounterPartsMixinClass.DEFAULT_PARTS_OPTIONS;
+            this.parts = [];
+            this.oldParts = [];
+            this.partPreprocessDataList = [];
+        }
+        /**
+         * 这是 `usePartData` 的配置项. `usePartData` 被用于从数值的变化中生成用于滚动的数据.
+         * 这里不会有太多解释, 因为它是一个底层的配置项. 你可以查看 `CounterPartsMixinClass` 的源码了解更多信息.
+         */
+        get partsOptions() {
+            return __classPrivateFieldGet(this, _CounterPartsMixinClass___partsOptions, "f");
+        }
+        set partsOptions(value) {
+            const old = __classPrivateFieldGet(this, _CounterPartsMixinClass___partsOptions, "f");
+            __classPrivateFieldSet(this, _CounterPartsMixinClass___partsOptions, preprocessPartsOptions({
+                ..._a.DEFAULT_PARTS_OPTIONS,
+                ...value,
+            }), "f");
+            this.requestUpdate('partsOptions', old);
+        }
+        sampling(from, to) {
+            return transitionDigit(this.numberAdapter, this.numberAdapter.max(from, to), this.numberAdapter.min(from, to), this.partsOptions.sampleCount);
+        }
+        // eslint-disable-next-line class-methods-use-this
+        sampleSplit(samples) {
+            return [samples.slice()];
+        }
+        sampleToString(value) {
+            return this.numberAdapter.toString(value);
+        }
+        willUpdate(changedProperties) {
+            super.willUpdate(changedProperties);
+            if (changedProperties.has('value') ||
+                changedProperties.has('partsOptions')) {
+                this.oldParts = this.parts;
+                this.parts = this.processPartData();
+                this.partPreprocessDataList = preprocessPartData(this.direction, this.parts, this.oldDirection, this.oldParts);
+            }
+            /**
+             * `value` 没变但 `direction` 变化时, 也要重新生成 `partPreprocessDataList`.
+             */
+            // todo test events 和 animationOptions 冲突
+            // if (
+            //   changedProperties.has('value') ||
+            //   changedProperties.has('direction')
+            // ) {
+            // }
+        }
+        /**
+         * process:
+         * 1. 采样
+         * 2. 转换
+         * 3. 构造
+         */
+        processPartData() {
+            const { decimalSeparator, digitToChar, minPlaces, fillChar, type } = this.partsOptions;
+            const from = this.value;
+            const to = this.oldValue;
+            let _sampleToString = value => this.sampleToString(value).split(decimalSeparator);
+            if (type === 'string') {
+                _sampleToString = value => [this.sampleToString(value), ''];
+            }
+            const result = [];
+            /**
+             * 对 {@link from} 到 {@link to} 的范围采样.
+             */
+            const tempParts = this.sampleSplit(this.sampling(from, to));
+            /**
+             * 将时间部分的数字转换为用于滚动的字符串数组
+             *
+             * headNumber: 最先显示的数字. 向下滚动时, 为滚动列表的最后一个数字, 向上滚动时相反.
+             * tailNumber: 最后显示的数字. 向下滚动时, 为滚动列表的第一个数字, 向上滚动时相反.
+             */
+            {
+                const directionValue = this.numberAdapter.gt(from, to) ? 'down' : 'up';
+                for (let i = 0; i < tempParts.length; i++) {
+                    const partData = tempParts[i];
+                    // const headNumber =
+                    //   partData[directionValue === "down" ? partData.length - 1 : 0];
+                    const tailNumber = partData[directionValue === 'down' ? 0 : partData.length - 1];
+                    const [minIntegerPlaces = 1, minDecimalPlaces = 0] = minPlaces;
+                    const numberParts = _sampleToString(tailNumber);
+                    const integerPlaces = Math.max(
+                    // numberParts[0].length,
+                    this.stringAdapter.stringToChars(numberParts[0]).length, minIntegerPlaces);
+                    const decimalPlaces = Math.max(
+                    // numberParts[1]?.length ?? 0,
+                    this.stringAdapter.stringToChars(numberParts[1] ?? '').length, minDecimalPlaces);
+                    /**
+                     * 使用 zip 将二维矩阵, 旋转90度
+                     */
+                    const data = zip(...partData
+                        /**
+                         * 保证位数一致, 向前补零
+                         */
+                        .map(digitData => {
+                        const [integer = '', decimal = ''] = _sampleToString(digitData);
+                        const integerChars = this.stringAdapter.stringToChars(integer);
+                        const decimalChars = this.stringAdapter.stringToChars(decimal);
+                        const filledIntegerPlaces = Math.max(integerPlaces - integerChars.length, 0);
+                        const filledDecimalPlaces = Math.max(decimalPlaces - decimalChars.length, 0);
+                        let filledChars = [].concat(new Array(filledIntegerPlaces).fill(fillChar), integerChars);
+                        if (decimalPlaces > 0) {
+                            filledChars = filledChars.concat([decimalSeparator], decimalChars, new Array(filledDecimalPlaces).fill(fillChar));
+                        }
+                        return filledChars;
+                    }))
+                        /**
+                         * 删除连续的重复项
+                         */
+                        .map((digitList, index, array) => ({
+                        data: digitList
+                            .filter((digit, digitIndex, digitArray) => digitIndex === 0 || digit !== digitArray[digitIndex - 1])
+                            .map(digit => digitToChar[digit] ?? digit),
+                        place: array.length - index,
+                    }));
+                    result.push({
+                        digits: data,
+                    });
+                }
+            }
+            return result;
+        }
+    }
+    _a = CounterPartsMixinClass, _CounterPartsMixinClass___partsOptions = new WeakMap();
+    CounterPartsMixinClass.DEFAULT_PARTS_OPTIONS = {
+        sampleCount: 16,
+        decimalSeparator: '.',
+        fillChar: '0',
+        minPlaces: [1, 0],
+        digitToChar: {},
+        type: 'number',
+    };
+    __decorate([
+        property({
+            type: Object,
+            attribute: 'parts-options',
+            converter: value => parseJsonString(value ?? '') ?? {},
+            noAccessor: true,
+        })
+    ], CounterPartsMixinClass.prototype, "partsOptions", null);
+    return CounterPartsMixinClass;
+};
+//# sourceMappingURL=counter-parts.js.map

package/dist/src/mixins/counter-parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter-parts.js","sourceRoot":"","sources":["../../../src/mixins/counter-parts.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from 'lit';\nimport { zip } from 'd3-array';\nimport { Constructor } from 'type-fest';\nimport { property } from 'lit/decorators.js';\nimport { isArray, isObjectType } from 'remeda';\nimport { CounterBaseMixin } from './counter-base.js';\nimport { PartData } from '../types/group.js';\nimport { transitionDigit } from '../utils/transition-digit.js';\nimport {\n  PartPreprocessedData,\n  preprocessPartData,\n} from '../utils/preprocess-part-data.js';\nimport { AvailableNumberAdapterValueType } from '../number-adapter/index.js';\nimport { parseJsonString } from '../utils/parse-json-string.js';\n\nexport interface PartsOptions {\n  sampleCount: number;\n  /**\n   * 可以通过该属性将数字转换为你想要的任意字符串.\n   */\n  digitToChar: Record<string | number, string> | string[];\n  /**\n   * 小数点分隔符.\n   */\n  decimalSeparator: string;\n  /**\n   * 当**位数不足**时, 强制补全的 [整数, 小数] 位数. 为空时位数自适应.\n   */\n  minPlaces: [number | undefined, number | undefined];\n  fillChar: string;\n  /**\n   * 数据类型.\n   *\n   * 1. `'string'`: 字符串类型.\n   *  1. 不会使用 `decimalSeparator` 截取小数部分.\n   * 2. `'number'`: 数字类型.\n   *\n   *  @default `'number'`\n   */\n  type: 'string' | 'number';\n}\ntype InnerPartsOptions = Omit<PartsOptions, 'digitToChar'> & {\n  digitToChar: Record<string | number, string>;\n};\n\nexport declare class CounterPartsMixinInterface<\n  V extends AvailableNumberAdapterValueType,\n> {\n  parts: PartData[];\n\n  oldParts: PartData[];\n\n  partPreprocessDataList: PartPreprocessedData[][];\n\n  get partsOptions(): Partial<PartsOptions>;\n\n  set partsOptions(value: Partial<PartsOptions>);\n\n  sampling(from: V, to: V): V[];\n\n  sampleSplit(samples: V[]): V[][];\n\n  sampleToString(value: V): string;\n}\n\nfunction toChar(value: number) {\n  return String.fromCodePoint(value + 48);\n}\n\nfunction preprocessPartsOptions(options: PartsOptions): InnerPartsOptions {\n  const digitToChar: Record<string, string> = {};\n\n  if (isArray(options.digitToChar)) {\n    options.digitToChar.forEach((char, index) => {\n      digitToChar[toChar(index)] = char;\n    });\n  } else if (isObjectType(options.digitToChar)) {\n    Object.entries(options.digitToChar).forEach(([key, value]) => {\n      digitToChar[key] = value;\n    });\n  }\n\n  return {\n    ...options,\n    digitToChar,\n  };\n}\n\nexport const CounterPartsMixin = <\n  V extends AvailableNumberAdapterValueType,\n  T extends ReturnType<typeof CounterBaseMixin<V>> = ReturnType<\n    typeof CounterBaseMixin<V>\n  >,\n>(\n  superClass: T,\n) => {\n  class CounterPartsMixinClass extends superClass {\n    private static DEFAULT_PARTS_OPTIONS: InnerPartsOptions = {\n      sampleCount: 16,\n      decimalSeparator: '.',\n      fillChar: '0',\n      minPlaces: [1, 0],\n      digitToChar: {},\n      type: 'number',\n    };\n\n    #__partsOptions: InnerPartsOptions = {\n      ...CounterPartsMixinClass.DEFAULT_PARTS_OPTIONS,\n    };\n\n    /**\n     * 这是 `usePartData` 的配置项. `usePartData` 被用于从数值的变化中生成用于滚动的数据.\n     * 这里不会有太多解释, 因为它是一个底层的配置项. 你可以查看 `CounterPartsMixinClass` 的源码了解更多信息.\n     */\n    @property({\n      type: Object,\n      attribute: 'parts-options',\n      converter: value => parseJsonString(value ?? '') ?? {},\n      noAccessor: true,\n    })\n    get partsOptions(): InnerPartsOptions {\n      return this.#__partsOptions;\n    }\n\n    set partsOptions(value: Partial<PartsOptions>) {\n      const old = this.#__partsOptions;\n      this.#__partsOptions = preprocessPartsOptions({\n        ...CounterPartsMixinClass.DEFAULT_PARTS_OPTIONS,\n        ...value,\n      });\n      this.requestUpdate('partsOptions', old);\n    }\n    // partsOptions: InnerPartsOptions =\n    //   CounterPartsMixinClass.DEFAULT_PARTS_OPTIONS;\n\n    parts: PartData[] = [];\n\n    oldParts: PartData[] = [];\n\n    partPreprocessDataList: PartPreprocessedData[][] = [];\n\n    sampling(from: V, to: V) {\n      return transitionDigit(\n        this.numberAdapter,\n        this.numberAdapter.max(from, to),\n        this.numberAdapter.min(from, to),\n        this.partsOptions.sampleCount,\n      );\n    }\n\n    // eslint-disable-next-line class-methods-use-this\n    sampleSplit(samples: V[]) {\n      return [samples.slice()];\n    }\n\n    sampleToString(value: V) {\n      return this.numberAdapter.toString(value);\n    }\n\n    override willUpdate(changedProperties: PropertyValues<this>) {\n      super.willUpdate(changedProperties);\n\n      if (\n        changedProperties.has('value') ||\n        changedProperties.has('partsOptions')\n      ) {\n        this.oldParts = this.parts;\n        this.parts = this.processPartData();\n        this.partPreprocessDataList = preprocessPartData(\n          this.direction,\n          this.parts,\n          this.oldDirection,\n          this.oldParts,\n        );\n      }\n\n      /**\n       * `value` 没变但 `direction` 变化时, 也要重新生成 `partPreprocessDataList`.\n       */\n      // todo test events 和 animationOptions 冲突\n      // if (\n      //   changedProperties.has('value') ||\n      //   changedProperties.has('direction')\n      // ) {\n      // }\n    }\n\n    /**\n     * process:\n     * 1. 采样\n     * 2. 转换\n     * 3. 构造\n     */\n    private processPartData() {\n      const { decimalSeparator, digitToChar, minPlaces, fillChar, type } =\n        this.partsOptions;\n\n      const from = this.value;\n      const to = this.oldValue;\n\n      let _sampleToString: (value: V) => string[] = value =>\n        this.sampleToString(value).split(decimalSeparator);\n      if (type === 'string') {\n        _sampleToString = value => [this.sampleToString(value), ''];\n      }\n\n      const result: PartData[] = [];\n\n      /**\n       * 对 {@link from} 到 {@link to} 的范围采样.\n       */\n      const tempParts = this.sampleSplit(this.sampling(from, to));\n\n      /**\n       * 将时间部分的数字转换为用于滚动的字符串数组\n       *\n       * headNumber: 最先显示的数字. 向下滚动时, 为滚动列表的最后一个数字, 向上滚动时相反.\n       * tailNumber: 最后显示的数字. 向下滚动时, 为滚动列表的第一个数字, 向上滚动时相反.\n       */\n      {\n        const directionValue = this.numberAdapter.gt(from, to) ? 'down' : 'up';\n        for (let i = 0; i < tempParts.length; i++) {\n          const partData = tempParts[i];\n          // const headNumber =\n          //   partData[directionValue === \"down\" ? partData.length - 1 : 0];\n          const tailNumber =\n            partData[directionValue === 'down' ? 0 : partData.length - 1];\n\n          const [minIntegerPlaces = 1, minDecimalPlaces = 0] = minPlaces;\n\n          const numberParts = _sampleToString(tailNumber);\n          const integerPlaces = Math.max(\n            // numberParts[0].length,\n            this.stringAdapter.stringToChars(numberParts[0]).length,\n            minIntegerPlaces,\n          );\n          const decimalPlaces = Math.max(\n            // numberParts[1]?.length ?? 0,\n            this.stringAdapter.stringToChars(numberParts[1] ?? '').length,\n            minDecimalPlaces,\n          );\n\n          /**\n           * 使用 zip 将二维矩阵, 旋转90度\n           */\n          const data = zip(\n            ...partData\n              /**\n               * 保证位数一致, 向前补零\n               */\n              .map(digitData => {\n                const [integer = '', decimal = ''] = _sampleToString(digitData);\n\n                const integerChars = this.stringAdapter.stringToChars(integer);\n                const decimalChars = this.stringAdapter.stringToChars(decimal);\n\n                const filledIntegerPlaces = Math.max(\n                  integerPlaces - integerChars.length,\n                  0,\n                );\n\n                const filledDecimalPlaces = Math.max(\n                  decimalPlaces - decimalChars.length,\n                  0,\n                );\n\n                let filledChars = ([] as string[]).concat(\n                  new Array(filledIntegerPlaces).fill(fillChar),\n                  integerChars,\n                );\n                if (decimalPlaces > 0) {\n                  filledChars = filledChars.concat(\n                    [decimalSeparator],\n                    decimalChars,\n                    new Array(filledDecimalPlaces).fill(fillChar),\n                  );\n                }\n                return filledChars;\n              }),\n          )\n            /**\n             * 删除连续的重复项\n             */\n            .map((digitList, index, array) => ({\n              data: digitList\n                .filter(\n                  (digit, digitIndex, digitArray) =>\n                    digitIndex === 0 || digit !== digitArray[digitIndex - 1],\n                )\n                .map(digit => digitToChar[digit] ?? digit),\n              place: array.length - index,\n            }));\n\n          result.push({\n            digits: data,\n          });\n        }\n      }\n\n      return result;\n    }\n  }\n\n  return CounterPartsMixinClass as Constructor<CounterPartsMixinInterface<V>> &\n    T;\n};\n"]}

package/dist/src/mixins/counter-styles.d.ts

@@ -0,0 +1,17 @@
+import { Constructor } from 'type-fest';
+import { PartDigitCellGetter, PartDigitCellValue, PartDigitGetter, PartDigitValue, PartGetter, PartValue } from '../types/group.js';
+import { CounterPartsMixin } from './counter-parts.js';
+import { AvailableNumberAdapterValueType } from '../number-adapter/index.js';
+export declare class CounterStylesMixinInterface {
+    cellStyles: PartDigitCellValue<Partial<CSSStyleDeclaration>>;
+    cellStylesDynamic?: PartDigitCellGetter<Partial<CSSStyleDeclaration>>;
+    extractCellStyles(): Partial<CSSStyleDeclaration>[][][];
+    digitStyles: PartDigitValue<Partial<CSSStyleDeclaration>>;
+    digitStylesDynamic?: PartDigitGetter<Partial<CSSStyleDeclaration>>;
+    extractDigitStyles(): Partial<CSSStyleDeclaration>[][];
+    partStyles: PartValue<Partial<CSSStyleDeclaration>>;
+    partStylesDynamic?: PartGetter<Partial<CSSStyleDeclaration>>;
+    extractPartStyles(): Partial<CSSStyleDeclaration>[];
+    color: string;
+}
+export declare const CounterStylesMixin: <V extends AvailableNumberAdapterValueType, T extends ReturnType<typeof CounterPartsMixin<V>> = Constructor<import("./counter-parts.js").CounterPartsMixinInterface<V>> & Constructor<import("./counter-base.js").CounterBaseMixinInterface<V>> & Constructor<import("lit").LitElement>>(superClass: T) => Constructor<CounterStylesMixinInterface> & T;

package/dist/src/mixins/counter-styles.js

@@ -0,0 +1,93 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+import { isDeepEqual } from 'remeda';
+import { extractPartDigitCellOption, extractPartDigitOption, extractPartOption, mergePartDigitCellOption, mergePartDigitOption, mergePartOption, } from '../utils/extract-group-option.js';
+export const CounterStylesMixin = (superClass) => {
+    class CounterStylesMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * 对 `cell` 部分的样式进行设置. 传入的对象将被直接应用到 `cell` 的 `style` 上.
+             * 你还可以使用 `cellStylesDynamic` 来动态设置样式.
+             */
+            this.cellStyles = {};
+            this.cachedCellStyles = [];
+            /**
+             * 与 `cell` 类似, 但是是对 `digit` 部分的样式进行设置.
+             * 你还可以使用 `digitStylesDynamic` 来动态设置样式.
+             */
+            this.digitStyles = {};
+            this.cachedDigitStyles = [];
+            /**
+             * 与 `cell` 类似, 但是是对 `part` 部分的样式进行设置.
+             * 你还可以使用 `partStylesDynamic` 来动态设置样式.
+             */
+            this.partStyles = {};
+            this.cachedPartStyles = [];
+            /**
+             * 文本颜色, 可使用 CSS 属性 `color` 和 `background-image` 的值.
+             *
+             * @default 继承自父元素.
+             *
+             * @example "red" 红色
+             * @example "transparent" 透明
+             * @example "linear-gradient(90deg, red, blue)" 红蓝渐变
+             * @example "url('https://example.com/image.png')" 图片背景
+             */
+            this.color = 'inherit';
+        }
+        extractCellStyles() {
+            const getterOptions = {
+                preprocessData: this.partPreprocessDataList,
+                data: this.parts,
+                direction: this.direction,
+                value: [this.value, this.oldValue],
+            };
+            const result = mergePartDigitCellOption(extractPartDigitCellOption(this.cellStyles ?? {}, getterOptions), extractPartDigitCellOption(this.cellStylesDynamic ?? {}, getterOptions));
+            if (!isDeepEqual(this.cachedCellStyles, result)) {
+                this.cachedCellStyles = result;
+            }
+            return this.cachedCellStyles;
+        }
+        extractDigitStyles() {
+            const getterOptions = {
+                preprocessData: this.partPreprocessDataList,
+                data: this.parts,
+                direction: this.direction,
+                value: [this.value, this.oldValue],
+            };
+            const result = mergePartDigitOption(extractPartDigitOption(this.digitStyles ?? {}, getterOptions), extractPartDigitOption(this.digitStylesDynamic ?? {}, getterOptions));
+            if (!isDeepEqual(this.cachedDigitStyles, result)) {
+                this.cachedDigitStyles = result;
+            }
+            return this.cachedDigitStyles;
+        }
+        extractPartStyles() {
+            const getterOptions = {
+                preprocessData: this.partPreprocessDataList,
+                data: this.parts,
+                direction: this.direction,
+                value: [this.value, this.oldValue],
+            };
+            const result = mergePartOption(extractPartOption(this.partStyles ?? {}, getterOptions), extractPartOption(this.partStylesDynamic ?? {}, getterOptions));
+            if (!isDeepEqual(this.cachedPartStyles, result)) {
+                this.cachedPartStyles = result;
+            }
+            return this.cachedPartStyles;
+        }
+    }
+    __decorate([
+        property({ type: Object, attribute: 'cell-styles', reflect: true })
+    ], CounterStylesMixinClass.prototype, "cellStyles", void 0);
+    __decorate([
+        property({ type: Object, attribute: 'digit-styles', reflect: true })
+    ], CounterStylesMixinClass.prototype, "digitStyles", void 0);
+    __decorate([
+        property({ type: Object, attribute: 'part-styles', reflect: true })
+    ], CounterStylesMixinClass.prototype, "partStyles", void 0);
+    __decorate([
+        property({ type: String, reflect: true })
+    ], CounterStylesMixinClass.prototype, "color", void 0);
+    return CounterStylesMixinClass;
+};
+//# sourceMappingURL=counter-styles.js.map

package/dist/src/mixins/counter-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter-styles.js","sourceRoot":"","sources":["../../../src/mixins/counter-styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { Constructor } from 'type-fest';\nimport { property } from 'lit/decorators.js';\nimport { isDeepEqual } from 'remeda';\nimport {\n  GroupGetterOptions,\n  PartDigitCellGetter,\n  PartDigitCellValue,\n  PartDigitGetter,\n  PartDigitValue,\n  PartGetter,\n  PartValue,\n} from '../types/group.js';\nimport {\n  extractPartDigitCellOption,\n  extractPartDigitOption,\n  extractPartOption,\n  mergePartDigitCellOption,\n  mergePartDigitOption,\n  mergePartOption,\n} from '../utils/extract-group-option.js';\nimport { CounterPartsMixin } from './counter-parts.js';\nimport { AvailableNumberAdapterValueType } from '../number-adapter/index.js';\n\nexport declare class CounterStylesMixinInterface {\n  cellStyles: PartDigitCellValue<Partial<CSSStyleDeclaration>>;\n\n  cellStylesDynamic?: PartDigitCellGetter<Partial<CSSStyleDeclaration>>;\n\n  extractCellStyles(): Partial<CSSStyleDeclaration>[][][];\n\n  digitStyles: PartDigitValue<Partial<CSSStyleDeclaration>>;\n\n  digitStylesDynamic?: PartDigitGetter<Partial<CSSStyleDeclaration>>;\n\n  extractDigitStyles(): Partial<CSSStyleDeclaration>[][];\n\n  partStyles: PartValue<Partial<CSSStyleDeclaration>>;\n\n  partStylesDynamic?: PartGetter<Partial<CSSStyleDeclaration>>;\n\n  extractPartStyles(): Partial<CSSStyleDeclaration>[];\n\n  color: string;\n}\n\nexport const CounterStylesMixin = <\n  V extends AvailableNumberAdapterValueType,\n  T extends ReturnType<typeof CounterPartsMixin<V>> = ReturnType<\n    typeof CounterPartsMixin<V>\n  >,\n>(\n  superClass: T,\n) => {\n  class CounterStylesMixinClass extends superClass {\n    /**\n     * 对 `cell` 部分的样式进行设置. 传入的对象将被直接应用到 `cell` 的 `style` 上.\n     * 你还可以使用 `cellStylesDynamic` 来动态设置样式.\n     */\n    @property({ type: Object, attribute: 'cell-styles', reflect: true })\n    cellStyles: PartDigitCellValue<Partial<CSSStyleDeclaration>> = {};\n\n    cellStylesDynamic?: PartDigitCellGetter<Partial<CSSStyleDeclaration>>;\n\n    private cachedCellStyles: Partial<CSSStyleDeclaration | undefined>[][][] =\n      [];\n\n    extractCellStyles() {\n      const getterOptions: GroupGetterOptions = {\n        preprocessData: this.partPreprocessDataList,\n        data: this.parts,\n        direction: this.direction,\n        value: [this.value, this.oldValue],\n      };\n      const result = mergePartDigitCellOption(\n        extractPartDigitCellOption(this.cellStyles ?? {}, getterOptions),\n        extractPartDigitCellOption(this.cellStylesDynamic ?? {}, getterOptions),\n      );\n\n      if (!isDeepEqual(this.cachedCellStyles, result)) {\n        this.cachedCellStyles = result;\n      }\n\n      return this.cachedCellStyles;\n    }\n\n    /**\n     * 与 `cell` 类似, 但是是对 `digit` 部分的样式进行设置.\n     * 你还可以使用 `digitStylesDynamic` 来动态设置样式.\n     */\n    @property({ type: Object, attribute: 'digit-styles', reflect: true })\n    digitStyles: PartDigitValue<Partial<CSSStyleDeclaration>> = {};\n\n    digitStylesDynamic?: PartDigitGetter<Partial<CSSStyleDeclaration>>;\n\n    private cachedDigitStyles: Partial<CSSStyleDeclaration | undefined>[][] =\n      [];\n\n    extractDigitStyles() {\n      const getterOptions: GroupGetterOptions = {\n        preprocessData: this.partPreprocessDataList,\n        data: this.parts,\n        direction: this.direction,\n        value: [this.value, this.oldValue],\n      };\n      const result = mergePartDigitOption(\n        extractPartDigitOption(this.digitStyles ?? {}, getterOptions),\n        extractPartDigitOption(this.digitStylesDynamic ?? {}, getterOptions),\n      );\n\n      if (!isDeepEqual(this.cachedDigitStyles, result)) {\n        this.cachedDigitStyles = result;\n      }\n\n      return this.cachedDigitStyles;\n    }\n\n    /**\n     * 与 `cell` 类似, 但是是对 `part` 部分的样式进行设置.\n     * 你还可以使用 `partStylesDynamic` 来动态设置样式.\n     */\n    @property({ type: Object, attribute: 'part-styles', reflect: true })\n    partStyles: PartValue<Partial<CSSStyleDeclaration>> = {};\n\n    partStylesDynamic?: PartGetter<Partial<CSSStyleDeclaration>>;\n\n    private cachedPartStyles: Partial<CSSStyleDeclaration | undefined>[] = [];\n\n    extractPartStyles() {\n      const getterOptions: GroupGetterOptions = {\n        preprocessData: this.partPreprocessDataList,\n        data: this.parts,\n        direction: this.direction,\n        value: [this.value, this.oldValue],\n      };\n      const result = mergePartOption(\n        extractPartOption(this.partStyles ?? {}, getterOptions),\n        extractPartOption(this.partStylesDynamic ?? {}, getterOptions),\n      );\n\n      if (!isDeepEqual(this.cachedPartStyles, result)) {\n        this.cachedPartStyles = result;\n      }\n\n      return this.cachedPartStyles;\n    }\n\n    /**\n     * 文本颜色, 可使用 CSS 属性 `color` 和 `background-image` 的值.\n     *\n     * @default 继承自父元素.\n     *\n     * @example \"red\" 红色\n     * @example \"transparent\" 透明\n     * @example \"linear-gradient(90deg, red, blue)\" 红蓝渐变\n     * @example \"url('https://example.com/image.png')\" 图片背景\n     */\n    @property({ type: String, reflect: true })\n    color: string = 'inherit';\n  }\n\n  return CounterStylesMixinClass as Constructor<CounterStylesMixinInterface> &\n    T;\n};\n"]}

package/dist/src/number-adapter/build-in-bigint.d.ts

@@ -0,0 +1,6 @@
+import { NumberAdapter } from "./types.js";
+/**
+ * @deprecated
+ */
+declare const BuildInBigintAdapter: () => NumberAdapter<bigint>;
+export { BuildInBigintAdapter };