oda-framework/components/tools/rating/rating.js

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

ODA({is: 'oda-rating', imports: '@oda/icon',
    template: /*html*/`
    <style>
        :host {
            position: relative;
            @apply --horizontal;
            cursor: pointer;
        }
        oda-icon:hover {
            transform: scale(1.2);
        }
    </style>
    <oda-icon :fill="color" ~for="count" :icon-size :icon="getIcon($for.index)" @tap="setValue($for.index)"></oda-icon>
    `,
    $public: {
        iconSize: 32,
        count: 5,
        color: 'gold',
        value: 0,
    },
    getIcon(index) {
        const v = (index + 1) / this.count;
        if (v <= this.value)
            return 'icons:star';
        if (Math.round(v * 10 - this.value * 10)/10< (1 / this.count))
            return 'icons:star-half';
        return 'icons:star-border';
    },
    setValue(idx){
        let val = (idx + 1) / this.count;
        this.value = (!idx && this.value === val)?0:val
    }
});