timered-counter 1.2.0 → 1.3.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +264 -64
- package/dist/custom-elements.json +264 -64
- package/dist/src/index.d.ts +2 -0
- package/dist/src/index.js +9 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/timered-counter-adapter.d.ts +2 -1
- package/dist/src/timered-counter-adapter.js +4 -1
- package/dist/src/timered-counter-adapter.js.map +1 -1
- package/dist/src/timered-counter-datetime-duration.js +5 -7
- package/dist/src/timered-counter-datetime-duration.js.map +1 -1
- package/dist/src/timered-counter-number.js +5 -7
- package/dist/src/timered-counter-number.js.map +1 -1
- package/dist/src/timered-counter-string.js +4 -8
- package/dist/src/timered-counter-string.js.map +1 -1
- package/dist/src/timered-counter.js +5 -7
- package/dist/src/timered-counter.js.map +1 -1
- package/dist/src/transitions/roller/roller-digit.js +5 -7
- package/dist/src/transitions/roller/roller-digit.js.map +1 -1
- package/dist/src/transitions/roller/roller.js +5 -7
- package/dist/src/transitions/roller/roller.js.map +1 -1
- package/dist/src/utils/grace-define-custom-element.d.ts +1 -0
- package/dist/src/utils/grace-define-custom-element.js +10 -0
- package/dist/src/utils/grace-define-custom-element.js.map +1 -0
- package/dist/src/wrappers/vue/format-props.d.ts +1 -0
- package/dist/src/wrappers/vue/format-props.js +22 -0
- package/dist/src/wrappers/vue/format-props.js.map +1 -0
- package/dist/src/wrappers/vue/index.d.ts +14 -0
- package/dist/src/wrappers/vue/index.js +13 -0
- package/dist/src/wrappers/vue/index.js.map +1 -0
- package/dist/src/wrappers/vue/timered-counter-datetime-duration.d.ts +14 -0
- package/dist/src/wrappers/vue/timered-counter-datetime-duration.js +39 -0
- package/dist/src/wrappers/vue/timered-counter-datetime-duration.js.map +1 -0
- package/dist/src/wrappers/vue/timered-counter-number.d.ts +14 -0
- package/dist/src/wrappers/vue/timered-counter-number.js +39 -0
- package/dist/src/wrappers/vue/timered-counter-number.js.map +1 -0
- package/dist/src/wrappers/vue/timered-counter-string.d.ts +14 -0
- package/dist/src/wrappers/vue/timered-counter-string.js +38 -0
- package/dist/src/wrappers/vue/timered-counter-string.js.map +1 -0
- package/dist/stories/timered-counter/decimaljs.stories.js +1 -1
- package/dist/stories/timered-counter/decimaljs.stories.js.map +1 -1
- package/dist/stories/timered-counter-number/decimaljs.stories.js +1 -1
- package/dist/stories/timered-counter-number/decimaljs.stories.js.map +1 -1
- package/dist/stories/timered-counter-string/decimaljs.stories.js +1 -1
- package/dist/stories/timered-counter-string/decimaljs.stories.js.map +1 -1
- package/dist/stories/timered-counter-string/grapheme-splitter.stories.js +2 -2
- package/dist/stories/timered-counter-string/grapheme-splitter.stories.js.map +1 -1
- package/dist/stories/timered-counter-string/intl-segmenter.stories.js +1 -1
- package/dist/stories/timered-counter-string/intl-segmenter.stories.js.map +1 -1
- package/dist/timered-counter.esm-browser.js +53 -58
- package/dist/timered-counter.esm-browser.js.map +1 -1
- package/dist/timered-counter.global.js +47 -52
- package/dist/timered-counter.global.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +20 -2
|
@@ -1 +1 @@
|
|
|
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, isBefore } 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';\nimport { PartsOptions } from './mixins/counter-parts.js';\n\n/**\n * 根据最小精度对 from 进行优化. 避免频繁更新.\n *\n * 1. from 先会被减小到 minPrecisionMs 的整数倍.\n * 2. 加上 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\n return base + (toTS % minPrecisionMs);\n}\n\nfunction toDurationInMilliseconds(value: any, minPrecision: DurationPartType) {\n if (isString(value)) value = parseJsonString(value);\n\n if (!isArray(value)) value = [value, value];\n\n const result = [\n isDate(value[0]) ? value[0] : toDate(value[0]),\n isDate(value[1]) ? value[1] : toDate(value[1]),\n ] as const;\n\n if (!isValid(result[0]) || !isValid(result[1])) {\n throw new Error(`value ${value[0]} or ${value[1]} is not a valid date.`);\n }\n\n const durationInMilliseconds = Math.abs(\n result[1].getTime() - optimizeFrom(result[0], result[1], minPrecision),\n );\n\n return {\n durationInMilliseconds,\n from: result[0],\n to: result[1],\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 * `precision` 相关属性的更新需要立即更新, 以便于在 `value`, `initialValue` 等属性的 setter 中使用.\n */\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 get value() {\n return super.value;\n }\n\n /**\n * 通过 property 设置 value 时, 支持 Date 类型.\n */\n set value(value: any) {\n const { from, to, durationInMilliseconds } = toDurationInMilliseconds(\n value,\n this.__minPrecision,\n );\n\n this.__from = from;\n this.__to = to;\n super.value = durationInMilliseconds;\n }\n\n private __initialValuePlain: any = null;\n\n get initialValue() {\n return super.initialValue;\n }\n\n /**\n * 同 value\n */\n set initialValue(value: any) {\n this.__initialValuePlain = value;\n\n const { durationInMilliseconds } = toDurationInMilliseconds(\n value,\n this.__minPrecision,\n );\n super.initialValue = durationInMilliseconds;\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 minPlaces: [2, undefined],\n ...this.__partsOptions,\n };\n }\n\n private __from: Date = new Date();\n\n private __to: Date = new Date();\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 isBefore(this.__from, this.__to) ? this.__from : this.__to,\n isBefore(this.__from, this.__to) ? this.__to : this.__from,\n map(this.__availableDurationParts, part => part.type),\n ),\n );\n }\n\n override connectedCallback() {\n this.role = 'timer';\n\n /**\n * TimeredCounterDatetimeDuration 将 `minPlaces` 默认设置为 `[2]`. 实例化时需要手动触发 `partsOptions` 的 setter.\n */\n this.partsOptions = this.__partsOptions ?? {};\n\n this.initialValue = this.__initialValuePlain;\n\n /**\n * 类似上方的 partsOptions, precision 也需要在初始化时手动触发 setter. 以此确保 __minPrecision, __maxPrecision, __availableDurationParts 有值.\n */\n this.precision = this.__precision;\n\n super.connectedCallback();\n }\n\n override shouldRebuildParts(\n changedProperties: PropertyValues<this>,\n ): boolean {\n return (\n super.shouldRebuildParts(changedProperties) ||\n changedProperties.has('precision')\n );\n }\n\n override willUpdate(_changedProperties: PropertyValues) {\n super.willUpdate(_changedProperties);\n\n if (_changedProperties.has('locale')) {\n this.__dateTimeFieldLabels = getLocalizedDateTimeFields(\n this.localeInstance,\n );\n }\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=\"group, part, digit, cell, prefix, suffix, part-suffix\"\n part=\"group\"\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 ><slot name=\"prefix\" slot=\"prefix\"></slot\n ><slot name=\"suffix\" slot=\"suffix\"></slot>${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"]}
|
|
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 { 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, isBefore } 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';\nimport { PartsOptions } from './mixins/counter-parts.js';\nimport { graceDefineCustomElement } from './utils/grace-define-custom-element.js';\n\n/**\n * 根据最小精度对 from 进行优化. 避免频繁更新.\n *\n * 1. from 先会被减小到 minPrecisionMs 的整数倍.\n * 2. 加上 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\n return base + (toTS % minPrecisionMs);\n}\n\nfunction toDurationInMilliseconds(value: any, minPrecision: DurationPartType) {\n if (isString(value)) value = parseJsonString(value);\n\n if (!isArray(value)) value = [value, value];\n\n const result = [\n isDate(value[0]) ? value[0] : toDate(value[0]),\n isDate(value[1]) ? value[1] : toDate(value[1]),\n ] as const;\n\n if (!isValid(result[0]) || !isValid(result[1])) {\n throw new Error(`value ${value[0]} or ${value[1]} is not a valid date.`);\n }\n\n const durationInMilliseconds = Math.abs(\n result[1].getTime() - optimizeFrom(result[0], result[1], minPrecision),\n );\n\n return {\n durationInMilliseconds,\n from: result[0],\n to: result[1],\n };\n}\n\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 * `precision` 相关属性的更新需要立即更新, 以便于在 `value`, `initialValue` 等属性的 setter 中使用.\n */\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 get value() {\n return super.value;\n }\n\n /**\n * 通过 property 设置 value 时, 支持 Date 类型.\n */\n set value(value: any) {\n const { from, to, durationInMilliseconds } = toDurationInMilliseconds(\n value,\n this.__minPrecision,\n );\n\n this.__from = from;\n this.__to = to;\n super.value = durationInMilliseconds;\n }\n\n private __initialValuePlain: any = null;\n\n get initialValue() {\n return super.initialValue;\n }\n\n /**\n * 同 value\n */\n set initialValue(value: any) {\n this.__initialValuePlain = value;\n\n const { durationInMilliseconds } = toDurationInMilliseconds(\n value,\n this.__minPrecision,\n );\n super.initialValue = durationInMilliseconds;\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 minPlaces: [2, undefined],\n ...this.__partsOptions,\n };\n }\n\n private __from: Date = new Date();\n\n private __to: Date = new Date();\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 isBefore(this.__from, this.__to) ? this.__from : this.__to,\n isBefore(this.__from, this.__to) ? this.__to : this.__from,\n map(this.__availableDurationParts, part => part.type),\n ),\n );\n }\n\n override connectedCallback() {\n this.role = 'timer';\n\n /**\n * TimeredCounterDatetimeDuration 将 `minPlaces` 默认设置为 `[2]`. 实例化时需要手动触发 `partsOptions` 的 setter.\n */\n this.partsOptions = this.__partsOptions ?? {};\n\n this.initialValue = this.__initialValuePlain;\n\n /**\n * 类似上方的 partsOptions, precision 也需要在初始化时手动触发 setter. 以此确保 __minPrecision, __maxPrecision, __availableDurationParts 有值.\n */\n this.precision = this.__precision;\n\n super.connectedCallback();\n }\n\n override shouldRebuildParts(\n changedProperties: PropertyValues<this>,\n ): boolean {\n return (\n super.shouldRebuildParts(changedProperties) ||\n changedProperties.has('precision')\n );\n }\n\n override willUpdate(_changedProperties: PropertyValues) {\n super.willUpdate(_changedProperties);\n\n if (_changedProperties.has('locale')) {\n this.__dateTimeFieldLabels = getLocalizedDateTimeFields(\n this.localeInstance,\n );\n }\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=\"group, part, digit, cell, prefix, suffix, part-suffix\"\n part=\"group\"\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 ><slot name=\"prefix\" slot=\"prefix\"></slot\n ><slot name=\"suffix\" slot=\"suffix\"></slot>${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\ngraceDefineCustomElement(\n 'timered-counter-datetime-duration',\n TimeredCounterDatetimeDuration,\n);\n"]}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import {
|
|
2
|
+
import { property, state } from 'lit/decorators.js';
|
|
3
3
|
import { html } from 'lit';
|
|
4
4
|
import { repeat } from 'lit/directives/repeat.js';
|
|
5
5
|
import { isBoolean, isNullish } from 'remeda';
|
|
6
6
|
import { TimeredCounter } from './timered-counter.js';
|
|
7
7
|
import { timeredCounterNumberStyles } from './styles/timered-counter-number-styles.js';
|
|
8
|
-
|
|
8
|
+
import { graceDefineCustomElement } from './utils/grace-define-custom-element.js';
|
|
9
|
+
export class TimeredCounterNumber extends TimeredCounter {
|
|
9
10
|
constructor() {
|
|
10
11
|
super(...arguments);
|
|
11
12
|
/**
|
|
@@ -93,7 +94,7 @@ let TimeredCounterNumber = class TimeredCounterNumber extends TimeredCounter {
|
|
|
93
94
|
}
|
|
94
95
|
super.willUpdate(_changedProperties);
|
|
95
96
|
}
|
|
96
|
-
}
|
|
97
|
+
}
|
|
97
98
|
TimeredCounterNumber.styles = [...TimeredCounter.styles, timeredCounterNumberStyles];
|
|
98
99
|
__decorate([
|
|
99
100
|
property({
|
|
@@ -117,8 +118,5 @@ __decorate([
|
|
|
117
118
|
__decorate([
|
|
118
119
|
state()
|
|
119
120
|
], TimeredCounterNumber.prototype, "localeGroupingSeparator", void 0);
|
|
120
|
-
TimeredCounterNumber
|
|
121
|
-
customElement('timered-counter-number')
|
|
122
|
-
], TimeredCounterNumber);
|
|
123
|
-
export { TimeredCounterNumber };
|
|
121
|
+
graceDefineCustomElement('timered-counter-number', TimeredCounterNumber);
|
|
124
122
|
//# sourceMappingURL=timered-counter-number.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timered-counter-number.js","sourceRoot":"","sources":["../../src/timered-counter-number.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"timered-counter-number.js","sourceRoot":"","sources":["../../src/timered-counter-number.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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';\nimport { graceDefineCustomElement } from './utils/grace-define-custom-element.js';\n\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=\"group, part, digit, cell, prefix, suffix, part-suffix\"\n part=\"group\"\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\ngraceDefineCustomElement('timered-counter-number', TimeredCounterNumber);\n"]}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { customElement } from 'lit/decorators.js';
|
|
3
1
|
import { isEmpty, isString } from 'remeda';
|
|
4
2
|
import { TimeredCounter } from './timered-counter.js';
|
|
5
3
|
import { timeredCounterStringStyles } from './styles/timered-counter-string-styles.js';
|
|
6
4
|
import { anyBase } from './utils/any-base.js';
|
|
5
|
+
import { graceDefineCustomElement } from './utils/grace-define-custom-element.js';
|
|
7
6
|
/**
|
|
8
7
|
* 替换一些特定的字符.
|
|
9
8
|
* 1. " ": 空格字符在 HTML 中会被忽略导致无法计算字符宽度, 使用 \xa0 替换.
|
|
@@ -11,7 +10,7 @@ import { anyBase } from './utils/any-base.js';
|
|
|
11
10
|
const REPLACED_CHARS = {
|
|
12
11
|
' ': '\xa0', //
|
|
13
12
|
};
|
|
14
|
-
|
|
13
|
+
export class TimeredCounterString extends TimeredCounter {
|
|
15
14
|
constructor() {
|
|
16
15
|
super(...arguments);
|
|
17
16
|
// /**
|
|
@@ -136,10 +135,7 @@ let TimeredCounterString = class TimeredCounterString extends TimeredCounter {
|
|
|
136
135
|
this.partsOptions = this.__partsOptions ?? {};
|
|
137
136
|
super.connectedCallback();
|
|
138
137
|
}
|
|
139
|
-
}
|
|
138
|
+
}
|
|
140
139
|
TimeredCounterString.styles = [...TimeredCounter.styles, timeredCounterStringStyles];
|
|
141
|
-
TimeredCounterString
|
|
142
|
-
customElement('timered-counter-string')
|
|
143
|
-
], TimeredCounterString);
|
|
144
|
-
export { TimeredCounterString };
|
|
140
|
+
graceDefineCustomElement('timered-counter-string', TimeredCounterString);
|
|
145
141
|
//# sourceMappingURL=timered-counter-string.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timered-counter-string.js","sourceRoot":"","sources":["../../src/timered-counter-string.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"timered-counter-string.js","sourceRoot":"","sources":["../../src/timered-counter-string.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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';\nimport { graceDefineCustomElement } from './utils/grace-define-custom-element.js';\n\n/**\n * 替换一些特定的字符.\n * 1. \" \": 空格字符在 HTML 中会被忽略导致无法计算字符宽度, 使用 \\xa0 替换.\n */\nconst REPLACED_CHARS: Record<string, string> = {\n ' ': '\\xa0', // \n};\n\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.__initialValueString)) {\n super.initialValue = this.numberAdapter.create(0);\n return;\n }\n\n /**\n * `initialValue` 在初始化时会被赋值给 `oldValue`, 因此, 同步更新逻辑与 `value` 的 setter 一致.\n */\n this.__updateAlphabet(this.__valueString, this.__initialValueString);\n super.initialValue = this.numberAdapter.create(\n this.__anyBaseToDecimal(this.__initialValueString),\n );\n super.value = this.numberAdapter.create(\n this.__anyBaseToDecimal(this.__valueString),\n );\n }\n\n private __valueString = '';\n\n private __oldValueString = '';\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.__oldValueString = this.__valueString;\n this.__valueString = value ?? '';\n\n if (isEmpty(this.__valueString)) {\n super.value = this.numberAdapter.create(0);\n return;\n }\n\n /**\n * 传入的 value 通过 `__anyBaseToDecimal` 转换为十进制数值, `__anyBaseToDecimal` 则基于 `__alphabet` 计算.\n * 因此, 当 `__alphabet` 更新时, 需要重新计算 `value` 和 `oldValue` 的值.\n * 以确保 `value` 和 `oldValue` 能够通过 `__decimalToAnyBase` 转换为原始字符串.\n */\n this.__updateAlphabet(this.__valueString, this.__oldValueString);\n super.oldValue = this.numberAdapter.create(\n this.__anyBaseToDecimal(this.__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 this.__updateAlphabet(this.__valueString, this.__initialValueString);\n this.initialValue = this.__initialValueString;\n this.value = this.__valueString;\n\n /**\n * TimeredCounterString 有自定义的 `fillChar` 和 `digitToChar`. 实例化时需要手动触发 `partsOptions` 的 setter.\n */\n this.partsOptions = this.__partsOptions ?? {};\n\n super.connectedCallback();\n }\n}\n\ngraceDefineCustomElement('timered-counter-string', TimeredCounterString);\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, LitElement } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { query, state } from 'lit/decorators.js';
|
|
4
4
|
import { repeat } from 'lit/directives/repeat.js';
|
|
5
5
|
import { CounterStylesMixin } from './mixins/counter-styles.js';
|
|
6
6
|
import { CounterPartsMixin } from './mixins/counter-parts.js';
|
|
@@ -9,9 +9,10 @@ import { timeredCounterStyles } from './styles/timered-counter-styles.js';
|
|
|
9
9
|
import { CounterAnimationMixin } from './mixins/counter-animation.js';
|
|
10
10
|
import './transitions/roller/index.js';
|
|
11
11
|
import { CounterAiraMixin } from './mixins/counter-aira.js';
|
|
12
|
+
import { graceDefineCustomElement } from './utils/grace-define-custom-element.js';
|
|
12
13
|
class TimeredCounterAnimationEvent extends Event {
|
|
13
14
|
}
|
|
14
|
-
|
|
15
|
+
export class TimeredCounter extends CounterAiraMixin(CounterAnimationMixin(CounterStylesMixin(CounterPartsMixin(CounterBaseMixin(LitElement))))) {
|
|
15
16
|
constructor() {
|
|
16
17
|
super();
|
|
17
18
|
this.resizeObserver = new ResizeObserver(() => {
|
|
@@ -66,7 +67,7 @@ let TimeredCounter = class TimeredCounter extends CounterAiraMixin(CounterAnimat
|
|
|
66
67
|
dispatchTimeredCounterAnimationEnd() {
|
|
67
68
|
this.dispatchEvent(new TimeredCounterAnimationEvent('timered-counter-animation-end'));
|
|
68
69
|
}
|
|
69
|
-
}
|
|
70
|
+
}
|
|
70
71
|
TimeredCounter.styles = [timeredCounterStyles];
|
|
71
72
|
__decorate([
|
|
72
73
|
state()
|
|
@@ -74,8 +75,5 @@ __decorate([
|
|
|
74
75
|
__decorate([
|
|
75
76
|
query('timered-counter-roller')
|
|
76
77
|
], TimeredCounter.prototype, "partsContainer", void 0);
|
|
77
|
-
TimeredCounter
|
|
78
|
-
customElement('timered-counter')
|
|
79
|
-
], TimeredCounter);
|
|
80
|
-
export { TimeredCounter };
|
|
78
|
+
graceDefineCustomElement('timered-counter', TimeredCounter);
|
|
81
79
|
//# sourceMappingURL=timered-counter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timered-counter.js","sourceRoot":"","sources":["../../src/timered-counter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"timered-counter.js","sourceRoot":"","sources":["../../src/timered-counter.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { query, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { CounterStylesMixin } from './mixins/counter-styles.js';\nimport { CounterPartsMixin } from './mixins/counter-parts.js';\nimport { CounterBaseMixin } from './mixins/counter-base.js';\nimport { timeredCounterStyles } from './styles/timered-counter-styles.js';\nimport { CounterAnimationMixin } from './mixins/counter-animation.js';\nimport './transitions/roller/index.js';\nimport { CounterAiraMixin } from './mixins/counter-aira.js';\nimport { graceDefineCustomElement } from './utils/grace-define-custom-element.js';\n\nclass TimeredCounterAnimationEvent extends Event {\n // constructor(type: string, eventInitDict?: EventInit) {\n // super(type, eventInitDict);\n // }\n}\n\nexport class TimeredCounter extends CounterAiraMixin(\n CounterAnimationMixin(\n CounterStylesMixin(CounterPartsMixin(CounterBaseMixin(LitElement))),\n ),\n) {\n static styles = [timeredCounterStyles];\n\n resizeObserver: ResizeObserver;\n\n @state()\n partsContainerRect: DOMRect | undefined;\n\n @query('timered-counter-roller')\n partsContainer: HTMLElement | undefined;\n\n constructor() {\n super();\n\n this.resizeObserver = new ResizeObserver(() => {\n this.partsContainerRect = this.partsContainer\n ? this.partsContainer.getBoundingClientRect()\n : new DOMRect();\n });\n }\n\n protected firstUpdated(_changedProperties: PropertyValues) {\n super.firstUpdated(_changedProperties);\n\n if (this.partsContainer) {\n this.resizeObserver.observe(this.partsContainer);\n }\n }\n\n render() {\n const cellStyles = this.extractCellStyles();\n const digitStyles = this.extractDigitStyles();\n const partStyles = this.extractPartStyles();\n\n const animationOptions = this.extractAnimationOptions();\n const keyframes = this.extractKeyframes();\n\n return html`\n <timered-counter-roller\n exportparts=\"group, part, digit, cell, prefix, suffix, part-suffix\"\n part=\"group\"\n class=\"timered-counter\"\n aria-hidden=\"true\"\n color=${this.color}\n .parentContainerRect=${this.partsContainerRect}\n .parts=${this.parts}\n .partPreprocessDataList=${this.partPreprocessDataList}\n .animationOptions=${animationOptions}\n .keyframes=${keyframes}\n .cellStyles=${cellStyles}\n .digitStyles=${digitStyles}\n .partStyles=${partStyles}\n .direction=${this.direction}\n @roller-animation-start=${this.dispatchTimeredCounterAnimationStart}\n @roller-animation-end=${this.dispatchTimeredCounterAnimationEnd}\n >\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n ${repeat(\n this.parts,\n (_, index) => index,\n (_, partIndex) =>\n html`<slot\n name=${`part-suffix-${partIndex}`}\n slot=${`part-suffix-${partIndex}`}\n ></slot>`,\n )}\n </timered-counter-roller>\n `;\n }\n\n dispatchTimeredCounterAnimationStart() {\n this.dispatchEvent(\n new TimeredCounterAnimationEvent('timered-counter-animation-start'),\n );\n }\n\n dispatchTimeredCounterAnimationEnd() {\n this.dispatchEvent(\n new TimeredCounterAnimationEvent('timered-counter-animation-end'),\n );\n }\n}\n\ngraceDefineCustomElement('timered-counter', TimeredCounter);\n"]}
|
|
@@ -4,12 +4,13 @@ import { repeat } from 'lit/directives/repeat.js';
|
|
|
4
4
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
5
5
|
import { intersection, isEmpty, isNullish, isString, merge, omit, range, } from 'remeda';
|
|
6
6
|
import { classMap } from 'lit/directives/class-map.js';
|
|
7
|
-
import {
|
|
7
|
+
import { property, query, state } from 'lit/decorators.js';
|
|
8
8
|
import { rollerDigitStyles } from './styles.js';
|
|
9
9
|
import * as EasingFunctions from '../../easing/penner-easing-functions.js';
|
|
10
|
+
import { graceDefineCustomElement } from '../../utils/grace-define-custom-element.js';
|
|
10
11
|
class RollerDigitAnimationEvent extends Event {
|
|
11
12
|
}
|
|
12
|
-
|
|
13
|
+
export class TimeredCounterRollerDigit extends LitElement {
|
|
13
14
|
constructor() {
|
|
14
15
|
super();
|
|
15
16
|
this.digit = { data: [], place: 0 };
|
|
@@ -211,7 +212,7 @@ let TimeredCounterRollerDigit = class TimeredCounterRollerDigit extends LitEleme
|
|
|
211
212
|
return;
|
|
212
213
|
this.dispatchEvent(new RollerDigitAnimationEvent('roller-digit-animation-end'));
|
|
213
214
|
}
|
|
214
|
-
}
|
|
215
|
+
}
|
|
215
216
|
TimeredCounterRollerDigit.styles = [rollerDigitStyles];
|
|
216
217
|
__decorate([
|
|
217
218
|
property({ type: Object })
|
|
@@ -243,8 +244,5 @@ __decorate([
|
|
|
243
244
|
__decorate([
|
|
244
245
|
state()
|
|
245
246
|
], TimeredCounterRollerDigit.prototype, "digitWidth", void 0);
|
|
246
|
-
TimeredCounterRollerDigit
|
|
247
|
-
customElement('timered-counter-roller-digit')
|
|
248
|
-
], TimeredCounterRollerDigit);
|
|
249
|
-
export { TimeredCounterRollerDigit };
|
|
247
|
+
graceDefineCustomElement('timered-counter-roller-digit', TimeredCounterRollerDigit);
|
|
250
248
|
//# sourceMappingURL=roller-digit.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"roller-digit.js","sourceRoot":"","sources":["../../../../src/transitions/roller/roller-digit.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport {\n intersection,\n isEmpty,\n isNullish,\n isString,\n merge,\n omit,\n range,\n} from 'remeda';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { PartPreprocessedData } from '../../utils/preprocess-part-data.js';\nimport { PartDataDigit } from '../../types/group.js';\nimport { rollerDigitStyles } from './styles.js';\nimport * as EasingFunctions from '../../easing/penner-easing-functions.js';\n\nclass RollerDigitAnimationEvent extends Event {\n // constructor(type: string, eventInitDict?: EventInit) {\n // super(type, eventInitDict);\n // }\n}\n\n@customElement('timered-counter-roller-digit')\nexport class TimeredCounterRollerDigit extends LitElement {\n static styles = [rollerDigitStyles];\n\n @property({ type: Object })\n digit: PartDataDigit = { data: [], place: 0 };\n\n @property({ type: Object })\n preprocessData: PartPreprocessedData = {\n animate: true,\n cancelPrevAnimation: false,\n earlyReturn: '',\n index: 0,\n partIndex: 0,\n digitIndex: 0,\n };\n\n @property({ type: String })\n direction: 'up' | 'down' = 'up';\n\n @property({ type: Object })\n textStyle: Partial<CSSStyleDeclaration> = {};\n\n @property({ type: Array })\n cellStyle: Partial<CSSStyleDeclaration>[] = [];\n\n @property({ type: Object })\n animationOptions: KeyframeAnimationOptions = {};\n\n @property({ type: Object })\n keyframes: PropertyIndexedKeyframes = {};\n\n @query('.roll-list__shadow')\n clonedRollDigitList: HTMLElement | undefined;\n\n @query('.roll-list')\n rollList: HTMLElement | undefined;\n\n @state()\n digitWidth: number = 0;\n\n resizeObserver: ResizeObserver;\n\n animation: Animation | undefined;\n\n constructor() {\n super();\n\n this.resizeObserver = new ResizeObserver(() => {\n this.digitWidth = this.clonedRollDigitList\n ? this.clonedRollDigitList.offsetWidth\n : 0;\n });\n }\n\n protected firstUpdated(_changedProperties: PropertyValues<this>) {\n super.firstUpdated(_changedProperties);\n\n if (this.clonedRollDigitList) {\n this.resizeObserver.observe(this.clonedRollDigitList);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.resizeObserver.disconnect();\n }\n\n protected updated(_changedProperties: PropertyValues) {\n super.updated(_changedProperties);\n\n /**\n * 仅当影响滚动列表 dom 结构的属性发生变化时才会触发动画.\n */\n if (\n intersection(Array.from(_changedProperties.keys()), [\n 'digit',\n 'preprocessData',\n 'direction',\n 'animationOptions',\n 'keyframes',\n ]).length > 0\n ) {\n if (this.shouldAnimate()) {\n this.startAnimation().then();\n }\n }\n }\n\n render() {\n const shadowCellStyle = this.cellStyle.map(style =>\n omit(style, ['position']),\n );\n\n return html`<span class=\"roller-part-digit\">\n <!-- 占位 -->\n <span\n class=\"placeholder\"\n style=${styleMap({ width: `${Math.round(this.digitWidth)}px` })}\n >0</span\n >\n <!-- 一个不可见的滚动列表的复制, 用于计算该列表的最大宽度. -->\n <span class=\"roll-list__shadow\">\n ${repeat(\n this.digit.data,\n (_, index) => index,\n (digit, index) =>\n html`<span style=${styleMap(shadowCellStyle[index] as StyleInfo)}\n >${digit}</span\n >`,\n )}\n </span>\n <span\n class=${classMap({\n /**\n * 向上(up)滚动时, 使滚动列表顶部对齐以便于应用 `translationY(-100%)` 实现向上滚动效果\n * 向下同理\n */\n 'roll-list__up': this.direction === 'up',\n 'roll-list__down': this.direction === 'down',\n 'roll-list': true,\n })}\n >\n ${this.digit.data.length > 1\n ? repeat(\n this.digit.data,\n (_, index) => index,\n (digit, index) => {\n if (\n this.direction === 'up' &&\n index === this.digit.data.length - 1\n ) {\n return html`<span\n part=\"cell\"\n class=\"roll-item roll-item__head\"\n style=${styleMap(this.cellStyle[index] as StyleInfo)}\n ><span style=${styleMap(this.textStyle as StyleInfo)}\n >${digit}</span\n ></span\n >`;\n }\n if (this.direction === 'down' && index === 0) {\n return html`\n <span\n part=\"cell\"\n class=\"roll-item roll-item__tail\"\n style=${styleMap(this.cellStyle[index] as StyleInfo)}\n ><span style=${styleMap(this.textStyle as StyleInfo)}\n >${digit}</span\n ></span\n >\n `;\n }\n return html`<span\n part=\"cell\"\n class=\"roll-item\"\n style=${styleMap(this.cellStyle[index] as StyleInfo)}\n ><span style=${styleMap(this.textStyle as StyleInfo)}\n >${digit}</span\n ></span\n >`;\n },\n )\n : html`<span\n part=\"cell\"\n class=\"roll-item\"\n style=${styleMap(this.cellStyle[0] as StyleInfo)}\n ><span style=${styleMap(this.textStyle as StyleInfo)}\n >${this.digit.data[0]}</span\n ></span\n >`}</span\n ></span\n > `;\n }\n\n shouldAnimate() {\n const { cancelPrevAnimation, animate } = this.preprocessData;\n if (cancelPrevAnimation) {\n if (this.animation) {\n this.animation.cancel();\n }\n\n if (this.rollList && this.rollList.style && this.rollList.style.cssText) {\n this.rollList.style.cssText = '';\n }\n }\n\n if (!animate) return false;\n\n return true;\n }\n\n async startAnimation() {\n if (isNullish(this.rollList)) return;\n\n this.__emitAnimationStart();\n\n const anmOptions = merge(\n { duration: 1000, iterations: 1, easing: 'ease-out', fill: 'forwards' },\n this.animationOptions,\n );\n\n const keyframes = isEmpty(this.keyframes)\n ? {\n up: { transform: ['translateY(0)', 'translateY(-100%)'] },\n down: { transform: ['translateY(0)', 'translateY(100%)'] },\n }[this.direction]\n : this.keyframes;\n\n /**\n * 尝试从 `PennerEasingFunctions` 中获取对应的 easing 函数\n */\n // {\n if (\n isString(anmOptions.easing) &&\n EasingFunctions[anmOptions.easing as keyof typeof EasingFunctions]\n ) {\n const func =\n EasingFunctions[anmOptions.easing as keyof typeof EasingFunctions];\n anmOptions.easing = `linear(${range(0, 64)\n .map((_, i) => func(i / 63))\n .join(',')})`;\n }\n // }\n\n try {\n this.clearAnimation();\n this.animation = this.rollList.animate(keyframes, anmOptions);\n\n this.animation.addEventListener(\n 'finish',\n () => this.__emitAnimationEnd(),\n {\n once: true,\n },\n );\n\n // /**\n // * 动画播放完成或被其他动画中断都会使得 `finished` resolve.\n // * 只有当动画顺利播放完成的情况下, 才能调用 `cancel` 取消动画. 在其他情况下调用, 会抛出异常[1].\n // *\n // * 因此, 提前检查 `playState` 的值. 当 `playState` 不是 `finished` 时, 说明动画被其他 `Animation` 实例中断.\n // * 因为已经有其他 `Animation` 实例的存在, 我们可以直接丢弃这个 `Animation` 实例, 而不用担心无动画可用.\n // *\n // * [1]: https://developer.mozilla.org/en-US/docs/Web/API/Animation/cancel#exceptions\n // */\n // await this.animation.finished;\n // if (\n // this.animation.playState === 'finished' &&\n // this.rollList.checkVisibility()\n // ) {\n // // this.animation.commitStyles();\n // // this.animation.cancel();\n // }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(e);\n }\n }\n\n clearAnimation() {\n this.animation?.removeEventListener('finish', this.__emitAnimationEnd);\n this.animation?.cancel();\n }\n\n private __emitAnimationStart() {\n if (!this.isConnected) return;\n\n this.dispatchEvent(\n new RollerDigitAnimationEvent('roller-digit-animation-start'),\n );\n }\n\n private __emitAnimationEnd() {\n if (!this.isConnected) return;\n\n this.dispatchEvent(\n new RollerDigitAnimationEvent('roller-digit-animation-end'),\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"roller-digit.js","sourceRoot":"","sources":["../../../../src/transitions/roller/roller-digit.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport {\n intersection,\n isEmpty,\n isNullish,\n isString,\n merge,\n omit,\n range,\n} from 'remeda';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { PartPreprocessedData } from '../../utils/preprocess-part-data.js';\nimport { PartDataDigit } from '../../types/group.js';\nimport { rollerDigitStyles } from './styles.js';\nimport * as EasingFunctions from '../../easing/penner-easing-functions.js';\nimport { graceDefineCustomElement } from '../../utils/grace-define-custom-element.js';\n\nclass RollerDigitAnimationEvent extends Event {\n // constructor(type: string, eventInitDict?: EventInit) {\n // super(type, eventInitDict);\n // }\n}\n\nexport class TimeredCounterRollerDigit extends LitElement {\n static styles = [rollerDigitStyles];\n\n @property({ type: Object })\n digit: PartDataDigit = { data: [], place: 0 };\n\n @property({ type: Object })\n preprocessData: PartPreprocessedData = {\n animate: true,\n cancelPrevAnimation: false,\n earlyReturn: '',\n index: 0,\n partIndex: 0,\n digitIndex: 0,\n };\n\n @property({ type: String })\n direction: 'up' | 'down' = 'up';\n\n @property({ type: Object })\n textStyle: Partial<CSSStyleDeclaration> = {};\n\n @property({ type: Array })\n cellStyle: Partial<CSSStyleDeclaration>[] = [];\n\n @property({ type: Object })\n animationOptions: KeyframeAnimationOptions = {};\n\n @property({ type: Object })\n keyframes: PropertyIndexedKeyframes = {};\n\n @query('.roll-list__shadow')\n clonedRollDigitList: HTMLElement | undefined;\n\n @query('.roll-list')\n rollList: HTMLElement | undefined;\n\n @state()\n digitWidth: number = 0;\n\n resizeObserver: ResizeObserver;\n\n animation: Animation | undefined;\n\n constructor() {\n super();\n\n this.resizeObserver = new ResizeObserver(() => {\n this.digitWidth = this.clonedRollDigitList\n ? this.clonedRollDigitList.offsetWidth\n : 0;\n });\n }\n\n protected firstUpdated(_changedProperties: PropertyValues<this>) {\n super.firstUpdated(_changedProperties);\n\n if (this.clonedRollDigitList) {\n this.resizeObserver.observe(this.clonedRollDigitList);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.resizeObserver.disconnect();\n }\n\n protected updated(_changedProperties: PropertyValues) {\n super.updated(_changedProperties);\n\n /**\n * 仅当影响滚动列表 dom 结构的属性发生变化时才会触发动画.\n */\n if (\n intersection(Array.from(_changedProperties.keys()), [\n 'digit',\n 'preprocessData',\n 'direction',\n 'animationOptions',\n 'keyframes',\n ]).length > 0\n ) {\n if (this.shouldAnimate()) {\n this.startAnimation().then();\n }\n }\n }\n\n render() {\n const shadowCellStyle = this.cellStyle.map(style =>\n omit(style, ['position']),\n );\n\n return html`<span class=\"roller-part-digit\">\n <!-- 占位 -->\n <span\n class=\"placeholder\"\n style=${styleMap({ width: `${Math.round(this.digitWidth)}px` })}\n >0</span\n >\n <!-- 一个不可见的滚动列表的复制, 用于计算该列表的最大宽度. -->\n <span class=\"roll-list__shadow\">\n ${repeat(\n this.digit.data,\n (_, index) => index,\n (digit, index) =>\n html`<span style=${styleMap(shadowCellStyle[index] as StyleInfo)}\n >${digit}</span\n >`,\n )}\n </span>\n <span\n class=${classMap({\n /**\n * 向上(up)滚动时, 使滚动列表顶部对齐以便于应用 `translationY(-100%)` 实现向上滚动效果\n * 向下同理\n */\n 'roll-list__up': this.direction === 'up',\n 'roll-list__down': this.direction === 'down',\n 'roll-list': true,\n })}\n >\n ${this.digit.data.length > 1\n ? repeat(\n this.digit.data,\n (_, index) => index,\n (digit, index) => {\n if (\n this.direction === 'up' &&\n index === this.digit.data.length - 1\n ) {\n return html`<span\n part=\"cell\"\n class=\"roll-item roll-item__head\"\n style=${styleMap(this.cellStyle[index] as StyleInfo)}\n ><span style=${styleMap(this.textStyle as StyleInfo)}\n >${digit}</span\n ></span\n >`;\n }\n if (this.direction === 'down' && index === 0) {\n return html`\n <span\n part=\"cell\"\n class=\"roll-item roll-item__tail\"\n style=${styleMap(this.cellStyle[index] as StyleInfo)}\n ><span style=${styleMap(this.textStyle as StyleInfo)}\n >${digit}</span\n ></span\n >\n `;\n }\n return html`<span\n part=\"cell\"\n class=\"roll-item\"\n style=${styleMap(this.cellStyle[index] as StyleInfo)}\n ><span style=${styleMap(this.textStyle as StyleInfo)}\n >${digit}</span\n ></span\n >`;\n },\n )\n : html`<span\n part=\"cell\"\n class=\"roll-item\"\n style=${styleMap(this.cellStyle[0] as StyleInfo)}\n ><span style=${styleMap(this.textStyle as StyleInfo)}\n >${this.digit.data[0]}</span\n ></span\n >`}</span\n ></span\n > `;\n }\n\n shouldAnimate() {\n const { cancelPrevAnimation, animate } = this.preprocessData;\n if (cancelPrevAnimation) {\n if (this.animation) {\n this.animation.cancel();\n }\n\n if (this.rollList && this.rollList.style && this.rollList.style.cssText) {\n this.rollList.style.cssText = '';\n }\n }\n\n if (!animate) return false;\n\n return true;\n }\n\n async startAnimation() {\n if (isNullish(this.rollList)) return;\n\n this.__emitAnimationStart();\n\n const anmOptions = merge(\n { duration: 1000, iterations: 1, easing: 'ease-out', fill: 'forwards' },\n this.animationOptions,\n );\n\n const keyframes = isEmpty(this.keyframes)\n ? {\n up: { transform: ['translateY(0)', 'translateY(-100%)'] },\n down: { transform: ['translateY(0)', 'translateY(100%)'] },\n }[this.direction]\n : this.keyframes;\n\n /**\n * 尝试从 `PennerEasingFunctions` 中获取对应的 easing 函数\n */\n // {\n if (\n isString(anmOptions.easing) &&\n EasingFunctions[anmOptions.easing as keyof typeof EasingFunctions]\n ) {\n const func =\n EasingFunctions[anmOptions.easing as keyof typeof EasingFunctions];\n anmOptions.easing = `linear(${range(0, 64)\n .map((_, i) => func(i / 63))\n .join(',')})`;\n }\n // }\n\n try {\n this.clearAnimation();\n this.animation = this.rollList.animate(keyframes, anmOptions);\n\n this.animation.addEventListener(\n 'finish',\n () => this.__emitAnimationEnd(),\n {\n once: true,\n },\n );\n\n // /**\n // * 动画播放完成或被其他动画中断都会使得 `finished` resolve.\n // * 只有当动画顺利播放完成的情况下, 才能调用 `cancel` 取消动画. 在其他情况下调用, 会抛出异常[1].\n // *\n // * 因此, 提前检查 `playState` 的值. 当 `playState` 不是 `finished` 时, 说明动画被其他 `Animation` 实例中断.\n // * 因为已经有其他 `Animation` 实例的存在, 我们可以直接丢弃这个 `Animation` 实例, 而不用担心无动画可用.\n // *\n // * [1]: https://developer.mozilla.org/en-US/docs/Web/API/Animation/cancel#exceptions\n // */\n // await this.animation.finished;\n // if (\n // this.animation.playState === 'finished' &&\n // this.rollList.checkVisibility()\n // ) {\n // // this.animation.commitStyles();\n // // this.animation.cancel();\n // }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(e);\n }\n }\n\n clearAnimation() {\n this.animation?.removeEventListener('finish', this.__emitAnimationEnd);\n this.animation?.cancel();\n }\n\n private __emitAnimationStart() {\n if (!this.isConnected) return;\n\n this.dispatchEvent(\n new RollerDigitAnimationEvent('roller-digit-animation-start'),\n );\n }\n\n private __emitAnimationEnd() {\n if (!this.isConnected) return;\n\n this.dispatchEvent(\n new RollerDigitAnimationEvent('roller-digit-animation-end'),\n );\n }\n}\n\ngraceDefineCustomElement(\n 'timered-counter-roller-digit',\n TimeredCounterRollerDigit,\n);\n"]}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, LitElement } from 'lit';
|
|
3
3
|
import { repeat } from 'lit/directives/repeat.js';
|
|
4
|
-
import {
|
|
4
|
+
import { property, query } from 'lit/decorators.js';
|
|
5
5
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
6
6
|
import { isNumber, values } from 'remeda';
|
|
7
7
|
import './roller-digit.js';
|
|
8
8
|
import { rollerStyles } from './styles.js';
|
|
9
|
+
import { graceDefineCustomElement } from '../../utils/grace-define-custom-element.js';
|
|
9
10
|
class RollerAnimationEvent extends Event {
|
|
10
11
|
}
|
|
11
|
-
|
|
12
|
+
export class TimeredCounterRoller extends LitElement {
|
|
12
13
|
constructor() {
|
|
13
14
|
super(...arguments);
|
|
14
15
|
this.color = '';
|
|
@@ -185,7 +186,7 @@ let TimeredCounterRoller = class TimeredCounterRoller extends LitElement {
|
|
|
185
186
|
}
|
|
186
187
|
return result;
|
|
187
188
|
}
|
|
188
|
-
}
|
|
189
|
+
}
|
|
189
190
|
TimeredCounterRoller.styles = [rollerStyles];
|
|
190
191
|
__decorate([
|
|
191
192
|
property({ type: String })
|
|
@@ -223,8 +224,5 @@ __decorate([
|
|
|
223
224
|
__decorate([
|
|
224
225
|
query('.roller__suffix')
|
|
225
226
|
], TimeredCounterRoller.prototype, "suffixContainer", void 0);
|
|
226
|
-
TimeredCounterRoller
|
|
227
|
-
customElement('timered-counter-roller')
|
|
228
|
-
], TimeredCounterRoller);
|
|
229
|
-
export { TimeredCounterRoller };
|
|
227
|
+
graceDefineCustomElement('timered-counter-roller', TimeredCounterRoller);
|
|
230
228
|
//# sourceMappingURL=roller.js.map
|
|
@@ -1 +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 { 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';\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 __partDigitsColorStyles: 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.__partDigitsColorStyles?.[-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\n part=\"part\"\n class=\"roller-part\"\n style=${styleMap(\n (this.partStyles?.[partIndex] ?? {}) as StyleInfo,\n )}\n >${repeat(\n part.digits,\n (_, index) => `${part.digits.length - index}`,\n (digitInfo, digitIndex) =>\n html`<timered-counter-roller-digit\n exportparts=\"digit, cell\"\n part=\"digit\"\n class=\"roller-part__wrapper\"\n style=${styleMap(\n (this.digitStyles?.[partIndex]?.[digitIndex] ??\n {}) as StyleInfo,\n )}\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.__partDigitsColorStyles?.[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.__partDigitsColorStyles?.[partIndex]?.[-1] ??\n {}) 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.__partDigitsColorStyles?.[-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 this.__partDigitsColorStyles = this.__generatePartDigitsColorStyles();\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: `${this.offsetWidth}px ${this.offsetHeight}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"]}
|
|
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 { property, query } from 'lit/decorators.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { 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 { graceDefineCustomElement } from '../../utils/grace-define-custom-element.js';\n\nclass RollerAnimationEvent extends Event {\n // constructor(type: string, eventInitDict?: EventInit) {\n // super(type, eventInitDict);\n // }\n}\n\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 __partDigitsColorStyles: 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.__partDigitsColorStyles?.[-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\n part=\"part\"\n class=\"roller-part\"\n style=${styleMap(\n (this.partStyles?.[partIndex] ?? {}) as StyleInfo,\n )}\n >${repeat(\n part.digits,\n (_, index) => `${part.digits.length - index}`,\n (digitInfo, digitIndex) =>\n html`<timered-counter-roller-digit\n exportparts=\"digit, cell\"\n part=\"digit\"\n class=\"roller-part__wrapper\"\n style=${styleMap(\n (this.digitStyles?.[partIndex]?.[digitIndex] ??\n {}) as StyleInfo,\n )}\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.__partDigitsColorStyles?.[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.__partDigitsColorStyles?.[partIndex]?.[-1] ??\n {}) 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.__partDigitsColorStyles?.[-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 this.__partDigitsColorStyles = this.__generatePartDigitsColorStyles();\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: `${this.offsetWidth}px ${this.offsetHeight}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\ngraceDefineCustomElement('timered-counter-roller', TimeredCounterRoller);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function graceDefineCustomElement(tagName: string, constructor: CustomElementConstructor): void;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export function graceDefineCustomElement(tagName, constructor) {
|
|
2
|
+
if (typeof customElements === 'undefined') {
|
|
3
|
+
return;
|
|
4
|
+
}
|
|
5
|
+
if (customElements.get(tagName)) {
|
|
6
|
+
return;
|
|
7
|
+
}
|
|
8
|
+
customElements.define(tagName, constructor);
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=grace-define-custom-element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grace-define-custom-element.js","sourceRoot":"","sources":["../../../src/utils/grace-define-custom-element.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,wBAAwB,CACtC,OAAe,EACf,WAAqC;IAErC,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE,CAAC;QAC1C,OAAO;IACT,CAAC;IAED,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QAChC,OAAO;IACT,CAAC;IAED,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;AAC9C,CAAC","sourcesContent":["export function graceDefineCustomElement(\n tagName: string,\n constructor: CustomElementConstructor,\n): void {\n if (typeof customElements === 'undefined') {\n return;\n }\n\n if (customElements.get(tagName)) {\n return;\n }\n\n customElements.define(tagName, constructor);\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function formatProps<P extends {}>(props: P): P;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { toCamelCase } from 'remeda';
|
|
2
|
+
export function formatProps(props) {
|
|
3
|
+
const formattedProps = {};
|
|
4
|
+
for (const [key, value] of Object.entries(props)) {
|
|
5
|
+
if (value === undefined || value === null) {
|
|
6
|
+
continue;
|
|
7
|
+
}
|
|
8
|
+
switch (key) {
|
|
9
|
+
case 'onTimeredCounterAnimationStart':
|
|
10
|
+
case 'onTimeredCounterAnimationEnd':
|
|
11
|
+
// @ts-ignore
|
|
12
|
+
formattedProps[toCamelCase(key)] = props[key];
|
|
13
|
+
break;
|
|
14
|
+
default:
|
|
15
|
+
// @ts-ignore
|
|
16
|
+
formattedProps[`.${toCamelCase(key)}`] = props[key];
|
|
17
|
+
break;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return formattedProps;
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=format-props.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"format-props.js","sourceRoot":"","sources":["../../../../src/wrappers/vue/format-props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAErC,MAAM,UAAU,WAAW,CAAe,KAAQ;IAChD,MAAM,cAAc,GAAwB,EAAE,CAAC;IAE/C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACjD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YAC1C,SAAS;QACX,CAAC;QAED,QAAQ,GAAG,EAAE,CAAC;YACZ,KAAK,gCAAgC,CAAC;YACtC,KAAK,8BAA8B;gBACjC,aAAa;gBACb,cAAc,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;gBAC9C,MAAM;YACR;gBACE,aAAa;gBACb,cAAc,CAAC,IAAI,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;gBACpD,MAAM;QACV,CAAC;IACH,CAAC;IAED,OAAO,cAAmB,CAAC;AAC7B,CAAC","sourcesContent":["import { toCamelCase } from 'remeda';\n\nexport function formatProps<P extends {}>(props: P): P {\n const formattedProps: Record<string, any> = {};\n\n for (const [key, value] of Object.entries(props)) {\n if (value === undefined || value === null) {\n continue;\n }\n\n switch (key) {\n case 'onTimeredCounterAnimationStart':\n case 'onTimeredCounterAnimationEnd':\n // @ts-ignore\n formattedProps[toCamelCase(key)] = props[key];\n break;\n default:\n // @ts-ignore\n formattedProps[`.${toCamelCase(key)}`] = props[key];\n break;\n }\n }\n\n return formattedProps as P;\n}\n"]}
|