@neovici/cosmoz-rating 1.0.1 → 1.2.0
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/dist/{src/hooks → hooks}/use-rating.d.ts +1 -1
- package/dist/{src/hooks → hooks}/use-rating.js +18 -15
- package/dist/rating.css.js +71 -0
- package/dist/{src/rating.d.ts → rating.d.ts} +1 -1
- package/package.json +1 -1
- package/dist/src/rating.css.js +0 -36
- package/types/cosmoz-rating.types.ts +0 -13
- /package/dist/{src/index.d.ts → index.d.ts} +0 -0
- /package/dist/{src/index.js → index.js} +0 -0
- /package/dist/{src/rating.css.d.ts → rating.css.d.ts} +0 -0
- /package/dist/{src/rating.js → rating.js} +0 -0
- /package/dist/{types/cosmoz-rating.types.d.ts → types.d.ts} +0 -0
- /package/dist/{types/cosmoz-rating.types.js → types.js} +0 -0
|
@@ -57,36 +57,39 @@ const useRating = (host) => {
|
|
|
57
57
|
if (isPartial && rating !== null) {
|
|
58
58
|
fillPercentage = Math.round((rating % 1) * 100);
|
|
59
59
|
}
|
|
60
|
-
const starPath =
|
|
60
|
+
const starPath = [
|
|
61
|
+
'M6.93894 0.263019L8.39719 3.47842C8.45207 3.59942 8.53952 3.70396',
|
|
62
|
+
'8.65043 3.78114C8.76133 3.85833 8.89163 3.90534 9.02772 3.91727L12.5802',
|
|
63
|
+
'4.22519C12.9821 4.28175 13.1424 4.7583 12.851 5.03271L10.175 7.20599C9.95835',
|
|
64
|
+
'7.38195 9.85977 7.65845 9.91935 7.92553L10.6972 11.4457C10.7655 11.8322',
|
|
65
|
+
'10.3462 12.1276 9.98652 11.9443L6.88586 10.1889C6.76893 10.1225 6.63578',
|
|
66
|
+
'10.0875 6.50017 10.0875C6.36457 10.0875 6.23142 10.1225 6.11448 10.1889L3.01382',
|
|
67
|
+
'11.9432C2.65522 12.1255 2.23486 11.8311 2.30311 11.4447L3.08099 7.92448C3.13949',
|
|
68
|
+
'7.6574 3.04199 7.3809 2.82531 7.20494L0.14825 5.03376C-0.142099 4.7604',
|
|
69
|
+
'0.0182426 4.2828 0.419097 4.22624L3.97154 3.91832C4.10763 3.90639 4.23793',
|
|
70
|
+
'3.85938 4.34883 3.78219C4.45974 3.705 4.54719 3.60046 4.60207 3.47947L6.06031',
|
|
71
|
+
'0.264067C6.24124 -0.0878475 6.7591 -0.0878474 6.93894 0.263019Z',
|
|
72
|
+
].join(' ');
|
|
61
73
|
const partialPaths = svg `<defs>
|
|
62
74
|
<clipPath id="clip-${index}">
|
|
63
75
|
<rect x="0" y="0" width="${fillPercentage}%" height="100%" />
|
|
64
76
|
</clipPath>
|
|
65
77
|
</defs>
|
|
66
|
-
<!-- Background (empty) star -->
|
|
67
|
-
<path d="${starPath}"
|
|
78
|
+
<!-- Background (empty) star with border -->
|
|
79
|
+
<path d="${starPath}"></path>
|
|
68
80
|
<!-- Partial fill (clipped) star -->
|
|
69
|
-
<path
|
|
70
|
-
d="${starPath}"
|
|
71
|
-
fill="var(--rating-star-color)"
|
|
72
|
-
clip-path="url(#clip-${index})"
|
|
73
|
-
></path>`;
|
|
81
|
+
<path d="${starPath}" clip-path="url(#clip-${index})"></path>`;
|
|
74
82
|
return html `
|
|
75
83
|
<svg
|
|
76
84
|
class="${starClass}"
|
|
77
85
|
@click="${() => handleStarClick(starRating)}"
|
|
78
86
|
@mouseenter="${() => handleStarHover(starRating)}"
|
|
79
|
-
viewBox="0 0
|
|
87
|
+
viewBox="-0.5 -0.5 14 13"
|
|
80
88
|
xmlns="http://www.w3.org/2000/svg"
|
|
81
89
|
>
|
|
82
90
|
${isPartial
|
|
83
91
|
? partialPaths
|
|
84
|
-
: svg `<path
|
|
85
|
-
d="${starPath}"
|
|
86
|
-
fill="${starClass.includes('filled')
|
|
87
|
-
? 'var(--rating-star-color)'
|
|
88
|
-
: 'var(--rating-star-color-empty)'}"
|
|
89
|
-
></path>`}
|
|
92
|
+
: svg `<path d="${starPath}"></path>`}
|
|
90
93
|
</svg>
|
|
91
94
|
`;
|
|
92
95
|
};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { css } from '@pionjs/pion';
|
|
2
|
+
export const styles = css `
|
|
3
|
+
:host {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
--cosmoz-rating-color: #cf2005;
|
|
6
|
+
--cosmoz-rating-color-fill: var(--cosmoz-rating-color);
|
|
7
|
+
--cosmoz-rating-color-empty: transparent;
|
|
8
|
+
--cosmoz-rating-color-hover: var(--cosmoz-rating-color);
|
|
9
|
+
--cosmoz-rating-color-border: var(--cosmoz-rating-color);
|
|
10
|
+
--cosmoz-rating-color-border-empty: var(--cosmoz-rating-color);
|
|
11
|
+
--cosmoz-rating-color-border-hover: var(--cosmoz-rating-color);
|
|
12
|
+
|
|
13
|
+
/* Size and spacing */
|
|
14
|
+
--rating-star-size: 24px;
|
|
15
|
+
--rating-star-gap: 2px;
|
|
16
|
+
--rating-star-border-width: 1px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:host([disabled]) {
|
|
20
|
+
pointer-events: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.rating-container {
|
|
24
|
+
display: flex;
|
|
25
|
+
gap: var(--rating-star-gap);
|
|
26
|
+
align-items: center;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.star {
|
|
30
|
+
width: var(--rating-star-size);
|
|
31
|
+
height: var(--rating-star-size);
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
transition:
|
|
34
|
+
fill 0.2s ease,
|
|
35
|
+
stroke 0.2s ease,
|
|
36
|
+
stroke-width 0.2s ease;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host([disabled]) .star {
|
|
40
|
+
cursor: default;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.star path {
|
|
44
|
+
stroke: var(--cosmoz-rating-color-border-empty);
|
|
45
|
+
stroke-width: var(--rating-star-border-width);
|
|
46
|
+
fill: var(--cosmoz-rating-color-empty);
|
|
47
|
+
transition:
|
|
48
|
+
fill 0.2s ease,
|
|
49
|
+
stroke 0.2s ease;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.star.filled path {
|
|
53
|
+
fill: var(--cosmoz-rating-color-fill);
|
|
54
|
+
stroke: var(--cosmoz-rating-color-border);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.star.partial > path:first-of-type {
|
|
58
|
+
fill: var(--cosmoz-rating-color-empty);
|
|
59
|
+
stroke: var(--cosmoz-rating-color-border);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.star.partial > path:last-of-type {
|
|
63
|
+
fill: var(--cosmoz-rating-color-fill);
|
|
64
|
+
stroke: var(--cosmoz-rating-color-border);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.star:hover path {
|
|
68
|
+
fill: var(--cosmoz-rating-color-hover) !important;
|
|
69
|
+
stroke: var(--cosmoz-rating-color-border-hover) !important;
|
|
70
|
+
}
|
|
71
|
+
`;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CosmozRatingElement } from '
|
|
1
|
+
import { CosmozRatingElement } from './types';
|
|
2
2
|
declare const CosmozRating: import("@pionjs/pion/lib/component").ComponentConstructor<CosmozRatingElement>;
|
|
3
3
|
export { CosmozRating };
|
|
4
4
|
export default CosmozRating;
|
package/package.json
CHANGED
package/dist/src/rating.css.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { css } from '@pionjs/pion';
|
|
2
|
-
export const styles = css `
|
|
3
|
-
:host {
|
|
4
|
-
display: inline-block;
|
|
5
|
-
--rating-star-color: #ffd700;
|
|
6
|
-
--rating-star-color-empty: #d3d3d3;
|
|
7
|
-
--rating-star-color-hover: #ffed4a;
|
|
8
|
-
--rating-star-size: 24px;
|
|
9
|
-
--rating-star-gap: 2px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
:host([disabled]) {
|
|
13
|
-
pointer-events: none;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.rating-container {
|
|
17
|
-
display: flex;
|
|
18
|
-
gap: var(--rating-star-gap);
|
|
19
|
-
align-items: center;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.star {
|
|
23
|
-
width: var(--rating-star-size);
|
|
24
|
-
height: var(--rating-star-size);
|
|
25
|
-
cursor: pointer;
|
|
26
|
-
transition: fill 0.2s ease;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
:host([disabled]) .star {
|
|
30
|
-
cursor: default;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.star:hover path {
|
|
34
|
-
color: var(--rating-star-color-hover) !important;
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export interface RatingEvent extends CustomEvent {
|
|
2
|
-
detail: {
|
|
3
|
-
rating: number;
|
|
4
|
-
};
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
export interface CosmozRatingProps {
|
|
8
|
-
rating?: number | null;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
maxRating?: number;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export interface CosmozRatingElement extends HTMLElement, CosmozRatingProps {}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|