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

Make the value change more vivid and natural

import { __decorate } from "tslib";
import { property } from 'lit/decorators.js';
export const CounterAiraMixin = (superClass) => {
    class CounterAiraMixinClass extends superClass {
        constructor() {
            super(...arguments);
            this.ariaLabel = '';
            this.ariaLive = 'polite';
            // updated(changedProperties: PropertyValues<this>) {
            //   if (changedProperties.has('value')) {
            //     this.ariaLabel = this.generateAriaLabel();
            //   }
            // }
        }
        /**
         * 生成 aria-label 属性值. 在每次更新完成后调用.
         */
        generateAriaLabel() {
            let label = '';
            const { direction } = this;
            for (const part of this.parts) {
                for (const digit of part.digits) {
                    label += `${digit.data[direction === 'up' ? digit.data.length - 1 : 0]}`;
                }
            }
            return label;
        }
        willUpdate(changedProperties) {
            super.willUpdate(changedProperties);
            this.ariaLabel = this.generateAriaLabel();
        }
    }
    __decorate([
        property({ attribute: 'aria-label', reflect: true })
    ], CounterAiraMixinClass.prototype, "ariaLabel", void 0);
    __decorate([
        property({ attribute: 'aira-live', reflect: true })
    ], CounterAiraMixinClass.prototype, "ariaLive", void 0);
    return CounterAiraMixinClass;
};
//# sourceMappingURL=counter-aira.js.map