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

Make the value change more vivid and natural

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