timered-counter 0.0.0

package/dist/src/timered-counter-datetime-duration.js

@@ -0,0 +1,186 @@
+import { __decorate } from "tslib";
+import { customElement, property } from 'lit/decorators.js';
+import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { isArray, isDate, isNullish, isString, map } from 'remeda';
+import { isValid, toDate } from 'date-fns';
+import { TimeredCounter } from './timered-counter.js';
+import { DurationPartMillisecond, DurationPartType } from './types/duration.js';
+import { getLocalizedDateTimeFields } from './utils/localized-date-time-fields.js';
+import { duration, durationObject } from './utils/duration.js';
+import { iso8601Duration } from './utils/iso8601-duration.js';
+import { timeredCounterDatetimeStyles } from './styles/timered-counter-datetime-styles.js';
+import { parseJsonString } from './utils/parse-json-string.js';
+/**
+ * 根据最小精度对 from 进行优化. 避免频繁更新.
+ *
+ * 1. from 先会被减小到 minPrecisionMs 的整数倍.
+ * 2. 如果 from 和 to 的差值不是 minPrecisionMs 的整数倍, 则再加上/减去一个 minPrecisionMs 的值. 加上或减去取决于 from 和 to 的谁更大.
+ *    这相当于将 from 中小于 minPrecisionMs 的值舍入到 minPrecisionMs 的整数倍.
+ * 3. 加上 to 余 minPrecisionMs 的值, 保证 from 与 to 的差值是 minPrecisionMs 的整数倍.
+ */
+function optimizeFrom(from, to, minPrecision) {
+    const minPrecisionMs = DurationPartMillisecond[minPrecision];
+    const fromTS = from.getTime();
+    const toTS = to.getTime();
+    const base = fromTS - (fromTS % minPrecisionMs);
+    const offset = Math.abs(toTS - fromTS) % minPrecisionMs;
+    return (base +
+        (offset > 0 ? (fromTS < toTS ? -1 : 1) * minPrecisionMs : 0) +
+        // 加上 deadlineDate 的余数, 消除精度误差.
+        (toTS % minPrecisionMs));
+}
+let TimeredCounterDatetimeDuration = class TimeredCounterDatetimeDuration extends TimeredCounter {
+    constructor() {
+        super(...arguments);
+        this.__precision = [DurationPartType.Second, DurationPartType.Day];
+        this.__from = new Date();
+        this.__to = new Date();
+        this.__durationInMilliseconds = 0;
+        this.__minPrecision = DurationPartType.Second;
+        this.__maxPrecision = DurationPartType.Day;
+        this.__availableDurationParts = [];
+        this.__dateTimeFieldLabels = {};
+    }
+    /**
+     * 计数器显示的精度.
+     * 1. 当为单个值时, 表示最小精度.
+     * 2. 当为数组时, 第一个值表示最小精度, 第二个值表示最大精度.
+     *
+     * @default [DurationPartType.Second, DurationPartType.Day]
+     *
+     * @example DurationPartType.Second 显示从年份到秒数的所有精度.
+     * @example [DurationPartType.Second, DurationPartType.Day] 显示从天数到秒数的所有精度.
+     * @example [DurationPartType.Millisecond, DurationPartType.Year] 显示从年份到毫秒的所有精度.
+     */
+    get precision() {
+        return this.__precision;
+    }
+    set precision(value) {
+        if (isString(value))
+            value = parseJsonString(value);
+        this.__precision = value;
+    }
+    get value() {
+        return super.value;
+    }
+    /**
+     * 通过 property 设置 value 时, 支持 Date 类型.
+     */
+    set value(value) {
+        if (isString(value))
+            value = parseJsonString(value);
+        if (!isArray(value))
+            value = [value, value];
+        this.__from = isDate(value[0]) ? value[0] : toDate(value[0]);
+        this.__to = isDate(value[1]) ? value[1] : toDate(value[1]);
+        if (!isValid(this.__from) || !isValid(this.__to)) {
+            throw new Error(`value ${value[0]} or ${value[1]} is not a valid date.`);
+        }
+        this.__durationInMilliseconds = Math.abs(this.__to.getTime() -
+            optimizeFrom(this.__from, this.__to, this.__minPrecision));
+        super.value = this.__durationInMilliseconds;
+    }
+    sampleSplit(samples) {
+        const availableDurationPartTypes = map(this.__availableDurationParts, part => part.type);
+        const tempParts = availableDurationPartTypes.map(() => []);
+        for (const n of samples) {
+            const num = this.numberAdapter.toNumber(n);
+            /**
+             * 计算并保存每个在 {@link precision} 范围内的时间部分的值
+             */
+            const availablePartValues = duration(new Date(Math.min(num, 0)), new Date(Math.max(num, 0)), availableDurationPartTypes);
+            availablePartValues.forEach((value, i) => tempParts[i].push(value));
+        }
+        return tempParts;
+    }
+    generateAriaLabel() {
+        return iso8601Duration(durationObject(new Date(Math.min(this.__durationInMilliseconds, 0)), new Date(Math.max(this.__durationInMilliseconds, 0)), map(this.__availableDurationParts, part => part.type)));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = 'timer';
+    }
+    render() {
+        const cellStyles = this.extractCellStyles();
+        const digitStyles = this.extractDigitStyles();
+        const partStyles = this.extractPartStyles();
+        const animationOptions = this.extractAnimationOptions();
+        const keyframes = this.extractKeyframes();
+        const availableDurationPartTypes = map(this.__availableDurationParts, part => part.type);
+        return html `
+      <timered-counter-roller
+        class="timered-counter timered-counter-datetime-duration"
+        exportparts="prefix, suffix, part-suffix"
+        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 `<span slot=${`part-suffix-${partIndex}`} class="duration-unit"
+              >${this.__dateTimeFieldLabels[availableDurationPartTypes[partIndex]]}</span
+            >`)}
+      </timered-counter-roller>
+    `;
+    }
+    willUpdate(_changedProperties) {
+        /**
+         * precision 相关属性的更新需要在 super.willUpdate 之前进行, 以便在 super.willUpdate 中使用到.
+         *
+         * __availableDurationParts 在 sampleSplit 中使用到, 而 sampleSplit 又会在 super.willUpdate 中使用(准确来说是 `CounterPartsMixinClass`).
+         * 所以需要在 super.willUpdate 之前更新.
+         */
+        if (_changedProperties.has('precision')) {
+            this.__minPrecision = isArray(this.precision)
+                ? this.precision[0]
+                : this.precision;
+            this.__maxPrecision = isArray(this.precision)
+                ? this.precision[1]
+                : this.precision;
+            this.__availableDurationParts = Object.values(DurationPartType)
+                .reverse()
+                .map(type => {
+                const minPrecisionBreakpoint = DurationPartMillisecond[this.__minPrecision];
+                const maxPrecisionBreakpoint = DurationPartMillisecond[this.__maxPrecision];
+                const partMilliseconds = DurationPartMillisecond[type];
+                return {
+                    type,
+                    available: partMilliseconds >= minPrecisionBreakpoint &&
+                        partMilliseconds <= maxPrecisionBreakpoint,
+                };
+            })
+                .filter(part => part.available);
+        }
+        super.willUpdate(_changedProperties);
+        if (_changedProperties.has('locale')) {
+            this.__dateTimeFieldLabels = getLocalizedDateTimeFields(this.localeInstance);
+        }
+    }
+};
+TimeredCounterDatetimeDuration.styles = [...TimeredCounter.styles, timeredCounterDatetimeStyles];
+__decorate([
+    property({
+        reflect: true,
+        converter: value => {
+            if (isNullish(value))
+                return value;
+            return parseJsonString(value);
+        },
+    })
+], TimeredCounterDatetimeDuration.prototype, "precision", null);
+TimeredCounterDatetimeDuration = __decorate([
+    customElement('timered-counter-datetime-duration')
+], TimeredCounterDatetimeDuration);
+export { TimeredCounterDatetimeDuration };
+//# sourceMappingURL=timered-counter-datetime-duration.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timered-counter-datetime-duration.js","sourceRoot":"","sources":["../../src/timered-counter-datetime-duration.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property } from 'lit/decorators.js';\nimport { html, PropertyValues } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { isArray, isDate, isNullish, isString, map } from 'remeda';\nimport { isValid, toDate } from 'date-fns';\nimport { TimeredCounter } from './timered-counter.js';\nimport { AvailableNumberAdapterValueType } from './number-adapter/index.js';\nimport { DurationPartMillisecond, DurationPartType } from './types/duration.js';\nimport { getLocalizedDateTimeFields } from './utils/localized-date-time-fields.js';\nimport { duration, durationObject } from './utils/duration.js';\nimport { iso8601Duration } from './utils/iso8601-duration.js';\nimport { timeredCounterDatetimeStyles } from './styles/timered-counter-datetime-styles.js';\nimport { parseJsonString } from './utils/parse-json-string.js';\n\n/**\n * 根据最小精度对 from 进行优化. 避免频繁更新.\n *\n * 1. from 先会被减小到 minPrecisionMs 的整数倍.\n * 2. 如果 from 和 to 的差值不是 minPrecisionMs 的整数倍, 则再加上/减去一个 minPrecisionMs 的值. 加上或减去取决于 from 和 to 的谁更大.\n *    这相当于将 from 中小于 minPrecisionMs 的值舍入到 minPrecisionMs 的整数倍.\n * 3. 加上 to 余 minPrecisionMs 的值, 保证 from 与 to 的差值是 minPrecisionMs 的整数倍.\n */\nfunction optimizeFrom(from: Date, to: Date, minPrecision: DurationPartType) {\n  const minPrecisionMs = DurationPartMillisecond[minPrecision];\n  const fromTS = from.getTime();\n  const toTS = to.getTime();\n\n  const base = fromTS - (fromTS % minPrecisionMs);\n  const offset = Math.abs(toTS - fromTS) % minPrecisionMs;\n\n  return (\n    base +\n    (offset > 0 ? (fromTS < toTS ? -1 : 1) * minPrecisionMs : 0) +\n    // 加上 deadlineDate 的余数, 消除精度误差.\n    (toTS % minPrecisionMs)\n  );\n}\n\n@customElement('timered-counter-datetime-duration')\nexport class TimeredCounterDatetimeDuration extends TimeredCounter {\n  static styles = [...TimeredCounter.styles, timeredCounterDatetimeStyles];\n\n  private __precision: DurationPartType | [DurationPartType, DurationPartType] =\n    [DurationPartType.Second, DurationPartType.Day];\n\n  /**\n   * 计数器显示的精度.\n   * 1. 当为单个值时, 表示最小精度.\n   * 2. 当为数组时, 第一个值表示最小精度, 第二个值表示最大精度.\n   *\n   * @default [DurationPartType.Second, DurationPartType.Day]\n   *\n   * @example DurationPartType.Second 显示从年份到秒数的所有精度.\n   * @example [DurationPartType.Second, DurationPartType.Day] 显示从天数到秒数的所有精度.\n   * @example [DurationPartType.Millisecond, DurationPartType.Year] 显示从年份到毫秒的所有精度.\n   */\n  @property({\n    reflect: true,\n    converter: value => {\n      if (isNullish(value)) return value;\n\n      return parseJsonString(value);\n    },\n  })\n  get precision() {\n    return this.__precision;\n  }\n\n  set precision(value: any) {\n    if (isString(value)) value = parseJsonString(value);\n\n    this.__precision = value;\n  }\n\n  get value() {\n    return super.value;\n  }\n\n  /**\n   * 通过 property 设置 value 时, 支持 Date 类型.\n   */\n  set value(value: any) {\n    if (isString(value)) value = parseJsonString(value);\n\n    if (!isArray(value)) value = [value, value];\n\n    this.__from = isDate(value[0]) ? value[0] : toDate(value[0]);\n    this.__to = isDate(value[1]) ? value[1] : toDate(value[1]);\n    if (!isValid(this.__from) || !isValid(this.__to)) {\n      throw new Error(`value ${value[0]} or ${value[1]} is not a valid date.`);\n    }\n\n    this.__durationInMilliseconds = Math.abs(\n      this.__to.getTime() -\n        optimizeFrom(this.__from, this.__to, this.__minPrecision),\n    );\n\n    super.value = this.__durationInMilliseconds;\n  }\n\n  private __from: Date = new Date();\n\n  private __to: Date = new Date();\n\n  private __durationInMilliseconds = 0;\n\n  private __minPrecision: DurationPartType = DurationPartType.Second;\n\n  private __maxPrecision: DurationPartType = DurationPartType.Day;\n\n  private __availableDurationParts = [] as {\n    type: DurationPartType;\n    available: boolean;\n  }[];\n\n  private __dateTimeFieldLabels = {} as Record<DurationPartType, string>;\n\n  override sampleSplit(\n    samples: AvailableNumberAdapterValueType[],\n  ): AvailableNumberAdapterValueType[][] {\n    const availableDurationPartTypes = map(\n      this.__availableDurationParts,\n      part => part.type,\n    );\n\n    const tempParts = availableDurationPartTypes.map(() => [] as number[]);\n    for (const n of samples) {\n      const num = this.numberAdapter.toNumber(n);\n      /**\n       * 计算并保存每个在 {@link precision} 范围内的时间部分的值\n       */\n      const availablePartValues = duration(\n        new Date(Math.min(num, 0)),\n        new Date(Math.max(num, 0)),\n        availableDurationPartTypes,\n      );\n      availablePartValues.forEach((value, i) => tempParts[i].push(value));\n    }\n\n    return tempParts;\n  }\n\n  override generateAriaLabel(): string {\n    return iso8601Duration(\n      durationObject(\n        new Date(Math.min(this.__durationInMilliseconds, 0)),\n        new Date(Math.max(this.__durationInMilliseconds, 0)),\n        map(this.__availableDurationParts, part => part.type),\n      ),\n    );\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.role = 'timer';\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    const availableDurationPartTypes = map(\n      this.__availableDurationParts,\n      part => part.type,\n    );\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`<span slot=${`part-suffix-${partIndex}`} class=\"duration-unit\"\n              >${this.__dateTimeFieldLabels[\n                availableDurationPartTypes[partIndex]\n              ]}</span\n            >`,\n        )}\n      </timered-counter-roller>\n    `;\n  }\n\n  override willUpdate(_changedProperties: PropertyValues) {\n    /**\n     * precision 相关属性的更新需要在 super.willUpdate 之前进行, 以便在 super.willUpdate 中使用到.\n     *\n     * __availableDurationParts 在 sampleSplit 中使用到, 而 sampleSplit 又会在 super.willUpdate 中使用(准确来说是 `CounterPartsMixinClass`).\n     * 所以需要在 super.willUpdate 之前更新.\n     */\n    if (_changedProperties.has('precision')) {\n      this.__minPrecision = isArray(this.precision)\n        ? this.precision[0]\n        : this.precision;\n      this.__maxPrecision = isArray(this.precision)\n        ? this.precision[1]\n        : this.precision;\n\n      this.__availableDurationParts = Object.values(DurationPartType)\n        .reverse()\n        .map(type => {\n          const minPrecisionBreakpoint =\n            DurationPartMillisecond[this.__minPrecision];\n          const maxPrecisionBreakpoint =\n            DurationPartMillisecond[this.__maxPrecision];\n          const partMilliseconds = DurationPartMillisecond[type];\n          return {\n            type,\n            available:\n              partMilliseconds >= minPrecisionBreakpoint &&\n              partMilliseconds <= maxPrecisionBreakpoint,\n          };\n        })\n        .filter(part => part.available);\n    }\n\n    super.willUpdate(_changedProperties);\n\n    if (_changedProperties.has('locale')) {\n      this.__dateTimeFieldLabels = getLocalizedDateTimeFields(\n        this.localeInstance,\n      );\n    }\n  }\n}\n"]}

package/dist/src/timered-counter-number.d.ts

@@ -0,0 +1,23 @@
+import { PropertyValues } from 'lit';
+import { TimeredCounter } from './timered-counter.js';
+import { AvailableNumberAdapterValueType } from './number-adapter/index.js';
+export declare class TimeredCounterNumber extends TimeredCounter {
+    static styles: import("lit").CSSResult[];
+    /**
+     * 本地化数字格式化配置. 传入 `true` 时使用浏览器的默认配置.
+     *
+     * 详细配置参数请参考 [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)
+     *
+     * @default false
+     */
+    localeNumber: Intl.NumberFormatOptions | boolean;
+    localeNumberInstance: Intl.NumberFormat;
+    /**
+     * 本地化数字格式化配置中的小数点分隔符. 根据不同的地区可能是 `.` 或 `,`.
+     * @see https://en.wikipedia.org/wiki/Decimal_separator
+     */
+    localDecimalSeparator: string;
+    sampleToString(value: AvailableNumberAdapterValueType): string;
+    render(): import("lit-html").TemplateResult<1>;
+    willUpdate(_changedProperties: PropertyValues<this>): void;
+}

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

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

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

@@ -0,0 +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"]}

package/dist/src/timered-counter-string.d.ts

@@ -0,0 +1,30 @@
+import { PropertyValues } from 'lit';
+import { TimeredCounter } from './timered-counter.js';
+import { PartsOptions } from './mixins/counter-parts.js';
+import { AvailableNumberAdapterValueType } from './number-adapter/index.js';
+export declare class TimeredCounterString extends TimeredCounter {
+    static styles: import("lit").CSSResult[];
+    private __alphabet;
+    private __initialValueString;
+    get initialValue(): any;
+    set initialValue(value: any);
+    private __valueString;
+    get value(): any;
+    /**
+     * 通过 property 设置 value 时, 支持任意字符串.
+     */
+    set value(value: any);
+    private __partsOptions;
+    get partsOptions(): Partial<PartsOptions>;
+    set partsOptions(value: Partial<PartsOptions>);
+    /**
+     * 根据 `value`, `initialValue`, `oldValue` 更新字符集.
+     * @private
+     */
+    private __updateAlphabet;
+    private __decimalToAnyBase;
+    private __anyBaseToDecimal;
+    sampleToString(value: AvailableNumberAdapterValueType): string;
+    connectedCallback(): void;
+    firstUpdated(_changedProperties: PropertyValues<this>): void;
+}

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

@@ -0,0 +1,138 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { isEmpty, isString } from 'remeda';
+import { TimeredCounter } from './timered-counter.js';
+import { timeredCounterStringStyles } from './styles/timered-counter-string-styles.js';
+import { anyBase } from './utils/any-base.js';
+/**
+ * 替换一些特定的字符.
+ * 1. " ": 空格字符在 HTML 中会被忽略导致无法计算字符宽度, 使用 \xa0 替换.
+ */
+const REPLACED_CHARS = {
+    ' ': '\xa0', //  
+};
+let TimeredCounterString = class TimeredCounterString extends TimeredCounter {
+    constructor() {
+        super(...arguments);
+        // /**
+        //  * 自定义字符集, 传入的 `value` 的字符串表示形式的每个字符都**必须**被包含在该字符集中.
+        //  *
+        //  * @default `value` 的去重字符集.
+        //  */
+        // @property({
+        //   reflect: true,
+        // })
+        this.__alphabet = '';
+        this.__initialValueString = '';
+        this.__valueString = '';
+        this.__partsOptions = null;
+        this.__decimalToAnyBase = anyBase(this.stringAdapter, '0123456789', this.__alphabet);
+        this.__anyBaseToDecimal = anyBase(this.stringAdapter, this.__alphabet, '0123456789');
+    }
+    get initialValue() {
+        return super.initialValue;
+    }
+    set initialValue(value) {
+        if (!isString(value)) {
+            try {
+                value = value.toString();
+            }
+            catch (error) {
+                throw new Error(`value ${value} is not a string.`);
+            }
+        }
+        this.__initialValueString = value ?? '';
+        if (isEmpty(this.__alphabet) || isEmpty(this.__initialValueString)) {
+            super.initialValue = this.numberAdapter.create(0);
+            return;
+        }
+        super.initialValue = this.numberAdapter.create(this.__anyBaseToDecimal(value));
+    }
+    get value() {
+        return super.value;
+    }
+    /**
+     * 通过 property 设置 value 时, 支持任意字符串.
+     */
+    set value(value) {
+        if (!isString(value)) {
+            try {
+                value = value.toString();
+            }
+            catch (error) {
+                throw new Error(`value ${value} is not a string.`);
+            }
+        }
+        else if (this.__valueString === value) {
+            return;
+        }
+        this.__valueString = value ?? '';
+        if (isEmpty(this.__valueString)) {
+            super.value = this.numberAdapter.create(0);
+            return;
+        }
+        const oldValueString = isEmpty(this.__alphabet)
+            ? ''
+            : this.__decimalToAnyBase(this.numberAdapter.toString(this.value));
+        this.__updateAlphabet(this.__valueString, oldValueString);
+        super.value = this.numberAdapter.create(this.__anyBaseToDecimal(this.__valueString));
+    }
+    get partsOptions() {
+        return super.partsOptions;
+    }
+    set partsOptions(value) {
+        this.__partsOptions = value;
+        super.partsOptions = {
+            type: 'string',
+            fillChar: REPLACED_CHARS[' '],
+            ...this.__partsOptions,
+            digitToChar: {
+                ' ': REPLACED_CHARS[' '],
+                ...this.__partsOptions.digitToChar,
+            },
+        };
+    }
+    /**
+     * 根据 `value`, `initialValue`, `oldValue` 更新字符集.
+     * @private
+     */
+    __updateAlphabet(value, oldValue) {
+        const allChars = isEmpty(value) && isEmpty(oldValue)
+            ? ''
+            : `\x00${oldValue ?? ''}${value ?? ''}`;
+        const charSet = new Set(this.stringAdapter.stringToChars(allChars));
+        // if (charSet.size < 10) {
+        //   for (let i = 0; i < 10; i++) {
+        //     charSet.add(i.toString());
+        //     if (charSet.size >= 10) break;
+        //   }
+        // }
+        this.__alphabet = Array.from(charSet).sort().join('');
+        const sa = this.stringAdapter;
+        const alphabet = this.__alphabet;
+        this.__decimalToAnyBase = anyBase(sa, '0123456789', alphabet);
+        this.__anyBaseToDecimal = anyBase(sa, alphabet, '0123456789');
+    }
+    sampleToString(value) {
+        return this.__decimalToAnyBase(this.numberAdapter.toString(value));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.__updateAlphabet(this.__valueString, this.__initialValueString);
+        this.initialValue = this.__initialValueString;
+        this.value = this.__valueString;
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        /**
+         * TimeredCounterString 有自定义的 `fillChar` 和 `digitToChar`. 实例化时需要手动触发 `partsOptions` 的 setter.
+         */
+        this.partsOptions = this.__partsOptions ?? {};
+    }
+};
+TimeredCounterString.styles = [...TimeredCounter.styles, timeredCounterStringStyles];
+TimeredCounterString = __decorate([
+    customElement('timered-counter-string')
+], TimeredCounterString);
+export { TimeredCounterString };
+//# sourceMappingURL=timered-counter-string.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timered-counter-string.js","sourceRoot":"","sources":["../../src/timered-counter-string.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { PropertyValues } from 'lit';\nimport { isEmpty, isString } from 'remeda';\nimport { TimeredCounter } from './timered-counter.js';\nimport { timeredCounterStringStyles } from './styles/timered-counter-string-styles.js';\nimport { anyBase } from './utils/any-base.js';\nimport { PartsOptions } from './mixins/counter-parts.js';\nimport { AvailableNumberAdapterValueType } from './number-adapter/index.js';\n\n/**\n * 替换一些特定的字符.\n * 1. \" \": 空格字符在 HTML 中会被忽略导致无法计算字符宽度, 使用 \\xa0 替换.\n */\nconst REPLACED_CHARS: Record<string, string> = {\n  ' ': '\\xa0', // &nbsp;\n};\n\n@customElement('timered-counter-string')\nexport class TimeredCounterString extends TimeredCounter {\n  static styles = [...TimeredCounter.styles, timeredCounterStringStyles];\n\n  // /**\n  //  * 自定义字符集, 传入的 `value` 的字符串表示形式的每个字符都**必须**被包含在该字符集中.\n  //  *\n  //  * @default `value` 的去重字符集.\n  //  */\n  // @property({\n  //   reflect: true,\n  // })\n  private __alphabet: string = '';\n\n  private __initialValueString = '';\n\n  get initialValue() {\n    return super.initialValue;\n  }\n\n  set initialValue(value: any) {\n    if (!isString(value)) {\n      try {\n        value = value.toString();\n      } catch (error) {\n        throw new Error(`value ${value} is not a string.`);\n      }\n    }\n\n    this.__initialValueString = value ?? '';\n\n    if (isEmpty(this.__alphabet) || isEmpty(this.__initialValueString)) {\n      super.initialValue = this.numberAdapter.create(0);\n      return;\n    }\n\n    super.initialValue = this.numberAdapter.create(\n      this.__anyBaseToDecimal(value),\n    );\n  }\n\n  private __valueString = '';\n\n  get value() {\n    return super.value;\n  }\n\n  /**\n   * 通过 property 设置 value 时, 支持任意字符串.\n   */\n  set value(value: any) {\n    if (!isString(value)) {\n      try {\n        value = value.toString();\n      } catch (error) {\n        throw new Error(`value ${value} is not a string.`);\n      }\n    } else if (this.__valueString === value) {\n      return;\n    }\n\n    this.__valueString = value ?? '';\n\n    if (isEmpty(this.__valueString)) {\n      super.value = this.numberAdapter.create(0);\n      return;\n    }\n\n    const oldValueString = isEmpty(this.__alphabet)\n      ? ''\n      : this.__decimalToAnyBase(this.numberAdapter.toString(this.value));\n\n    this.__updateAlphabet(this.__valueString, oldValueString);\n\n    super.value = this.numberAdapter.create(\n      this.__anyBaseToDecimal(this.__valueString),\n    );\n  }\n\n  private __partsOptions: Partial<PartsOptions> | null = null;\n\n  get partsOptions(): Partial<PartsOptions> {\n    return super.partsOptions;\n  }\n\n  set partsOptions(value: Partial<PartsOptions>) {\n    this.__partsOptions = value;\n    super.partsOptions = {\n      type: 'string',\n      fillChar: REPLACED_CHARS[' '],\n      ...this.__partsOptions,\n      digitToChar: {\n        ' ': REPLACED_CHARS[' '],\n        ...this.__partsOptions.digitToChar,\n      },\n    };\n  }\n\n  /**\n   * 根据 `value`, `initialValue`, `oldValue` 更新字符集.\n   * @private\n   */\n  private __updateAlphabet(value: string, oldValue: string) {\n    const allChars =\n      isEmpty(value) && isEmpty(oldValue)\n        ? ''\n        : `\\x00${oldValue ?? ''}${value ?? ''}`;\n\n    const charSet = new Set(this.stringAdapter.stringToChars(allChars));\n    // if (charSet.size < 10) {\n    //   for (let i = 0; i < 10; i++) {\n    //     charSet.add(i.toString());\n    //     if (charSet.size >= 10) break;\n    //   }\n    // }\n\n    this.__alphabet = Array.from(charSet).sort().join('');\n\n    const sa = this.stringAdapter;\n    const alphabet = this.__alphabet;\n\n    this.__decimalToAnyBase = anyBase(sa, '0123456789', alphabet);\n    this.__anyBaseToDecimal = anyBase(sa, alphabet, '0123456789');\n  }\n\n  private __decimalToAnyBase = anyBase(\n    this.stringAdapter,\n    '0123456789',\n    this.__alphabet,\n  );\n\n  private __anyBaseToDecimal = anyBase(\n    this.stringAdapter,\n    this.__alphabet,\n    '0123456789',\n  );\n\n  override sampleToString(value: AvailableNumberAdapterValueType): string {\n    return this.__decimalToAnyBase(this.numberAdapter.toString(value));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.__updateAlphabet(this.__valueString, this.__initialValueString);\n    this.initialValue = this.__initialValueString;\n    this.value = this.__valueString;\n  }\n\n  override firstUpdated(_changedProperties: PropertyValues<this>) {\n    super.firstUpdated(_changedProperties);\n\n    /**\n     * TimeredCounterString 有自定义的 `fillChar` 和 `digitToChar`. 实例化时需要手动触发 `partsOptions` 的 setter.\n     */\n    this.partsOptions = this.__partsOptions ?? {};\n  }\n}\n"]}

package/dist/src/timered-counter.d.ts

@@ -0,0 +1,15 @@
+import { LitElement, PropertyValues } from 'lit';
+import './transitions/roller/index.js';
+declare const TimeredCounter_base: import("type-fest").Constructor<import("./mixins/counter-aira.js").CounterAiraMixinInterface> & import("type-fest").Constructor<import("./mixins/counter-animation.js").CounterAnimationMixinInterface> & import("type-fest").Constructor<import("./mixins/counter-styles.js").CounterStylesMixinInterface> & import("type-fest").Constructor<import("./mixins/counter-parts.js").CounterPartsMixinInterface<import("./number-adapter/types.js").AvailableNumberAdapterValueType>> & import("type-fest").Constructor<import("./mixins/counter-base.js").CounterBaseMixinInterface<import("./number-adapter/types.js").AvailableNumberAdapterValueType>> & typeof LitElement;
+export declare class TimeredCounter extends TimeredCounter_base {
+    static styles: import("lit").CSSResult[];
+    resizeObserver: ResizeObserver;
+    partsContainerRect: DOMRect | undefined;
+    partsContainer: HTMLElement | undefined;
+    constructor();
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    dispatchTimeredCounterAnimationStart(): void;
+    dispatchTimeredCounterAnimationEnd(): void;
+}
+export {};